/* Phần riêng trang khách (spec 2026-10-12 giao diện mục 5). Nhận diện chung ở brand.css — nạp trước file này. */

.customer main { max-width: 640px; }
.customer .logo-band { justify-content: center; }
.customer .logo-band .logo img { width: 280px; }
.intro { padding: 28px; text-align: center; }

/* Trang cuộn: thẻ đầu + 3 phần (tab ở tab.js) */
.head-card { background: var(--accent-dark); color: #fff; border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.head-card h1 { color: #fff; margin: 0; font-size: 1.45rem; overflow-wrap: anywhere; }
/* Một khối: không vừa dòng thì cả mã xuống dòng, không ngắt giữa hai phần của mã. */
.head-card .reel-code { display: inline-block; max-width: 100%; }
.head-card .summary { margin: 4px 0 0; color: #dcdcf2; font-size: .92em; overflow-wrap: anywhere; }
/* Vạch mảnh tách "cuộn này là gì" (trên) với "số liệu cuộn" (dưới). Điện thoại: số liệu chia 3 cột bằng nhau
   (yêu cầu 2026-10-13): Chiều dài | 1310 nm | 1550 nm — khối suy hao chiếm 2 cột, bên trong lại chia 2 cột cùng khoảng
   cách nên 1310/1550 thẳng mép cột. Khe 78px (yêu cầu 2026-10-18): số cuối cách mép phải gần bằng mã cuộn cách mép
   trái ở điện thoại 360–430px. Nhãn bám đỉnh, số bám đáy: nhãn suy hao xuống 2 dòng vẫn thẳng hàng số. */
.figures { --gap: 78px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px var(--gap);
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); }
.length { display: flex; flex-direction: column; }
.length .value { margin-top: auto; }
.atten-avg { grid-column: 2 / 4; }
.head-card .avg-label { margin: 0 0 4px; font-size: .82em; color: #dcdcf2; }
.head-card .value { margin-bottom: 0; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.atten-avg dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; }
.atten-avg dt { font-size: .78em; color: #dcdcf2; }
.atten-avg dd { margin: 0; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.atten-avg.unmeasured { color: #dcdcf2; }
th .unit { display: block; font-size: .78em; font-weight: 400; color: var(--muted); }
.tab-panel + .tab-panel { margin-top: 14px; }
.tab-frame.has-tabs .tab-panel + .tab-panel { margin-top: 0; }
dl.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
dl.info-grid dt { color: var(--muted); font-size: .82em; }
dl.info-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
dl.info-grid .wide { grid-column: 1 / -1; }
.fiber-group + .fiber-group { margin-top: 14px; }
.fiber-group h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .95rem; color: var(--accent-dark); }
.fiber-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-soft); border-radius: 6px; }
.fiber-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 10px;
  border-top: 1px solid var(--line-soft); }
.fiber-list li:first-child { border-top: 0; }
.fiber-list .color-name { overflow-wrap: anywhere; }
/* Số thứ tự sợi 1–24: nhỏ, nhạt, cột cố định — để thợ gọi "sợi 14"; mã sợi quang vẫn là thông tin chính. */
.fiber-list .fiber-no { flex: none; min-width: 2ch; color: var(--muted); font-size: .82em; text-align: right;
  font-variant-numeric: tabular-nums; }
/* Mã sợi quang dồn phải; màn hẹp thì xuống dòng dưới tên màu, vẫn dồn phải. */
.fiber-list .fiber-code { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  overflow-wrap: anywhere; }
.fiber-list .fiber-code.missing { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.explain { margin: -4px 0 12px; font-size: .9em; }
.color-dot { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--color);
  border: 1px solid rgba(0, 0, 0, .25); }
.customer .contact { margin-top: 20px; border-top: 0; }
.tab-list { display: flex; margin: 0 0 12px; border-bottom: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0; }
.tab-list[hidden] { display: none; }
.tab-list button, .tab-list button:hover { flex: 1; min-height: 44px; border: 0; border-radius: 0; background: none;
  color: var(--muted); font-weight: 600; box-shadow: inset 0 -3px transparent; }
.tab-list button:hover { background: var(--accent-light); color: var(--accent-dark); }
.tab-list button[aria-selected="true"] { color: var(--accent-dark); box-shadow: inset 0 -3px var(--brand-red); }
.tab-list button:focus-visible { box-shadow: var(--focus), inset 0 -3px var(--brand-red); }

@media (max-width: 359px) {
  dl.info-grid { grid-template-columns: 1fr; }
  .figures { --gap: 10px; }  /* khe 78px làm số tràn mép phải dưới 360px */
}

/* Màn rất hẹp: 3 cột số liệu chỉ còn ~75px — thu cỡ số cho "4,000 m" vừa cột. */
@media (max-width: 379px) {
  .head-card .value, .atten-avg dd { font-size: 1.12rem; }
}

/* Laptop (yêu cầu 2026-10-13): cột 640px để trống hai bên → dùng cả bề rộng, các khối thẳng mép, đáy bằng nhau.
   Thẻ đầu: mã cuộn trái, 3 ô số liệu phải. Không tab (tab.js tắt ở cùng mốc 960px), hiện cả 3 phần:
   hàng 1 Thông tin (7) + Suy hao (5) cao bằng nhau; hàng 2 24 sợi rộng hết trang, 4 ống chia 2 × 2. */
@media (min-width: 960px) {
  .customer main { max-width: 1180px; padding-left: 24px; padding-right: 24px; }
  .head-card { display: grid; align-items: center; gap: 6px 40px; padding: 24px 28px; margin-bottom: 20px; }
  .head-card h1 { font-size: 1.75rem; }
  .head-card h1, .head-card .summary { grid-column: 1; }
  /* Khối số liệu rộng vừa nội dung, dồn phải: số cuối cách mép phải bằng mã cuộn cách mép trái (padding thẻ). Cột
     vừa nội dung, khe đều 125px (yêu cầu 2026-10-18, thay "3 cột bằng nhau" của 2026-10-13 ở màn rộng); nhãn suy hao
     không tính vào bề rộng, nằm gọn trong bề rộng 2 số + khe. */
  .head-card { grid-template-columns: minmax(0, 1fr) auto; }
  .figures { --gap: 125px; grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0 0 0 32px; border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, .2); grid-template-columns: repeat(3, max-content); }
  .atten-avg dl { grid-template-columns: repeat(2, max-content); }
  .atten-avg .avg-label { width: 0; min-width: 100%; }
  .head-card .value, .atten-avg dd { font-size: 1.7rem; }
  .tab-frame { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
  .tab-frame .tab-panel + .tab-panel { margin-top: 0; }
  .tab-frame > .card { margin: 0; }
  #info { grid-column: 1; }
  #attenuation { grid-column: 2; grid-row: 1; }
  #fibers { grid-column: 1 / -1; }
  /* Bảng suy hao giãn hết thẻ: đáy thẻ Suy hao và thẻ Thông tin bằng nhau, không còn khoảng trống dưới bảng. */
  #attenuation { display: flex; flex-direction: column; }
  #attenuation .table-wrap { flex: 1; }
  #attenuation table { height: 100%; }
  #attenuation th, #attenuation td { vertical-align: middle; white-space: nowrap; }
  /* Thông tin 3 cột, 4 hàng không lỗ: Loại cáp cả hàng; Khách hàng 2 cột + Số HĐ 1 cột ở hàng cuối. */
  /* cột 3 rộng vừa đủ giá trị dài nhất của nó (Số HĐ) — không ngắt "74/2026/H04-THOAIANH" ở 1024px */
  dl.info-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; gap: 14px 24px; }
  dl.info-grid .wide { grid-column: span 2; }
  dl.info-grid .wide:first-child { grid-column: 1 / -1; }
  dl.info-grid .wide:last-child { grid-column: auto; }
  #fibers .group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  #fibers .fiber-group + .fiber-group { margin-top: 0; }
  /* Dòng sợi thành bảng nhỏ: số | chấm màu | tên màu | mã sợi. Mã sợi dồn phải, cách mép phải bằng số thứ tự 2 chữ
     số cách mép trái (yêu cầu 2026-10-18); các mã cùng độ dài nên vẫn thẳng một cột. */
  .fiber-list li { display: grid; grid-template-columns: 2ch 14px 6em minmax(0, 1fr); column-gap: 10px;
    padding-right: 13px; }
  .fiber-list .fiber-no { grid-column: 1; }
  .fiber-list .color-dot { grid-column: 2; }
  .fiber-list .color-name { grid-column: 3; }
  .fiber-list .fiber-code { grid-column: 4; justify-self: end; margin-left: 0; white-space: nowrap; }
}

/* 960–1199px: thẻ Thông tin cần rộng hơn để 3 cột không ngắt chữ; thẻ đầu bớt chỗ cho số liệu. */
@media (min-width: 960px) and (max-width: 1199px) {
  .tab-frame { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .head-card { gap: 6px 28px; }
  .figures { padding-left: 24px; }
  .head-card h1 { font-size: 1.55rem; }
}

/* Trang khách không cho in (yêu cầu 2026-10-12): bản in / PDF chỉ có thông báo + liên hệ. */
.print-only { display: none; }
@media print {
  body.customer > * { display: none !important; }
  body.customer > .print-only { display: block !important; margin: 24px; color: #000; font-size: 14pt; }
}