/* goldprice-style.css */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;700&display=swap');

.goldprice-wrapper * {
  box-sizing: border-box;
/*  font-family: 'Prompt', sans-serif;*/
}

.goldprice-wrapper {
  background: #fff;
  padding: 1em;
  max-width: 720px;
  margin: auto;
}

/* ========== ODOMETER FIX ========== */
.goldprice-wrapper .odometer {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  overflow: hidden;
}

.goldprice-wrapper .odometer span,
.goldprice-wrapper .odometer-digit,
.goldprice-wrapper .odometer-formatting-mark,
.goldprice-wrapper .odometer-ribbon,
.goldprice-wrapper .odometer-ribbon-inner {
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  float: none !important;
  vertical-align: baseline !important;
}

/* สีไอคอนขึ้น-ลง */
.goldprice-wrapper #buypricechg-icon.fa-angle-double-up {
  color: #62d53b !important;
}
.goldprice-wrapper #buypricechg-icon.fa-angle-double-down {
  color: #FF3D38 !important;
}
.goldprice-wrapper #buypricechg-icon {
  color: #62d53b;
}

.goldprice-wrapper .price.odometer.up {
  color: #62d53b;
}

.goldprice-wrapper .price.odometer.down {
  color: #FF3D38;
}

/* ส่วนหัว */
.goldprice-wrapper .gp-content {
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}

.goldprice-wrapper .gp-head {
  text-align: center;
  padding: 1em;
}

.goldprice-wrapper .gp-header {
  font-size: 1.5em;
  color: #BD220D;
  font-weight: bold;
  margin: 0;
}

.goldprice-wrapper .gp-date {
  color: #BD220D;
  font-size: 0.9em;
}

/* ========== BODY 1 ========== */
.goldprice-wrapper .gp-body1 {
  background: #BD220D;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1em;
  padding: 1em;
}

/* ฝั่งซ้าย */
.goldprice-wrapper .gp-col-left {
  text-align: right;
}

.goldprice-wrapper .gp-body1 .price {
  font-size: 2em;
  color: #FFD700;
}

.goldprice-wrapper .gp-body1 .accent2 {
  color: #fff;
}

/* ฝั่งขวา */
.goldprice-wrapper .gp-col-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5em;
}

.goldprice-wrapper .gp-subcol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120px;
}

.goldprice-wrapper .gp-subcol .price-label {
  margin: 0;
/*  font-size: 1.2em;*/
  color: #fff;
  text-align: right;
  padding-right:10px;	
}

.goldprice-wrapper .gp-subcol .accent2 {
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .goldprice-wrapper .gp-col-right {
    flex-direction: column;
    gap: 0.5em;
  }
}

/* ========== BODY 2 ========== */
.goldprice-wrapper .gp-body2 {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 10px;
  gap: 10px;
}

.goldprice-wrapper .gp-body2 h4 {
    margin-bottom: 2px;
	font-weight: bold;
}

.goldprice-wrapper .gp-col {
  flex: 1;
}

.goldprice-wrapper em { font-size:12px;text-align:right;margin-top: 10px;display: block; }

.goldprice-wrapper .gp-inline {
  display: inline-flex;
  gap: 6px;
  font-size: 1.2em;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

/* ข้อมูลเพิ่มเติม */
.goldprice-wrapper .gp-info h4 {
  margin-bottom: 0.3em;
  font-size: 1em;
  color: #333;
}


.goldprice-wrapper .gp-info .price-small {
  display: block;
  font-size: 1.2em;
}

.goldprice-wrapper .up {
  color: #62d53b;
}
.goldprice-wrapper .down {
  color: #FF3D38;
}
.goldprice-wrapper .price-small.up::before {
  content: '+';
}
.goldprice-wrapper .price-small.down::before {
  content: '(';
}
.goldprice-wrapper .price-small.down::after {
  content: ')';
}