/* ============================================================================
   tv-lh-view.css — Bố cục kết quả LUẬN HỢP HAI NGƯỜI (bản thiết kế 08/2026)
   ----------------------------------------------------------------------------
   Ba khối:  #lhv-sum  (Tóm lược 5 phương diện)
             #lhv-cyc  (Đường vận mười năm)
             #lhv-3y   (Ba năm tới — luận sâu & cách hoá giải)

   LUẬT MÀU: mọi màu nền/viền lấy từ biến của site.css (xem WEB-QUY-TAC-MAU.md).
   Chỉ khai báo thêm ở đây các biến "dải màu nền" và "sắc pha" mà site.css chưa có,
   và khai báo trong phạm vi #lhv để không rò ra trang khác.
   ========================================================================== */

#lhv{
  /* Dải màu nền — tối đa 2 dải sẫm trên một trang */
  --band-navy:#0C3764;          /* hero */
  --band-ink:#231C13;           /* thẻ năm */
  --band-olive:#4A4331;         /* lời khuyên chốt · quan hệ đôi bên */
  --band-jade:#2E6B4A;          /* đầu cột NÊN LÀM */
  --band-son:#8E2B20;           /* đầu cột NÊN TRÁNH */
  --on-band:#F4EBD6;
  --on-band-muted:rgba(244,235,214,.64);
  --line-on-band:rgba(211,188,130,.34);
  /* Sắc pha — nền nội dung nhắc lại dải màu mà không gào lên */
  --tint-jade:#E6F0E8; --tint-son:#F6E4DF; --tint-azure:#E4EBF3; --tint-gold:#F5EBCF;
  --lhv-accent:var(--red-600);
  --lhv-quiet:rgba(134,37,27,.08);

  display:flex; flex-direction:column; gap:28px;
  font-family:var(--font-body); color:var(--text-body);
  font-size:var(--text-body-size); line-height:var(--leading-body);
}
#lhv[hidden]{display:none}

/* ---- tiện ích dùng lại ---- */
#lhv .lhv-cap{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase}
#lhv .lhv-mono{font-family:var(--font-mono)}
#lhv .lhv-disp{font-family:var(--font-display)}
#lhv h2,#lhv h3{margin:0;font-family:var(--font-display);font-weight:600;color:var(--text-heading);line-height:var(--leading-heading)}
#lhv p{margin:0}
#lhv button{font-family:var(--font-body)}
#lhv .lhv-pretty{text-wrap:pretty}

/* ===================== THANH CHUYỂN HAI MÀN (Tóm lược / Vận 10 năm) ======= */
/* Bản thiết kế đặt hai phần này ở HAI MÀN, không đổ hết ra một lần.
   Khối "3 năm tới" nằm dưới, chung cho cả hai màn. */
#lhv .lhv-toolbar{position:sticky;top:0;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--paper-100);border:1px solid var(--line-gold);padding:10px 14px}
#lhv .lhv-tbl{display:flex;align-items:baseline;gap:8px;min-width:0}
#lhv .lhv-tbl .brand{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600);white-space:nowrap}
#lhv .lhv-tbl .sep{color:var(--text-faint)}
#lhv .lhv-tbl .who{font-family:var(--font-display);font-size:15px;color:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lhv .lhv-views{flex:none;display:flex;border:1px solid var(--line-gold);background:var(--surface-card)}
#lhv .lhv-views button{appearance:none;border:none;cursor:pointer;background:transparent;color:var(--text-muted);
  padding:9px 22px;font-size:var(--text-small);display:flex;align-items:baseline;gap:8px;white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-mystic)}
#lhv .lhv-views button:hover{background:var(--paper-100)}
#lhv .lhv-views button.on{background:var(--ink-950);color:var(--paper-50)}
#lhv .lhv-views button .yr{font-family:var(--font-mono);font-size:11px;opacity:.7}
@media(max-width:760px){
  #lhv .lhv-toolbar{flex-direction:column;align-items:stretch;gap:10px;padding:10px}
  #lhv .lhv-views{width:100%}
  #lhv .lhv-views button{flex:1;justify-content:center;padding:10px 8px}
  #lhv .lhv-views button .yr{display:none}
}

/* ============================ KHỐI I — TÓM LƯỢC ========================== */

/* --- dải hero, bốn con dấu góc --- */
#lhv .lhv-hero{position:relative;border:1px solid var(--line-on-band);background:var(--band-navy);padding:44px 48px 40px}
#lhv .lhv-hero .seal{position:absolute;width:8px;height:8px;background:var(--lhv-accent)}
#lhv .lhv-hero .seal.tl{top:-4px;left:-4px} #lhv .lhv-hero .seal.tr{top:-4px;right:-4px}
#lhv .lhv-hero .seal.bl{bottom:-4px;left:-4px} #lhv .lhv-hero .seal.br{bottom:-4px;right:-4px}
#lhv .lhv-herogrid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px}
#lhv .lhv-side{display:flex;flex-direction:column;gap:12px}
#lhv .lhv-side.a{align-items:flex-end;text-align:right}
#lhv .lhv-side.b{align-items:flex-start}
#lhv .lhv-role{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300)}
#lhv .lhv-name{font-family:var(--font-display);font-size:var(--text-h1);line-height:1.1;color:var(--on-band)}
#lhv .lhv-pillars{display:flex;gap:6px;flex-wrap:wrap}
#lhv .lhv-pillars span{font-family:var(--font-mono);font-size:12px;color:var(--gold-200);border:1px solid var(--line-on-band);padding:5px 6px;white-space:nowrap}
#lhv .lhv-pillars span.day{border-color:var(--gold-300);box-shadow:inset 0 -2px 0 var(--gold-400)}
#lhv .lhv-dm{font-size:var(--text-small);color:var(--gold-400)}
#lhv .lhv-ringcol{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 4px;max-width:212px}
#lhv .lhv-ring{position:relative;width:186px;height:186px}
#lhv .lhv-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
#lhv .lhv-ringtx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
#lhv .lhv-ringtx b{font-family:var(--font-display);font-weight:600;font-size:62px;line-height:1;color:var(--gold-200)}
#lhv .lhv-ringtx i{font-style:normal;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--gold-400)}
#lhv .lhv-archchip{background:var(--red-600);border:1px solid var(--gold-400);color:var(--text-on-accent);font-family:var(--font-display);font-size:18.5px;letter-spacing:.02em;padding:9px 14px;text-align:center;line-height:1.25}
#lhv .lhv-herofoot{margin-top:32px;padding-top:26px;border-top:1px solid var(--line-on-band);display:flex;align-items:flex-start;justify-content:space-between;gap:48px}
#lhv .lhv-core{max-width:720px;font-family:var(--font-display);font-size:var(--text-h2);line-height:1.42;color:var(--on-band)}
#lhv .lhv-formula{flex:none;text-align:right;display:flex;flex-direction:column;gap:6px}
#lhv .lhv-formula .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
#lhv .lhv-formula .v{font-family:var(--font-mono);font-size:var(--text-small);color:var(--gold-200)}

/* --- thanh chuyển Dễ hiểu / Chuyên môn --- */
#lhv .lhv-modebar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
#lhv .lhv-mode{display:flex;border:1px solid var(--line-gold);background:var(--paper-100)}
#lhv .lhv-mode button{appearance:none;border:none;background:transparent;cursor:pointer;padding:9px 20px;font-size:var(--text-small);color:var(--text-muted)}
#lhv .lhv-mode button.on{background:var(--ink-950);color:var(--paper-50)}

/* --- 5 thẻ phương diện --- */
#lhv .lhv-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:0 2px 12px}
#lhv .lhv-sechead h2{font-size:var(--text-h2);letter-spacing:.02em}
#lhv .lhv-sechead .hint{font-size:var(--text-small);color:var(--text-muted)}
#lhv .lhv-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--border-card)}
/* 09/2026: thẻ phương diện dùng ĐÚNG font của bảng 12 cung lá số (--font-board),
   không dùng Playfair nữa; và bỏ dòng trọng số/mạnh-yếu ở đầu thẻ. */
#lhv .lhv-tabs{--font-board:system-ui,-apple-system,"Segoe UI","Inter","Noto Sans",Roboto,"Helvetica Neue",Arial,sans-serif}
#lhv .lhv-tab{appearance:none;border:none;cursor:pointer;padding:20px 18px 0;display:flex;flex-direction:column;gap:10px;text-align:left;min-height:152px;
  background:var(--paper-100);border-top:3px solid transparent;transition:background var(--duration-fast) var(--ease-mystic)}
#lhv .lhv-tab:hover{background:var(--paper-50)}
#lhv .lhv-tab.on{background:var(--surface-card);border-top-color:var(--lhv-accent)}
#lhv .lhv-tab .nm{font-family:var(--font-board);font-size:16px;font-weight:600;line-height:1.35;letter-spacing:.01em;color:var(--text-heading)}
#lhv .lhv-tab .r3{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto}
#lhv .lhv-tab .sc{font-family:var(--font-board);font-weight:700;font-size:36px;line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
#lhv .lhv-tab .of{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);padding-bottom:4px}
#lhv .lhv-tab .bar{display:block;height:5px;background:var(--paper-300)}
#lhv .lhv-tab .bar i{display:block;height:5px}
#lhv .tone-jade{color:var(--jade-500)} #lhv .tone-gold{color:var(--gold-600)} #lhv .tone-red{color:var(--red-600)}
#lhv .fill-jade{background:var(--jade-500)} #lhv .fill-gold{background:var(--gold-500)} #lhv .fill-red{background:var(--red-500)}

/* --- panel luận giải --- */
#lhv .lhv-panel{background:var(--surface-card);border:1px solid var(--border-card);border-top:3px solid var(--lhv-accent);display:grid;grid-template-columns:1.55fr 1fr}
#lhv .lhv-panel .left{padding:34px 36px;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--line-soft)}
#lhv .lhv-panelbar{display:flex;align-items:center;gap:14px}
#lhv .lhv-panelbar .k{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600)}
#lhv .lhv-panelbar .rule{flex:1;height:1px;background:var(--line-gold)}
#lhv .lhv-panelbar .v{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.14em;color:var(--text-faint)}
#lhv .lhv-panel h3{font-size:var(--text-h1)}
#lhv .lhv-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
#lhv .lhv-points li{display:flex;gap:14px;align-items:flex-start}
#lhv .lhv-points li b{flex:none;width:22px;height:22px;margin-top:2px;display:flex;align-items:center;justify-content:center;background:var(--tint-gold);border:1px solid var(--line-gold);font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--gold-600)}
#lhv .lhv-yiji{display:flex;flex-direction:column}
#lhv .lhv-yiji .box{flex:1;padding:22px 26px;display:flex;flex-direction:column;gap:12px}
#lhv .lhv-yiji .box.yi{background:var(--tint-jade);border-bottom:1px solid var(--line-soft)}
#lhv .lhv-yiji .box.ji{background:var(--tint-son)}
#lhv .lhv-yiji .hd{display:flex;align-items:center;gap:10px}
#lhv .lhv-yiji .hd .glyph{font-family:var(--font-display);font-size:16px}
#lhv .lhv-yiji .hd .lb{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase}
#lhv .lhv-yiji .row{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-small)}
#lhv .lhv-yiji .row em{flex:none;font-style:normal}

/* --- lời khuyên chốt --- */
#lhv .lhv-final{background:var(--band-olive);border:1px solid var(--line-on-band);padding:38px 48px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px}
#lhv .lhv-final .lbl{display:flex;align-items:center;gap:12px}
#lhv .lhv-final .lbl i{width:28px;height:1px;background:var(--line-on-band);display:block}
#lhv .lhv-final .lbl span{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300)}
#lhv .lhv-final .big{max-width:760px;font-family:var(--font-display);font-size:var(--text-h2);line-height:1.45;color:var(--on-band)}
#lhv .lhv-final .sub{max-width:700px;font-size:var(--text-small);color:var(--gold-200)}
#lhv .lhv-final .col{display:flex;flex-direction:column;gap:14px}
#lhv .lhv-yrs{flex:none;display:flex;gap:10px}
#lhv .lhv-yrs .y{border:1px solid var(--gold-400);padding:14px 18px;text-align:center}
#lhv .lhv-yrs .y .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--gold-300)}
#lhv .lhv-yrs .y .v{font-family:var(--font-display);font-size:26px;color:var(--gold-200);margin-top:4px}
#lhv .lhv-yrs .y.best{background:var(--red-600)}
#lhv .lhv-yrs .y.best .k{color:var(--gold-200)} #lhv .lhv-yrs .y.best .v{color:var(--paper-50)}

/* =========================== KHỐI II — MƯỜI NĂM ========================== */

#lhv .lhv-cychead{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding:0 4px 4px}
#lhv .lhv-cychead .l{max-width:660px;display:flex;flex-direction:column;gap:10px}
#lhv .lhv-cychead h2{font-size:var(--text-display-2);line-height:var(--leading-display)}
#lhv .lhv-cychead .lead{color:var(--text-muted)}
#lhv .lhv-legend2{display:flex;flex-direction:column;gap:6px;min-width:250px}
#lhv .lhv-legend2 div{display:flex;align-items:center;gap:10px;background:var(--surface-card);border:1px solid var(--line-soft);padding:9px 12px;font-size:var(--text-small)}
#lhv .lhv-legend2 i{width:22px;height:2px;flex:none;display:block}

#lhv .lhv-chartbox{background:var(--surface-card);border:1px solid var(--border-card);padding:24px 28px 18px}
#lhv .lhv-chartbox svg{width:100%;height:auto;display:block;overflow:visible}
#lhv .lhv-chips{display:grid;grid-template-columns:repeat(10,1fr);margin:10px 0 0}
#lhv .lhv-chip{appearance:none;cursor:pointer;padding:10px 2px;margin:0 3px;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid transparent;background:transparent;color:var(--text-body);transition:background var(--duration-fast) var(--ease-mystic)}
#lhv .lhv-chip:hover{background:var(--paper-100)}
#lhv .lhv-chip.on{background:var(--red-600);border-color:var(--gold-400);color:var(--text-on-accent)}
#lhv .lhv-chip .y{font-family:var(--font-mono);font-size:14px}
#lhv .lhv-chip .c{font-size:12px;opacity:.85}
#lhv .lhv-legend{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;border:1px solid var(--line-gold);background:var(--paper-100);margin-top:22px;padding:14px 18px;font-size:var(--text-small);color:var(--text-muted)}
#lhv .lhv-legend span{display:flex;align-items:center;gap:8px;border:1px solid var(--line-gold);padding:8px 14px}

#lhv .lhv-yearband{background:var(--band-ink);border:1px solid var(--line-on-band);padding:34px 36px;display:flex;flex-direction:column;gap:24px}
#lhv .lhv-yearband .top{display:flex;gap:26px;align-items:flex-start}
#lhv .lhv-ycard{flex:none;width:106px;padding:16px 10px;background:var(--red-600);border:1px solid var(--gold-400);text-align:center;color:var(--text-on-accent)}
#lhv .lhv-ycard .y{font-family:var(--font-display);font-size:23px;letter-spacing:.02em}
#lhv .lhv-ycard .c{font-size:var(--text-caption);color:var(--gold-200);margin-top:2px}
#lhv .lhv-yearband .kicker{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300)}
#lhv .lhv-yearband h2{max-width:660px;font-size:var(--text-h1);color:var(--on-band)}
#lhv .lhv-khi{display:flex;align-items:stretch;border:1px solid var(--line-on-band);max-width:460px}
#lhv .lhv-khi .g{flex:none;display:flex;align-items:center;justify-content:center;width:52px;border-right:1px solid var(--line-on-band);font-family:var(--font-display);font-size:22px;color:var(--gold-300)}
#lhv .lhv-khi .t{padding:14px 16px;font-size:var(--text-small);color:var(--on-band)}

#lhv .lhv-two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft)}
#lhv .lhv-pcard{background:var(--surface-card);padding:30px 32px;display:flex;flex-direction:column;gap:20px;border-top:3px solid var(--azure-500)}
#lhv .lhv-pcard.b{border-top-color:var(--red-500)}
#lhv .lhv-pchead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#lhv .lhv-pchead .who{display:flex;gap:14px;align-items:center}
#lhv .lhv-av{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--azure-500);color:var(--paper-50);font-family:var(--font-display);font-size:16px}
#lhv .lhv-pcard.b .lhv-av{background:var(--red-500)}
#lhv .lhv-pchead .nm{font-family:var(--font-display);font-size:var(--text-h2);color:var(--text-heading);line-height:1.15}
#lhv .lhv-pchead .dm{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-top:3px}
#lhv .lhv-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;padding:3px 8px;white-space:nowrap}
#lhv .lhv-tag.vuong{background:var(--band-jade);color:var(--on-band)}
#lhv .lhv-tag.binhhoa{background:var(--gold-200);color:var(--ink-800)}
#lhv .lhv-tag.suy{background:var(--band-son);color:var(--on-band)}
#lhv .lhv-scorerow{display:flex;flex-direction:column;gap:10px}
#lhv .lhv-scorerow .n{display:flex;align-items:baseline;gap:12px}
#lhv .lhv-scorerow .n b{font-family:var(--font-display);font-weight:600;font-size:46px;line-height:1;color:var(--text-heading)}
#lhv .lhv-scorerow .n span{font-size:var(--text-small);color:var(--text-muted)}
#lhv .lhv-track{position:relative;height:12px;background:var(--paper-300)}
#lhv .lhv-track i{position:absolute;left:0;top:0;bottom:0;display:block}
#lhv .lhv-track u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-800)}
#lhv .lhv-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#lhv .lhv-fact{border:1px solid var(--line-soft);border-left:3px solid var(--gold-400);padding:11px 13px}
#lhv .lhv-fact.dv{border-left-color:var(--azure-500)} #lhv .lhv-fact.nh{border-left-color:var(--red-500)} #lhv .lhv-fact.ts{border-left-color:var(--jade-500)}
#lhv .lhv-fact .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);margin-bottom:5px}
#lhv .lhv-fact .v{font-size:var(--text-small)}
#lhv .lhv-paras{display:flex;flex-direction:column;gap:12px;padding-left:16px;border-left:1px solid var(--line-gold)}

#lhv .lhv-rel{background:var(--band-olive);padding:34px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
#lhv .lhv-rel .lbl{display:flex;align-items:center;gap:14px}
#lhv .lhv-rel .lbl i{width:34px;height:1px;background:var(--line-on-band);display:block}
#lhv .lhv-rel .lbl span{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300)}
#lhv .lhv-relchip{border:1px solid var(--gold-400);background:var(--red-600);color:var(--text-on-accent);font-family:var(--font-display);font-size:19px;padding:8px 22px}
#lhv .lhv-relchip.good{background:var(--band-jade)}
#lhv .lhv-relchip.warn{background:transparent;color:var(--gold-200)}
#lhv .lhv-rel p{max-width:800px;color:var(--on-band)}

#lhv .lhv-acts{background:var(--surface-card);border:1px solid var(--border-card)}
#lhv .lhv-acts .cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft)}
#lhv .lhv-acts .hd{padding:13px 20px;display:flex;align-items:center;gap:12px}
#lhv .lhv-acts .hd.yi{background:var(--band-jade)} #lhv .lhv-acts .hd.ji{background:var(--band-son)}
#lhv .lhv-acts .hd .glyph{font-family:var(--font-display);font-size:16px;color:var(--gold-200)}
#lhv .lhv-acts .hd .lb{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--on-band)}
#lhv .lhv-acts ol{margin:0;padding:20px 22px;list-style:none;display:flex;flex-direction:column;gap:12px;height:calc(100% - 46px);box-sizing:border-box}
#lhv .lhv-acts ol.yi{background:var(--tint-jade)} #lhv .lhv-acts ol.ji{background:var(--tint-son)}
#lhv .lhv-acts li{display:flex;gap:12px;align-items:flex-start}
#lhv .lhv-acts li b{flex:none;font-family:var(--font-mono);font-weight:400;font-size:11px;padding:1px 6px;margin-top:2px}
#lhv .lhv-acts ol.yi li b{color:var(--jade-500);border:1px solid var(--jade-500)}
#lhv .lhv-acts ol.ji li b{color:var(--red-500);border:1px solid var(--red-500)}
#lhv .lhv-months{padding:22px 24px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line-soft)}
#lhv .lhv-months .k{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600)}
#lhv .lhv-months .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#lhv .lhv-months .m{display:flex;gap:14px;align-items:center;background:var(--tint-gold);border:1px solid var(--line-gold);padding:13px 16px}
#lhv .lhv-months .m b{flex:none;font-family:var(--font-mono);font-weight:400;font-size:var(--text-small);color:var(--red-600)}
#lhv .lhv-months .m span{font-size:var(--text-small)}

/* ============================ KHỐI III — 3 NĂM =========================== */

#lhv .lhv-rule{height:14px;background:var(--band-ink);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
#lhv .lhv-3yhead{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;border-bottom:1px solid var(--line-gold);padding:0 4px 22px}
#lhv .lhv-3yhead .l{flex:1 1 auto;min-width:0;max-width:620px;display:flex;flex-direction:column;gap:10px}
#lhv .lhv-3yhead h2{font-size:var(--text-display-2);line-height:var(--leading-display)}
#lhv .lhv-3yhead .lead{color:var(--text-muted)}
#lhv .lhv-plan{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#lhv .lhv-plan .box{display:flex;align-items:center;gap:10px;border:1px solid var(--line-gold);background:var(--paper-100);padding:11px 16px;font-size:var(--text-small)}
#lhv .lhv-plan .dot{width:9px;height:9px;background:var(--red-600);display:block}
#lhv .lhv-plan .cnt{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);white-space:nowrap}
#lhv .lhv-plan .relock{appearance:none;background:transparent;border:none;cursor:pointer;font-size:13.5px;color:var(--red-600);text-decoration:underline;padding:0}

#lhv .lhv-yr{display:flex;flex-direction:column}
#lhv .lhv-yrhead{appearance:none;border:1px solid var(--line-on-band);cursor:pointer;background:var(--band-ink);color:var(--on-band);
  padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;width:100%}
#lhv .lhv-yrhead.open{border-bottom-color:transparent}
#lhv .lhv-yrhead .l{display:flex;flex-direction:column;gap:8px}
#lhv .lhv-yrhead .rel{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300)}
#lhv .lhv-yrhead .yy{display:flex;align-items:baseline;gap:12px}
#lhv .lhv-yrhead .yy b{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1;color:var(--on-band)}
#lhv .lhv-yrhead .yy span{font-family:var(--font-mono);font-size:15px;color:var(--gold-300)}
#lhv .lhv-yrhead .r{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
#lhv .lhv-yrhead .pp{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#lhv .lhv-yrhead .pp .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)}
#lhv .lhv-yrhead .pp .v{display:flex;align-items:baseline;gap:8px}
#lhv .lhv-yrhead .pp .v b{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1;color:var(--on-band)}
#lhv .lhv-yrhead .pp .v i{font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--gold-400)}
#lhv .lhv-yrhead .sign{font-family:var(--font-mono);font-size:22px;color:var(--gold-300);width:20px;text-align:center}

#lhv .lhv-yrbody{background:var(--surface-card);border:1px solid var(--border-card);border-top:none;padding:32px 36px;display:flex;flex-direction:column;gap:24px}
#lhv .lhv-lead{font-size:17px;line-height:1.6}
#lhv .lhv-gap{display:flex;flex-direction:column;gap:10px}
#lhv .lhv-gaptrack{position:relative;height:26px}
#lhv .lhv-gaptrack .base{position:absolute;top:11px;left:0;right:0;height:2px;background:var(--line-gold)}
#lhv .lhv-gaptrack .span{position:absolute;top:10px;height:4px;background:var(--gold-300)}
#lhv .lhv-gaptrack .dot{position:absolute;top:6px;width:12px;height:12px;border-radius:50%;transform:translateX(-6px)}
#lhv .lhv-gaptrack .dot.a{background:var(--azure-500)} #lhv .lhv-gaptrack .dot.b{background:var(--jade-500)}
#lhv .lhv-gaplbl{position:relative;height:18px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
#lhv .lhv-gaplbl span{position:absolute;transform:translateX(-50%);white-space:nowrap}
#lhv .lhv-two2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#lhv .lhv-note{border:1px solid var(--line-soft);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
#lhv .lhv-note.yi{background:var(--tint-jade)} #lhv .lhv-note.ji{background:var(--tint-son)}
#lhv .lhv-note .k{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase}
#lhv .lhv-note.yi .k{color:var(--jade-500)} #lhv .lhv-note.ji .k{color:var(--red-600)}

#lhv .lhv-full{border-top:1px dashed var(--line-gold);padding-top:28px;display:flex;flex-direction:column;gap:22px}
#lhv .lhv-full .k{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--red-600)}
#lhv .lhv-case{border:1px solid var(--border-card);background:var(--paper-100);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
#lhv .lhv-case .nm{font-family:var(--font-display);font-size:20px;color:var(--text-heading)}
#lhv .lhv-case .meta{font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)}
#lhv .lhv-case ul{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px;font-size:var(--text-small)}
#lhv .lhv-case .gg{border-top:1px solid var(--line-gold);padding-top:12px;display:flex;flex-direction:column;gap:8px}
#lhv .lhv-case .gg .lb{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
#lhv .lhv-case .gg .gain .lb{color:var(--jade-500)} #lhv .lhv-case .gg .guard .lb{color:var(--red-600)}
#lhv .lhv-case .gg .tx{font-size:var(--text-small)}

#lhv .lhv-remhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
#lhv .lhv-remhead .n{font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
#lhv .lhv-remtbl{border:1px solid var(--border-card)}
#lhv .lhv-remtbl .th{display:grid;grid-template-columns:1fr 2.4fr;background:var(--paper-100);border-bottom:1px solid var(--line-gold)}
#lhv .lhv-remtbl .th span{padding:12px 18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600)}
#lhv .lhv-remtbl .tr{display:grid;grid-template-columns:1fr 2.4fr;border-bottom:1px solid var(--line-soft)}
#lhv .lhv-remtbl .tr:last-child{border-bottom:none}
#lhv .lhv-remtbl .c1{padding:18px;display:flex;flex-direction:column;gap:3px}
#lhv .lhv-remtbl .c1 b{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--text-heading)}
#lhv .lhv-remtbl .c1 span{font-size:13px;color:var(--text-muted)}
#lhv .lhv-remtbl .c2{padding:18px;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line-soft)}
#lhv .lhv-remtbl .c2 .t{font-size:var(--text-small)}
#lhv .lhv-remtbl .c2 .w{font-size:13px;font-style:italic;color:var(--text-faint)}

#lhv .lhv-mtbl{border:1px solid var(--border-card);background:var(--paper-100);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
#lhv .lhv-mtbl .use{font-size:var(--text-small);color:var(--text-muted)}
#lhv .lhv-mrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#lhv .lhv-mrow .k{min-width:150px;font-size:var(--text-small)}
#lhv .lhv-mrow.good .k{color:var(--jade-500)} #lhv .lhv-mrow.bad .k{color:var(--red-600)}
#lhv .lhv-mrow .chip{border:1px solid var(--line-gold);background:var(--surface-card);padding:8px 14px;font-size:13.5px}
#lhv .lhv-mrow.bad .chip{border-color:var(--red-500);background:var(--tint-son);color:var(--red-600)}

#lhv .lhv-fullacts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#lhv .lhv-fullacts .bx{border:1px solid var(--border-card)}
#lhv .lhv-fullacts .bx .hd{padding:12px 18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-band)}
#lhv .lhv-fullacts .bx .hd.yi{background:var(--band-jade)} #lhv .lhv-fullacts .bx .hd.ji{background:var(--band-son)}
#lhv .lhv-fullacts ul{margin:0;padding:18px 20px 18px 36px;display:flex;flex-direction:column;gap:10px;font-size:var(--text-small)}
#lhv .lhv-fullacts ul.yi{background:var(--tint-jade)} #lhv .lhv-fullacts ul.ji{background:var(--tint-son)}

/* --- khối chào bán --- */
#lhv .lhv-sell{border-top:1px dashed var(--line-gold);padding-top:30px;display:grid;grid-template-columns:1.5fr 1fr;gap:32px}
#lhv .lhv-sell .l{display:flex;flex-direction:column;gap:16px}
#lhv .lhv-sell .k{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--red-600)}
#lhv .lhv-sell h3{font-size:var(--text-h1)}
#lhv .lhv-sell .items{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
#lhv .lhv-sell .items div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--line-gold);padding:12px 0}
#lhv .lhv-sell .items .nm{display:flex;gap:10px;color:var(--text-muted)}
#lhv .lhv-sell .items .nm i{color:var(--gold-500);font-style:normal}
#lhv .lhv-sell .items .n{font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
#lhv .lhv-sample{border:1px solid var(--line-gold);background:var(--paper-100);padding:20px 22px;display:flex;flex-direction:column;gap:12px}
#lhv .lhv-sample .g{display:grid;grid-template-columns:auto 1fr;gap:22px}
#lhv .lhv-sample .g .nm{font-family:var(--font-display);font-size:17px;color:var(--text-heading)}
#lhv .lhv-sample .g .wh{font-size:var(--text-small);color:var(--text-muted)}
#lhv .lhv-buy{background:var(--band-ink);border:1px solid var(--gold-400);padding:26px 28px;display:flex;flex-direction:column;gap:14px;align-self:start}
#lhv .lhv-buy .k{color:var(--gold-300)}
#lhv .lhv-buy .price{display:flex;align-items:baseline;gap:8px}
#lhv .lhv-buy .price b{font-family:var(--font-mono);font-weight:400;font-size:34px;color:var(--on-band)}
#lhv .lhv-buy .price span{font-size:var(--text-small);color:var(--gold-300)}
#lhv .lhv-buy p{font-size:var(--text-small);color:var(--gold-200)}
#lhv .lhv-buy button{appearance:none;background:var(--red-600);border:1px solid var(--gold-400);color:var(--text-on-accent);font-family:var(--font-display);font-size:18px;text-align:center;padding:13px 18px;cursor:pointer}
#lhv .lhv-buy .fine{font-size:12.5px;color:var(--gold-400);text-align:center}

#lhv .lhv-method{padding:20px 4px 0;font-size:13.5px;font-style:italic;color:var(--text-faint);border-top:1px solid var(--line-gold);margin-top:8px}

/* ================================ MOBILE ================================= */
@media(max-width:1000px){
  #lhv .lhv-tabs{grid-template-columns:repeat(2,1fr)}
  #lhv .lhv-tab{min-height:128px}
  #lhv .lhv-panel{grid-template-columns:1fr}
  #lhv .lhv-panel .left{border-right:none;border-bottom:1px solid var(--line-soft)}
  #lhv .lhv-final{grid-template-columns:1fr;gap:24px}
  #lhv .lhv-sell{grid-template-columns:1fr}
}
@media(max-width:760px){
  #lhv{gap:20px}
  #lhv .lhv-hero{padding:28px 18px 24px}
  #lhv .lhv-herogrid{grid-template-columns:1fr;gap:22px;text-align:center}
  #lhv .lhv-side.a,#lhv .lhv-side.b{align-items:center;text-align:center}
  #lhv .lhv-side.a{order:1} #lhv .lhv-ringcol{order:2} #lhv .lhv-side.b{order:3}
  #lhv .lhv-pillars{justify-content:center}
  #lhv .lhv-ring{width:158px;height:158px}
  #lhv .lhv-ringtx b{font-size:46px}
  #lhv .lhv-ringtx i{font-size:9px;letter-spacing:.06em}
  #lhv .lhv-herofoot{flex-direction:column;gap:16px;margin-top:22px;padding-top:18px}
  #lhv .lhv-formula{text-align:left}
  #lhv .lhv-core{font-size:19px}
  #lhv .lhv-tabs{grid-template-columns:1fr}
  #lhv .lhv-tab{min-height:0;padding:14px 14px 0}
  #lhv .lhv-tab .sc{font-size:30px}
  #lhv .lhv-panel .left{padding:22px 18px}
  #lhv .lhv-panel h3{font-size:22px}
  #lhv .lhv-yiji .box{padding:18px}
  #lhv .lhv-final{padding:24px 18px}
  #lhv .lhv-final .big{font-size:19px}
  #lhv .lhv-yrs{flex-wrap:wrap}
  #lhv .lhv-cychead{flex-direction:column;gap:16px}
  #lhv .lhv-cychead h2,#lhv .lhv-3yhead h2{font-size:26px}
  #lhv .lhv-legend2{min-width:0;width:100%}
  /* Bieu do 1120px bop vao 360px thi chu truc con ~4px. Cho cuon ngang. */
  #lhv .lhv-chartbox{padding:14px 12px 12px}
  #lhv .lhv-chartbox .lhv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #lhv .lhv-chartbox svg{min-width:660px}
  /* Dải năm: cuộn ngang thay vì bóp 10 cột trên màn hẹp */
  #lhv .lhv-chips{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px}
  #lhv .lhv-chip{flex:0 0 auto;min-width:82px}
  #lhv .lhv-legend{gap:8px;padding:10px}
  #lhv .lhv-legend span{padding:6px 10px;font-size:12px}
  #lhv .lhv-yearband{padding:20px 18px}
  #lhv .lhv-yearband .top{flex-direction:column;gap:16px}
  #lhv .lhv-yearband h2{font-size:22px}
  #lhv .lhv-two{grid-template-columns:1fr}
  #lhv .lhv-pcard{padding:20px 18px}
  #lhv .lhv-facts{grid-template-columns:1fr}
  #lhv .lhv-rel{padding:24px 18px}
  #lhv .lhv-acts .cols{grid-template-columns:1fr}
  #lhv .lhv-months .grid{grid-template-columns:1fr}
  #lhv .lhv-3yhead{flex-direction:column;gap:16px}
  #lhv .lhv-plan{align-items:flex-start}
  #lhv .lhv-yrhead{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}
  #lhv .lhv-yrhead .r{gap:18px}
  #lhv .lhv-yrbody{padding:20px 18px}
  #lhv .lhv-two2,#lhv .lhv-fullacts,#lhv .lhv-sell .items{grid-template-columns:1fr}
  #lhv .lhv-remtbl .th{display:none}
  #lhv .lhv-remtbl .tr{grid-template-columns:1fr}
  #lhv .lhv-remtbl .c2{border-left:none;border-top:1px solid var(--line-soft);padding-top:0}
  #lhv .lhv-mrow .k{min-width:0;width:100%}
  #lhv .lhv-sample .g{grid-template-columns:1fr;gap:10px}
}