/* Lướt Sóng — app khách. Bảng màu và bố cục bảng BÊ NGUYÊN từ bản nội bộ
   (web/style.css): nền kem, tab navy–vàng, hàng viên thuốc trắng có vạch màu trái.
   Thêm ở đây: cổng đăng nhập, thanh hạn dùng, hộp tài khoản / gia hạn. */
:root {
  --nen: #FBF4EC;
  --nen-dam: #F4E9DC;
  --the: #FFFFFF;
  --chu: #2B2B2B;
  --chu-mo: #8A8178;
  --vien: #EBDFD0;
  --vien-dam: #D9C9B4;
  --vang: #B7791F;
  --vang-nhat: #E0A800;
  --navy: #16243A; --navy-2: #1F3352; --vang-sang: #F2C14E;

  /* Bốn màu vạch của Thiết Đầu Công: vàng · cam · tím · đen (đen = đường dài nhất) */
  --k-vang: #E0A800;
  --k-cam:  #E67E22;
  --k-tim:  #8E44AD;
  --k-den:  #2B2B2B;
  --k-xanh: #1E9E5A;

  /* Hạng Hợp Lưu */
  --h4: #4F6BD8;
  --h3: #D4A017;
  --h22: #8C8C8C;
  --h2: #B87333;

  --chac: #1E9E5A;
  --canxem: #E0A800;
  --mongmanh: #C0392B;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--nen); color: var(--chu);
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
body { max-width: 560px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column; padding-bottom: 110px; }
body.dang-o-cong { overflow: hidden; }

/* ---- đầu ---- */
.dau { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 6px; }
.dau-trai { display: flex; align-items: center; gap: 10px; }
.logo-nho { width: 34px; height: 34px; border-radius: 50%; }
.ten-app { font-weight: 700; letter-spacing: -0.01em; }
.dau-phai { display: flex; align-items: center; gap: 10px; }
.dau-cot { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ngay { font-size: 14px; color: var(--chu); }
.chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--the); color: var(--chu-mo);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.moi { border-color: var(--chac); color: var(--chac); }
.nut-tai-khoan { flex: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: var(--the); border: 1px solid var(--vien); color: var(--navy);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(80,60,30,.06); }
.nut-tai-khoan svg { width: 21px; height: 21px; }
.nut-tai-khoan:hover { border-color: var(--vang); }

/* ---- thanh hạn dùng: một hàng cho mỗi phần (Cổ phiếu / Phái sinh) ---- */
#han-dung:empty { display: none; }
#han-dung { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.han { display: flex; align-items: center; gap: 10px; margin: 0 12px;
  padding: 8px 12px; border-radius: 12px; background: var(--the); border: 1px solid var(--vien);
  box-shadow: 0 1px 2px rgba(80,60,30,.06); font-size: 12.5px; color: var(--chu-mo); }
.han-ten { flex: none; font-weight: 700; color: var(--navy); letter-spacing: .02em; }
.han.thu .han-ten { color: var(--vang); }
.han-thanh { flex: 1; min-width: 40px; height: 7px; border-radius: 999px; overflow: hidden; background: var(--nen-dam); }
/* display:block BẮT BUỘC: span inline thì width bị bỏ qua, pin lúc nào cũng trống */
.han-day { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), var(--navy-2)); }
.han.thu .han-day { background: linear-gradient(90deg, var(--vang), var(--vang-sang)); }
.han.vua .han-day { background: var(--vang-nhat); }
.han.sap-het .han-day { background: var(--mongmanh); }
.han.sap-het .han-chu b { color: var(--mongmanh); }
.han-chu { flex: none; white-space: nowrap; }
.han-chu b { color: var(--chu); }
.nut-gia-han { flex: none; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px; border: 0; cursor: pointer;
  color: var(--vang-sang); background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.han.sap-het .nut-gia-han, .han.het .nut-gia-han { background: var(--mongmanh); color: #fff; }
.han.het .han-day { background: #D9CFC2; }
.han.het .han-chu b { color: var(--mongmanh); }
.han-ten { min-width: 74px; }
@media (max-width: 430px) { .han-chu { font-size: 11.5px; } .han { gap: 8px; } .han-ten { min-width: 0; font-size: 12px; } }

/* ---- tabs: BA KHỐI RIÊNG, có khoảng hở ---- */
.tabs { display: flex; gap: 10px; margin: 12px 12px 0; padding: 0; background: none; }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 13px; padding: 11px 6px;
  box-shadow: 0 1px 2px rgba(80,60,30,.06);
  font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--chu-mo); cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tab:hover { color: var(--chu); border-color: var(--vien-dam); }
.tab.dang-chon { color: var(--vang-sang); border-color: transparent;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  box-shadow: 0 3px 12px rgba(22,36,58,.30); }
.tab:focus-visible { outline: 2px solid var(--vang); outline-offset: 2px; }
.tab .dem { font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px;
  background: rgba(43,43,43,.08); color: var(--chu-mo); font-variant-numeric: tabular-nums; }
.tab.dang-chon .dem { background: var(--vang-sang); color: var(--navy); }
/* Tab của phần chưa mở / hết hạn: vẫn bấm được (hiện màn khoá), gắn ổ khoá nhỏ */
.tab.bi-khoa .tab-ten::after { content: " 🔒"; font-size: .85em; }
@media (prefers-reduced-motion: reduce) { .tab { transition: none; } }
@media (max-width: 430px) {
  .tabs { gap: 6px; }
  .tab { font-size: 12.5px; padding: 9px 4px; gap: 4px; }
  .tab .tab-ten { white-space: nowrap; }
  .tab .dem { font-size: 10px; padding: 2px 5px; }
}

/* ---- chú thích + tiêu đề cột ---- */
.chu-thich { padding: 10px 16px 2px; font-size: 12.5px; color: var(--chu-mo);
  display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 22px; }
.chu-thich .cham { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 4px; vertical-align: -1px; }
/* Lưới 5 cột dùng CHUNG cho tiêu đề và hàng số -> luôn thẳng cột.
   Mã | Giá mới nhất | Mốc (Chạm tại / Mốc mây / Hạng) | % so mốc | Phiên */
:root { --luoi: minmax(54px, .9fr) minmax(94px, 1.15fr) minmax(0, 1.15fr)
                minmax(68px, .8fr) minmax(64px, .8fr); }
.tieu-de-cot .ngan { display: none; }
@media (max-width: 430px) {
  :root { --luoi: 46px 60px minmax(0, 1fr) 50px 54px; }
  .tieu-de-cot .dai { display: none; }
  .tieu-de-cot .ngan { display: inline; }
  .hang .gia, .hang .vitri { font-size: 14.5px; }
}
.tieu-de-cot { display: grid; grid-template-columns: var(--luoi); align-items: end;
  padding: 2px 10px 6px 16px; border-left: 7px solid transparent;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--chu-mo); line-height: 1.15; white-space: nowrap; }
.c-thaydoi, .c-ngay { text-align: right; }
.c-gia, .c-vitri { text-align: center; }

/* ---- danh sách: hai khu ---- */
.danh-sach { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 18px; }
.khu { border-radius: 16px; overflow: hidden; }
.khu-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; }
.khu-dau-trai { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.khu-ngay { font-size: 12.5px; opacity: .85; text-transform: capitalize; }
.huy-hieu { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

.khu-hom-nay { background: var(--the); border: 1px solid var(--vien);
  box-shadow: 0 2px 10px rgba(80,60,30,.07); }
.khu-hom-nay .khu-dau { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--vang-sang); }
.khu-hom-nay .huy-hieu { background: var(--vang-sang); color: var(--navy); }
.khu-hom-nay .khu-than { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px 12px; }
.khu-hom-nay.dang-song { border-color: var(--vang-nhat);
  box-shadow: 0 0 0 1px rgba(224,168,0,.35), 0 4px 22px rgba(224,168,0,.18); }
.khu-trong { display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px 12px 18px; color: var(--chu-mo); font-size: 13px; }
.khu-trong strong { color: var(--chu); font-weight: 600; font-size: 14px; }

.khu-cu { background: transparent; }
.khu-cu .khu-dau { padding: 4px 6px 6px; color: var(--chu-mo); }
.khu-cu .huy-hieu { background: var(--nen-dam); color: var(--chu-mo); font-weight: 600; }
.khu-cu .hang { box-shadow: none; border: 1px solid var(--vien); border-left-width: 6px;
  opacity: .93; margin: 0 0 8px; }
.ngay-nhom { display: flex; justify-content: space-between; align-items: baseline;
  margin: 10px 8px 6px; font-size: 12px; color: var(--chu-mo); letter-spacing: .02em;
  text-transform: capitalize; }
.ngay-nhom:first-of-type { margin-top: 2px; }
.ngay-dem { font-variant-numeric: tabular-nums; }

.hang .ngay { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.hang .phien { font-size: 10.5px; color: var(--chu-mo); letter-spacing: .04em; }

/* HÀNG PHÁT SÁNG — nền tô + viền sáng theo đúng màu tín hiệu (chỉ khu hôm nay) */
.hang.sang { --mau-th: var(--k-den); border-left-width: 7px;
  background: color-mix(in srgb, var(--mau-th) 9%, #fff);
  box-shadow: 0 0 0 1.5px var(--mau-th), 0 0 16px color-mix(in srgb, var(--mau-th) 45%, transparent),
              inset 0 0 22px color-mix(in srgb, var(--mau-th) 6%, transparent);
  animation: hien .18s ease-out both, tho 2.6s ease-in-out 0.4s infinite; }
.hang.sang[data-mau="vang"] { --mau-th: var(--k-vang); }
.hang.sang[data-mau="cam"]  { --mau-th: var(--k-cam); }
.hang.sang[data-mau="tim"]  { --mau-th: var(--k-tim); }
.hang.sang[data-mau="den"]  { --mau-th: #3A3A3A; }
.hang.sang[data-mau="xanh"] { --mau-th: var(--k-xanh); }
.hang.sang.hop-luu[data-hang="4"]   { --mau-th: var(--h4); border-left-color: var(--h4); }
.hang.sang.hop-luu[data-hang="3"]   { --mau-th: var(--h3); border-left-color: var(--h3); }
.hang.sang.hop-luu[data-hang="2x2"] { --mau-th: var(--h22); border-left-color: var(--h22); }
.hang.sang.hop-luu[data-hang="2"]   { --mau-th: var(--h2); border-left-color: var(--h2); }
.hang.sang .ma { color: var(--navy); }
@keyframes tho {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--mau-th), 0 0 12px color-mix(in srgb, var(--mau-th) 35%, transparent),
                         inset 0 0 22px color-mix(in srgb, var(--mau-th) 6%, transparent); }
  50%      { box-shadow: 0 0 0 1.5px var(--mau-th), 0 0 22px color-mix(in srgb, var(--mau-th) 60%, transparent),
                         inset 0 0 22px color-mix(in srgb, var(--mau-th) 6%, transparent); }
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .hang.sang { background: #FFFBF3; box-shadow: 0 0 0 1.5px var(--mau-th), 0 0 14px rgba(224,168,0,.35); animation: none; }
}
@media (prefers-reduced-motion: reduce) { .hang.sang { animation: none; } }

.hang { position: relative; display: grid; grid-template-columns: var(--luoi);
  align-items: center; background: var(--the); border-radius: 14px;
  padding: 13px 10px 13px 16px; box-shadow: 0 1px 2px rgba(80,60,30,.06);
  border-left: 7px solid var(--k-den); font-variant-numeric: tabular-nums;
  animation: hien .18s ease-out both; }
@keyframes hien { from { opacity: .0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hang { animation: none; } }
.hang .ma { font-weight: 700; font-size: 17px; letter-spacing: .01em; }
.hang .san { display: block; font-size: 10.5px; color: var(--chu-mo); font-weight: 400; letter-spacing: .06em; }
.hang .gia { text-align: center; font-size: 15.5px; }
.hang .vitri { text-align: center; font-size: 15.5px; font-weight: 500; }
.hang .ngay { text-align: right; font-size: 14px; color: var(--chu); }

.hang[data-mau="vang"] { border-left-color: var(--k-vang); }
.hang[data-mau="cam"]  { border-left-color: var(--k-cam); }
.hang[data-mau="tim"]  { border-left-color: var(--k-tim); }
.hang[data-mau="den"]  { border-left-color: var(--k-den); }
.hang[data-mau="xanh"] { border-left-color: var(--k-xanh); }
.hang[data-mau="vang"] .vitri { color: var(--k-vang); }
.hang[data-mau="cam"]  .vitri { color: var(--k-cam); }
.hang[data-mau="tim"]  .vitri { color: var(--k-tim); }
.hang[data-mau="den"]  .vitri { color: var(--k-den); }
.hang[data-mau="xanh"] .vitri { color: var(--k-xanh); }

.hang.hop-luu { border-left-color: #7A7A7A; }
.hang.hop-luu .vitri { font-weight: 700; }
.hang.hop-luu[data-hang="4"]   { border-left-color: var(--h4); }
.hang.hop-luu[data-hang="3"]   { border-left-color: var(--h3); }
.hang.hop-luu[data-hang="2x2"] { border-left-color: var(--h22); }
.hang.hop-luu[data-hang="2"]   { border-left-color: var(--h2); }
.hang[data-hang="4"] .vitri   { color: var(--h4); }
.hang[data-hang="3"] .vitri   { color: var(--h3); }
.hang[data-hang="2x2"] .vitri { color: var(--h22); }
.hang[data-hang="2"] .vitri   { color: var(--h2); }

.thay-doi { justify-self: end; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .02em; line-height: 1.4;
  font-variant-numeric: tabular-nums; color: #fff; background: var(--chu-mo); }
.thay-doi[data-v="tang"] { background: var(--chac); }
.thay-doi[data-v="giam"] { background: var(--mongmanh); }
.thay-doi[data-v="bang"] { background: #B0A79C; }

.chu-thich-hang { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-right: 14px; }
.chu-thich-hang .chu-thich { flex: 1; }
.nut-cach-doc { background: var(--the); border: 1px solid var(--vien); color: var(--vang);
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; }
.nut-cach-doc:hover { border-color: var(--vang); }
.nut-cach-doc:focus-visible { outline: 2px solid var(--vang); outline-offset: 2px; }

/* ---- hộp thoại (Cách đọc · Tài khoản · Gia hạn) ---- */
.hop { border: 0; border-radius: 18px; padding: 0; width: min(92vw, 520px);
  background: var(--the); color: var(--chu); box-shadow: 0 20px 60px rgba(30,20,10,.28); }
.hop::backdrop { background: rgba(22,36,58,.55); backdrop-filter: blur(2px); }
.hop form, .hop .hop-than { padding: 0 20px 18px; }
.hop header { display: flex; align-items: center; justify-content: space-between;
  margin: 0 -20px 12px; padding: 14px 20px; background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: var(--vang-sang); border-radius: 18px 18px 0 0; }
.hop h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.nut-dong { background: rgba(255,255,255,.12); border: 0; color: inherit; width: 30px; height: 30px;
  border-radius: 50%; font-size: 14px; cursor: pointer; }
.hop dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px 0; }
.hop dt { font-weight: 700; font-size: 13.5px; color: var(--navy); margin-top: 6px; }
.hop dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; color: #3C3C3C; }
.hop dt:first-child { margin-top: 0; }
.mau-chac { color: var(--chac); font-weight: 600; }
.mau-mongmanh { color: var(--mongmanh); font-weight: 600; }
.hop-luu-y { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--vien);
  font-size: 12px; color: var(--chu-mo); line-height: 1.5; }

/* hồ sơ dạng hai cột nhãn — giá trị */
dl.tk { grid-template-columns: 110px 1fr; gap: 6px 10px; align-items: baseline; }
dl.tk dt { margin: 0; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--chu-mo); }
dl.tk dd { margin: 0; font-size: 14px; }
.tk-nut { display: flex; gap: 8px; margin-top: 16px; }
.nut-chinh { flex: 1; font: inherit; font-size: 14px; font-weight: 700; padding: 12px 14px; border-radius: 12px;
  border: 0; cursor: pointer; color: var(--vang-sang); background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.nut-phu { font: inherit; font-size: 13.5px; font-weight: 600; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--vien); background: var(--the); color: var(--chu-mo); cursor: pointer; }
.nut-phu:hover { color: var(--mongmanh); border-color: var(--mongmanh); }

/* gia hạn */
.gh-gia { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gh-gia-cu { text-decoration: line-through; color: var(--chu-mo); font-size: 15px; }
.gh-gia-moi { font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.gh-gia-phu { font-size: 13px; color: var(--chu-mo); }
.gh-gia-phu b { color: var(--vang); }
.gh-ma { display: flex; gap: 8px; }
.gh-ma input { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--vien);
  font: inherit; font-size: 15px; text-transform: uppercase; background: var(--nen); }
.gh-ma input::placeholder { text-transform: none; }
.gh-ma input:focus { outline: none; border-color: var(--vang); }
.cong input.o-phu::placeholder { text-transform: none; }
.gh-ma button { font: inherit; font-size: 13.5px; font-weight: 700; padding: 0 16px; border-radius: 11px;
  border: 1px solid var(--navy); background: var(--the); color: var(--navy); cursor: pointer; }
.gh-ma button:disabled { opacity: .6; }
.gh-loi { margin: 10px 0 0; font-size: 13px; color: var(--mongmanh); }
.gh-qr { display: flex; justify-content: center; margin: 16px 0 12px; }
.gh-qr img { width: 230px; height: 230px; border-radius: 14px; border: 1px solid var(--vien); background: #fff; }
.gh-tt dd b { font-variant-numeric: tabular-nums; }
.nut-chep { font: inherit; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--the); color: var(--vang); cursor: pointer; }

.trong { text-align: center; color: var(--chu-mo); padding: 40px 16px; }
.trang-thai { text-align: center; color: var(--chu-mo); padding: 30px 16px; }
.loi { text-align: center; color: var(--mongmanh); padding: 24px 16px; font-size: 14px; }

/* ---- đáy ---- */
.day { position: fixed; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
  background: linear-gradient(to top, var(--nen) 70%, rgba(251,244,236,0));
  display: flex; flex-direction: column; align-items: center; padding: 8px 16px 14px; }
.logo-day { width: 64px; height: 64px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--vang-nhat), 0 4px 14px rgba(183,121,31,.35); }
.day-chu { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.day-ten { color: var(--vang); font-weight: 600; font-size: 14px; }
.day-phu { font-size: 11px; color: var(--chu-mo); text-align: center; }
.so-ban { font-size: 10px; color: #B8AE9F; letter-spacing: .04em; margin-top: 2px; }

@media (min-width: 561px) {
  body { border-left: 1px solid var(--vien); border-right: 1px solid var(--vien); }
}

.khu-hom-nay .tieu-de-cot { padding-top: 4px; margin-bottom: -2px; }
.khu-cu .tieu-de-cot { border-left-width: 6px; border-right: 1px solid transparent; margin-bottom: 2px; }

/* ---- banner cảnh báo dưới thanh tab ---- */
.banner { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; }
.banner-dong { border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.45; border: 1px solid; }
.banner-dong.do   { background: #FDECEA; border-color: #E7A199; color: #7A1F14; font-weight: 600; }
.banner-dong.vang { background: #FFF6DC; border-color: #E8CF8A; color: #6B4E00; }
.banner-dong.xanh { background: #E8F1FB; border-color: #A9C4E8; color: #1B3B66; }

/* ---- hàng của nến chưa đóng (lượt 14:30) ---- */
.hang.chua-chot { border-style: dashed; }
.tag-chua-chot { display: inline-block; margin-top: 3px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: #E8F1FB; color: #1B3B66; border: 1px solid #A9C4E8; }

/* ---- màn khoá phần chưa mở / hết hạn ---- */
.khoa { text-align: center; padding: 34px 22px 28px; background: var(--the); border: 1px solid var(--vien);
  border-radius: 16px; box-shadow: 0 2px 10px rgba(80,60,30,.07); }
.khoa-bieu { font-size: 38px; line-height: 1; }
.khoa h2 { margin: 12px 0 6px; font-size: 19px; color: var(--navy); }
.khoa p { margin: 0 0 6px; font-size: 13.5px; color: var(--chu-mo); line-height: 1.55; }
.khoa .nut-chinh { margin-top: 12px; width: auto; min-width: 220px; }
.khoa-phu { font-size: 12.5px !important; }

/* ---- gia hạn: chọn phần ---- */
.gh-phan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.gh-phan button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px;
  border-radius: 12px; border: 1px solid var(--vien); background: var(--the); cursor: pointer; font: inherit; text-align: left; }
.gh-phan button b { font-size: 14px; color: var(--chu); }
.gh-phan button small { font-size: 11.5px; color: var(--chu-mo); }
.gh-phan button.dang-chon { border-color: transparent; background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.gh-phan button.dang-chon b { color: var(--vang-sang); }
.gh-phan button.dang-chon small { color: #D8DEE8; }
.cong .nut-chinh-phu { margin-top: 8px; background: var(--the) !important; color: var(--navy) !important;
  border: 1px solid var(--navy) !important; box-shadow: none !important; }

/* ================= PHÁI SINH (bê từ bản nội bộ) ================= */
.the-ps { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 0 4px; padding: 14px 16px; border-radius: 16px; color: var(--vang-sang);
  background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: 0 3px 12px rgba(22,36,58,.28); }
.the-ps-trai { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.the-ps-ma { font-size: 11px; font-weight: 700; letter-spacing: .18em; opacity: .85; }
.the-ps-gia { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.the-ps-phu { font-size: 11.5px; opacity: .8; color: #fff; }
.the-ps-phai { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.may-ps { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; }
.may-ps.tim { background: var(--k-tim); } .may-ps.xanh { background: var(--k-xanh); }
.theo-doi { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.10); color: #fff; }
.theo-doi.song { color: #7EE2A8; } .theo-doi.chet { background: var(--mongmanh); } .theo-doi.nghi { opacity: .75; }

/* lưới 6 cột riêng: Giờ | Hệ | ▲▼ | Giá lúc báo | Giá hiện tại | Chênh */
:root { --luoi-ps: 46px minmax(82px, 1.2fr) 40px minmax(70px, 1fr) minmax(70px, 1fr) 62px; }
.hang-ps, .tieu-de-ps { grid-template-columns: var(--luoi-ps); }
.hang-ps { padding-left: 12px; }
.hang-ps .gio { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.hang-ps .he { font-size: 13px; font-weight: 600; color: var(--chu); }
.hang-ps .chieu { justify-self: center; font-size: 13px; font-weight: 900; line-height: 1;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: #fff; background: var(--chac); }
.hang-ps .chieu.ban { background: var(--mongmanh); }
.hang-ps .gia-bao, .hang-ps .gia-ht { text-align: center; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.hang-ps .gia-bao { font-weight: 600; }
.hang-ps .gia-ht { color: var(--chu-mo); }
.hang-ps .thay-doi { justify-self: end; }
.tieu-de-ps .c-gio, .tieu-de-ps .c-he { text-align: left; }
.tieu-de-ps .c-chieu, .tieu-de-ps .c-gia-bao, .tieu-de-ps .c-gia-ht { text-align: center; }
.tieu-de-ps .c-thaydoi { text-align: right; }
@media (max-width: 430px) {
  /* Màn hẹp: ẩn "Giá hiện tại" (đã có trên thẻ VN30F1M), còn 5 cột vừa 375px */
  :root { --luoi-ps: 42px minmax(72px, 1.2fr) 36px minmax(64px, 1fr) 60px; }
  .hang-ps .gia-ht, .tieu-de-ps .c-gia-ht { display: none; }
  .hang-ps .he { font-size: 12px; } .hang-ps .gia-bao { font-size: 13.5px; }
  .hang-ps .chieu { font-size: 12px; width: 26px; height: 26px; }
}

/* ---- cổng đăng nhập ---- */
.cong { position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(242,193,78,.28) 0%, transparent 55%),
    var(--nen); }
.the-cong { width: 100%; max-width: 380px; text-align: center; }
.cong-logo { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px; display: block;
  box-shadow: 0 0 0 3px var(--vang-nhat), 0 6px 22px rgba(183,121,31,.30); }
.the-cong h1 { font-size: 24px; font-weight: 800; margin: 0; color: var(--navy); letter-spacing: -.01em; }
.cong-phu { color: var(--chu-mo); font-size: 13.5px; margin: 6px 0 22px; line-height: 1.5; }
.cong form { display: flex; flex-direction: column; gap: 10px; }
.cong input { padding: 13px 15px; border-radius: 13px; font: inherit; font-size: 16px;
  background: var(--the); border: 1px solid var(--vien); color: var(--chu); width: 100%; }
.cong input.o-phu { background: transparent; border-style: dashed; font-size: 14px; text-transform: uppercase; }
.cong input:focus { outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(224,168,0,.15); }
.cong button[type="submit"], .cong .nut-chinh { width: 100%; padding: 14px; border-radius: 13px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--vang-sang);
  font: inherit; font-size: 15px; font-weight: 800; box-shadow: 0 3px 12px rgba(22,36,58,.25); }
.cong button[type="submit"]:disabled { opacity: .6; cursor: default; }
.doi-che-do { background: none; border: 0; color: var(--vang); cursor: pointer;
  font: inherit; font-size: 13.5px; margin-top: 14px; text-decoration: underline; }
.doi-che-do.mo { display: block; margin: 8px auto 0; color: var(--chu-mo); font-size: 12.5px; }
.cong-bao { min-height: 20px; font-size: 13px; margin-top: 14px; line-height: 1.55; }
.cong-bao.loi { color: var(--mongmanh); }
.cong-bao.cho { color: var(--chu-mo); }
.cong-bao.xong { color: var(--chac); }
.o-mk { position: relative; }
.o-mk input { padding-right: 48px; }
.nut-mat { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: none; border: 0; color: var(--chu-mo);
  display: flex; align-items: center; justify-content: center; }
.nut-mat svg { width: 21px; height: 21px; }
.nut-mat.dang-hien { color: var(--vang); }