/* Bảng giá vàng: giống bảng điện tử ở tiệm (khung vàng tên tiệm, hàng tiêu đề xanh, dòng đỏ chữ số vàng).
   Cỡ chữ tính theo bề ngang của chính bảng (đơn vị cqw), nên điện thoại hay tivi đều vừa khít.
   Bắt đầu trên web: GET /bang-gia-vang (bang-gia-vang.html) và trang admin "Điều chỉnh giá vàng" (/admin/bang-gia-vang).
   Để riêng tệp này (không gộp vào shop.css) để các trang khác không phải tải thêm. Sửa thì tăng ?v= ở hai template trên. */

:root {
  --gv-yellow: #F4E25A;
  --gv-red-text: #C8161D;
  --gv-blue: #1F2BB5;
  --gv-red: #D3171E;
  --gv-red-dark: #A50F14;
  --gv-gold: #FFE81F;
  --gv-line: rgba(255, 255, 255, .85);
}

/* ----- Trang xem giá ----- */
.gv-main { padding: clamp(.5rem, 2vw, 1.5rem); }
.gv-board { container-type: inline-size; max-width: 1700px; margin: 0 auto; background: var(--gv-red); border: clamp(4px, .6vw, 10px) solid #111;
  border-radius: 6px; overflow: hidden; box-shadow: var(--mb-shadow-lg, 0 18px 50px rgba(0,0,0,.2)); }

.gv-head { position: relative; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 1cqw; background: var(--gv-yellow);
  color: var(--gv-red-text); padding: 1.4cqw 2.5cqw; text-transform: uppercase; }
/* Góc trái: đúng 2 dòng (tên công ty / "Bảng giá vàng"), chữ đậm không chân giống "ĐVT", không bao giờ tự xuống dòng */
.gv-company { display: flex; flex-direction: column; align-self: center; gap: .3cqw; font-weight: 700; font-size: min(1.45cqw, 2.6vh);
  line-height: 1.25; letter-spacing: .02em; white-space: nowrap; }
.gv-brand { text-align: center; }
.gv-brand h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: min(5.4cqw, 9vh); line-height: 1.05; margin: 0; white-space: nowrap; }
.gv-date { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: min(2.4cqw, 4vh); margin-top: .3cqw; }
.gv-unit { align-self: end; text-align: right; font-weight: 700; font-size: 1.9cqw; }

.gv-updating { display: flex; justify-content: center; align-items: center; gap: .6cqw; background: var(--gv-red-dark); color: var(--gv-gold);
  font-weight: 700; font-size: max(.95rem, 2.4cqw); text-transform: uppercase; letter-spacing: .06em; padding: .8cqw 1cqw;
  border-top: 2px solid var(--gv-line); animation: gv-pulse 2.4s ease-in-out infinite; }
.gv-updating i { display: inline-block; animation: gv-spin 2.4s linear infinite; }
@keyframes gv-pulse { 50% { opacity: .55; } }
@keyframes gv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gv-updating, .gv-updating i { animation: none; } }

.gv-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gv-table th { background: var(--gv-blue); color: #fff; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; text-transform: uppercase;
  font-size: min(3cqw, 5vh); text-align: center; padding: .8cqw .5cqw; border: 2px solid var(--gv-line); border-top: 0; }
.gv-table th:nth-child(2) { width: 28%; }
.gv-table td { border: 2px solid var(--gv-line); text-align: center; vertical-align: middle; padding: 1cqw .6cqw; }
.gv-table tr:last-child td { border-bottom: 0; }
.gv-table th:first-child, .gv-table td:first-child { border-left: 0; }
.gv-table th:last-child, .gv-table td:last-child { border-right: 0; }
.gv-num { color: var(--gv-gold); font-weight: 700; font-size: min(5.2cqw, 6.6vh); line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  text-shadow: 0 .25cqw 0 rgba(0, 0, 0, .25); white-space: nowrap; }
.gv-type { color: #fff; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; text-transform: uppercase; line-height: 1.2; }
.gv-type span { display: block; font-size: min(2.4cqw, 4vh); }
.gv-type small { display: block; font-size: min(2cqw, 3.4vh); font-weight: 600; margin-top: .2cqw; }
.gv-empty { color: var(--gv-gold); font-weight: 700; font-size: max(1rem, 3cqw); text-align: center; padding: 6cqw 3cqw; margin: 0; }

.gv-tools { display: flex; justify-content: center; margin-top: 1rem; }

/* Toàn màn hình (tivi): bảng phủ kín màn hình, các dòng giãn đều theo chiều cao */
.gv-board:fullscreen { max-width: none; width: 100vw; height: 100vh; border-width: 0; border-radius: 0; display: flex; flex-direction: column; overflow: auto; }
.gv-board:fullscreen .gv-table { flex: 1; height: 100%; }

/* Điện thoại dọc: chữ tên tiệm / tên loại vàng không nhỏ quá */
@container (max-width: 560px) {
  .gv-head { grid-template-columns: 1fr; text-align: center; gap: .3rem; padding: .8rem; }
  .gv-company { flex-direction: row; justify-content: center; gap: .4rem; font-size: .72rem; }
  .gv-company span + span::before { content: '·'; padding-right: .4rem; }
  .gv-brand h1 { font-size: 10cqw; }
  .gv-date { font-size: 1.05rem; }
  .gv-unit { text-align: center; font-size: .75rem; }
  .gv-table th { font-size: .82rem; padding: .55rem .2rem; }
  .gv-table th:nth-child(2) { width: 26%; }
  .gv-num { font-size: 5.3cqw; }
  .gv-type span { font-size: .74rem; }
  .gv-type small { font-size: .72rem; }
  .gv-table td { padding: .8rem .25rem; }
}

/* ----- Trang admin "Điều chỉnh giá vàng" ----- */
.gv-day-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.gv-day-pick input { width: auto; min-width: 11rem; }
.gv-day-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.gv-day-big { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.5rem; }
.gv-note { background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412; font-size: .92rem; }
.gv-edit-head, .gv-edit-row { display: grid; grid-template-columns: 2fr 1fr 1.6fr 1.6fr auto; gap: .5rem; align-items: center; }
.gv-edit-head { font-size: .8rem; font-weight: 600; color: var(--mb-muted, #78716C); margin-bottom: .3rem; }
.gv-edit-row { padding: .45rem 0; border-bottom: 1px dashed var(--mb-line, #ECE6DD); }
.gv-price { text-align: right; font-variant-numeric: tabular-nums; }
.gv-delete { margin-top: 1.4rem; }
.gv-delete > summary { list-style: none; }
.gv-delete > summary::-webkit-details-marker { display: none; }
.gv-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.gv-days a { padding: .3rem .7rem; border-radius: 999px; background: #F5F5F4; color: var(--mb-ink, #1C1917); font-size: .88rem; font-variant-numeric: tabular-nums; }
.gv-days a:hover { background: #FFEDD5; }
.gv-days a.active { background: var(--mb-accent, #C2410C); color: #fff; }

/* Điện thoại: mỗi dòng sửa giá thành 2 hàng (tên + tuổi vàng + nút xoá, rồi mua + bán) */
@media (max-width: 767.98px) {
  .gv-edit-row { grid-template-columns: 1fr 1fr auto; }
  .gv-edit-row > input:nth-child(1) { grid-column: 1; grid-row: 1; }
  .gv-edit-row > input:nth-child(2) { grid-column: 2; grid-row: 1; }
  .gv-edit-row > button { grid-column: 3; grid-row: 1; }
  .gv-edit-row > input:nth-child(3) { grid-column: 1; grid-row: 2; }
  .gv-edit-row > input:nth-child(4) { grid-column: 2; grid-row: 2; }
}
.gv-delete { display: inline-block; }
.gv-delete .mb-cat-del-box { left: 0; right: auto; }