/* fonts: xem css/fonts.css (fontsource gốc, đủ unicode-range) */

/* ============ TOKENS · NEO-BRUTALISM × VIETNAM CONTINGENT LOGO ============ */
:root{
  /* ===== BỘ NHẬN DIỆN MỚI · trích thẳng từ Official Logo.svg ===== */
  --paper:#FBF7FF;        /* trắng ngả tím — nền sáng */
  --ink:#3C0C62;          /* tím than — chữ & viền (13.97:1 trên paper) */
  --cobalt:#174DEB;       /* xanh cobalt điện — màu chủ đạo 60% */
  --gold:#FCDA55;         /* vàng nghệ — 30% */
  --magenta:#FC1CA1;      /* hồng neon — 10%, CHỈ dùng đồ hoạ/viền/chữ lớn */
  --indigo:#1B189B;       /* chàm */
  --plum:#3B0D65;         /* tím đậm */
  --magenta-ink:#D4067F;  /* hồng đậm — dùng khi bề mặt có chữ nhỏ (5.08:1 với trắng) */
  /* ánh xạ sang tên token cũ để toàn bộ component kế thừa */
  --navy:var(--indigo); --purple:#3C0C62; --blue:var(--cobalt);
  --yellow:#FFE88A; --pink:var(--magenta-ink); --red:var(--magenta-ink);
  --coral:var(--magenta-ink); --green:var(--indigo); --cream:#E9EDFF;
  --bw:4px;
  --sh:6px 6px 0 var(--ink); --sh-lg:10px 10px 0 var(--ink);
  --disp:'Space Grotesk','Be Vietnam Pro',sans-serif; --body:'Be Vietnam Pro',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{font-family:var(--body);font-weight:500;color:var(--ink);background:var(--paper);
  background-image:radial-gradient(rgba(60,12,98,.11) 1.3px,transparent 1.4px);background-size:22px 22px;
  overflow-x:clip;line-height:1.55;}
img{max-width:100%;}
::selection{background:var(--yellow);color:var(--ink);}
h1,h2,h3,h4,h5,.disp{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.24;}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px;}

/* ============ DOT NAV ============ */
#dotnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:16px;}
#dotnav a{position:relative;display:flex;align-items:center;justify-content:center;width:20px;height:20px;}
#dotnav a i{width:14px;height:14px;background:#fff;border:3px solid var(--ink);display:block;}
#dotnav a::after{content:attr(data-label);position:absolute;right:26px;white-space:nowrap;font-size:11px;font-weight:700;
  background:var(--ink);color:#fff;padding:5px 10px;border:2px solid var(--ink);opacity:0;pointer-events:none;text-transform:uppercase;letter-spacing:.06em;}
#dotnav a:hover::after{opacity:1;}
#dotnav a.on i{background:var(--yellow);box-shadow:3px 3px 0 var(--ink);}
@media (max-width:820px){#dotnav{display:none;}}

/* ============ TOPBAR ============ */
#topbar{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;pointer-events:none;}
#topbar>*{pointer-events:auto;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;}
.brand img{width:48px;}
.brand b{color:var(--magenta);}

/* ============ UI PIECES ============ */
.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;
  background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:0;padding:10px 18px;line-height:1.35;
  box-shadow:5px 5px 0 var(--ink);cursor:pointer;text-decoration:none;transition:transform .1s linear,box-shadow .1s linear;}
.btn:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--ink);}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);}
.btn.yl{background:var(--yellow);} .btn.pk{background:var(--pink);color:#fff;}
.tag{display:inline-block;font-family:var(--disp);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  padding:7px 15px;line-height:1.4;background:var(--yellow);color:var(--ink);
  border:3px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink);}
.tag.sm{font-size:10px;padding:5px 11px;border-width:2.5px;box-shadow:3px 3px 0 var(--ink);}
.tag.pk{background:var(--pink);color:#fff;} .tag.bl{background:var(--blue);color:#fff;}
.tag.rd{background:var(--red);color:#fff;} .tag.yl{background:var(--yellow);color:var(--ink);}
.tag.gr{background:var(--navy);color:#fff;} .tag.pu{background:var(--purple);color:#fff;}
.chip{display:inline-block;font-family:var(--disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;
  padding:8px 15px;line-height:1.35;background:#fff;color:var(--ink);
  border:3px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink);white-space:nowrap;}
.chip.sm{font-size:11px;padding:4px 10px;border-width:2.5px;box-shadow:3px 3px 0 var(--ink);}
.chip.yl{background:var(--yellow);} .chip.pk{background:var(--pink);color:#fff;}
.chip.pu{background:var(--purple);color:#fff;} .chip.rd{background:var(--red);color:#fff;}
.chip.bl{background:var(--blue);color:#fff;} .chip.gr{background:var(--navy);color:#fff;}
.lbl{display:block;font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(60,12,98,.6);}
.chipline{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.chipline.center{justify-content:center;}

/* ============ SECTIONS COMMON ============ */
section{position:relative;padding:104px 6vw;}
.sec-head{max-width:1200px;margin:0 auto 44px;}
.sec-head.mt{margin-top:104px;}
.sec-title{font-size:clamp(38px,6.4vw,86px);text-transform:uppercase;line-height:1.1;margin-top:20px;letter-spacing:-.04em;}
.sec-title em{font-style:normal;color:var(--purple);}
.sec-title em.coral{color:var(--red);} .sec-title em.blue-t{color:var(--blue);}
.sec-title em.red-t{color:var(--red);} .sec-title em.yl-t{color:var(--gold);}
.sec-sub{margin-top:14px;font-size:15px;color:rgba(60,12,98,.72);max-width:70ch;}
.sec-head.light,.sec-head.light .sec-sub{color:#fff;}
.sec-head.light .sec-sub{color:rgba(255,255,255,.82);}

/* ============ HERO ============ */
#hero{min-height:100svh;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 6vw;}
.hero-inner{position:relative;z-index:3;text-align:center;}
#heroLogo{width:clamp(112px,13vw,176px);display:block;margin:0 auto 22px;}
.eyebrow{font-family:var(--disp);font-weight:700;font-size:clamp(10px,1.3vw,13px);letter-spacing:.18em;
  background:#fff;border:3px solid var(--ink);display:inline-block;padding:9px 20px;box-shadow:5px 5px 0 var(--ink);
  text-transform:uppercase;}
.giant{font-size:clamp(40px,11vw,156px);text-transform:uppercase;line-height:1.06;margin-top:28px;letter-spacing:-.05em;}
.giant .line{display:block;padding:.06em .02em .03em;}
.giant .line>span{display:inline-block;}
.giant .stroke{color:transparent;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;}
.hero-chips{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
#dragon{position:absolute;z-index:2;width:min(46vw,660px);height:auto;right:-2vw;bottom:6vh;}
.par{position:absolute;pointer-events:none;}
.cloud.c1{width:min(30vw,330px);top:7%;left:-3vw;} .cloud.c2{width:min(22vw,250px);top:56%;left:4%;} .cloud.c3{width:min(24vw,270px);top:11%;right:24%;}
.spark.s1{width:120px;top:24%;left:17%;} .spark.s2{width:46px;top:17%;right:11%;} .spark.s3{width:34px;bottom:23%;left:9%;}
.waves{width:260px;bottom:-60px;left:34%;opacity:.22;}
#stamp{position:absolute;z-index:4;bottom:38px;left:46px;width:112px;height:112px;display:block;
  background:var(--yellow);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);}
#stamp svg{width:100%;height:100%;}
#stamp text{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.15em;fill:var(--ink);text-transform:uppercase;}
.stamp-arrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:30px;}

/* ============ TICKER (static band) ============ */
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);}
.ticker-track{display:flex;white-space:nowrap;width:max-content;}
.ticker-track span{font-family:var(--disp);font-weight:700;font-size:19px;padding:13px 0;letter-spacing:.05em;text-transform:uppercase;}

/* ============ BENTO ============ */
.bento{max-width:1200px;margin:0 auto;display:grid;gap:20px;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);}
.bcard{background:#fff;border:var(--bw) solid var(--ink);border-radius:0;box-shadow:var(--sh-lg);padding:26px;position:relative;
  transition:transform .15s ease-out,box-shadow .15s ease-out;}
.bcard:hover{transform:translate(-2px,-2px);box-shadow:13px 13px 0 var(--ink);}
.bcard h3{font-size:25px;margin-top:14px;line-height:1.16;text-transform:uppercase;}
.bcard h4{font-size:20px;margin-top:10px;line-height:1.2;text-transform:uppercase;}
.bcard p{margin-top:12px;font-size:14px;}
.bcard .sm{font-size:12.5px;}
.bcard.purple{background:var(--purple);color:#fff;}
.bcard.purple .lbl{color:rgba(255,255,255,.75);}
.bcard.yellow{background:var(--yellow);}
.bcard.blue{background:var(--blue);color:#fff;} .bcard.blue .lbl{color:rgba(255,255,255,.78);}
.bcard.pink{background:var(--pink);color:#fff;} .bcard.pink .lbl{color:rgba(255,255,255,.78);}
.bcard.navy{background:var(--navy);color:#fff;} .bcard.navy .lbl{color:rgba(255,255,255,.75);}
.bcard.span2{grid-column:span 2;}
.bcard.tall{grid-row:span 2;grid-column:span 1;}
.bcard.photo{padding:0;overflow:hidden;}
.bcard.photo img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}
.bcard.photo figcaption{position:absolute;left:14px;bottom:14px;}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.bento{grid-template-columns:1fr;}.bcard.span2{grid-column:span 1;}}

/* ============ PRINCIPLE CARDS (static) ============ */
.badges{max-width:1200px;margin:0 auto;display:grid;gap:20px;grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.badges{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.badges{grid-template-columns:1fr;}}
.pcard-badge{background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--sh-lg);padding:22px;
  display:flex;flex-direction:column;gap:14px;transition:transform .15s ease-out,box-shadow .15s ease-out;}
.pcard-badge:hover{transform:translate(-2px,-2px);box-shadow:13px 13px 0 var(--ink);}
.pb-top{display:flex;align-items:center;gap:14px;border-bottom:3px solid var(--ink);padding-bottom:14px;}
.pcard-badge .em{font-size:44px;line-height:1;}
.pcard-badge h4{font-size:21px;margin-top:8px;text-transform:uppercase;}
.pcard-badge p{font-size:13.5px;line-height:1.6;}
.pcard-badge.blue{background:var(--blue);color:#fff;} .pcard-badge.pink{background:var(--pink);color:#fff;}
.pcard-badge.blue .pb-top,.pcard-badge.pink .pb-top{border-bottom-color:rgba(255,255,255,.4);}
.pcard-badge.purple{background:var(--purple);color:#fff;} .pcard-badge.purple .chip{color:var(--ink);}
.pcard-badge.green{background:var(--navy);color:#fff;} .pcard-badge.green .chip{color:var(--ink);}
.pcard-badge.purple .pb-top,.pcard-badge.green .pb-top{border-bottom-color:rgba(255,255,255,.4);}

/* ============ PASSES ============ */
#flight{overflow:hidden;}
.passes{max-width:1150px;margin:0 auto;display:flex;flex-direction:column;gap:28px;}
.pass{display:flex;background:#fff;border:var(--bw) solid var(--ink);border-radius:0;box-shadow:var(--sh-lg);overflow:hidden;}
.pass-main{flex:1;padding:24px 28px;}
.pass-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.route{display:flex;align-items:center;gap:16px;margin:20px 0;}
.route .tr{text-align:right;}
.air{font-family:var(--disp);font-weight:700;font-size:50px;line-height:1.06;display:block;letter-spacing:-.05em;}
.dashline{flex:1;border-bottom:4px dashed var(--ink);position:relative;height:4px;}
.dashline span{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-size:20px;}
.pass-stub{width:200px;border-left:4px dashed var(--ink);background:var(--yellow);padding:22px;display:flex;flex-direction:column;gap:6px;position:relative;}
.pass-stub b{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.03em;}
.pass-stub .sm{font-size:12px;}
.pass-stub::before,.pass-stub::after{content:'';position:absolute;left:-12px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);}
.pass-stub::before{top:-12px;} .pass-stub::after{bottom:-12px;}
@media (max-width:640px){.pass{flex-direction:column;}.pass-stub{width:100%;border-left:none;border-top:4px dashed var(--ink);}}

/* ============ TIMELINE ============ */
.timeline{max-width:860px;margin:0 auto;position:relative;padding-left:48px;}
.tl-rail{position:absolute;left:14px;top:8px;bottom:8px;width:8px;background:var(--ink);border:3px solid var(--ink);}
.tl-rail i{display:none;}
.tl-item{position:relative;margin-bottom:24px;}
.tl-dot{position:absolute;left:-44px;top:18px;width:22px;height:22px;background:var(--yellow);border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);}
.tl-card{background:#fff;border:var(--bw) solid var(--ink);border-radius:0;box-shadow:var(--sh);padding:18px 22px;
  transition:transform .15s ease-out,box-shadow .15s ease-out;}
.tl-card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg);}
.tl-card.hl{background:var(--purple);color:#fff;}
.tl-card h5{font-size:19px;margin-top:10px;line-height:1.2;text-transform:uppercase;}
.tl-card p{font-size:13.5px;margin-top:8px;}

.photo-strip{max-width:1150px;margin:70px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:760px){.photo-strip{grid-template-columns:1fr;}}
.pcard{position:relative;border:var(--bw) solid var(--ink);border-radius:0;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3;}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pcard figcaption{position:absolute;left:12px;bottom:12px;}

/* ============ PACKING ============ */
#packing{background:var(--cream);}
.pack-wrap{max-width:920px;margin:0 auto;}
.pack-progress{display:flex;align-items:center;gap:16px;margin-bottom:28px;}
.pp-bar{flex:1;height:20px;border:3px solid var(--ink);border-radius:0;background:#fff;overflow:hidden;box-shadow:4px 4px 0 var(--ink);}
.pp-bar i{display:block;height:100%;width:0%;background:repeating-linear-gradient(45deg,var(--yellow) 0 10px,var(--gold) 10px 20px);transition:width .2s linear;}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (max-width:680px){.checklist{grid-template-columns:1fr;}}
.chk{display:flex;align-items:center;gap:14px;background:#fff;border:3px solid var(--ink);border-radius:0;
  box-shadow:4px 4px 0 var(--ink);padding:14px 18px;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);
  text-align:left;cursor:pointer;transition:transform .1s linear,box-shadow .1s linear;}
.chk:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink);}
.chk:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.chk i{width:26px;height:26px;min-width:26px;border:3px solid var(--ink);border-radius:0;background:#fff;position:relative;}
.chk i::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;color:var(--ink);opacity:0;}
.chk span{position:relative;}
.chk em{font-style:normal;color:rgba(60,12,98,.6);font-size:12px;display:block;line-height:1.4;}
.chk.done{background:var(--yellow);}
.chk.done i{background:var(--cobalt);}
.chk.done i::after{opacity:1;color:#fff;}
.chk.done span{text-decoration:line-through;text-decoration-color:var(--magenta);text-decoration-thickness:3px;}
.pack-note{margin-top:36px;display:flex;gap:12px;align-items:center;justify-content:center;
  background:var(--yellow);border:var(--bw) solid var(--ink);border-radius:0;box-shadow:var(--sh);
  padding:14px 24px;font-size:13.5px;}
.pack-note span{font-size:20px;}
.pack-note p{margin:0;}

/* ============ WARNING TERMINAL ============ */
.warn-zone{max-width:920px;margin:90px auto 0;}
.terminal{background:#1A0733;border:var(--bw) solid var(--ink);border-radius:0;box-shadow:10px 10px 0 var(--ink);overflow:hidden;position:relative;}
.terminal::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);}
.term-bar{display:flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:11px 16px;
  font-family:var(--disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;border-bottom:4px solid var(--ink);}
.term-bar .dot{width:12px;height:12px;border:2px solid var(--ink);}
.dot.r{background:var(--magenta);} .dot.y{background:var(--gold);} .dot.g{background:#3BE38A;}
.term-x{margin-left:auto;}
.term-body{padding:22px;font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:.04em;line-height:1.95;color:#7DE8FF;}
.term-line{opacity:1;}
.term-line.warn-red{color:#FF7FC8;} .term-line.warn-yl{color:var(--yellow);} .term-line.ok{color:#5BE39B;}
.ban-chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px;}
.ban{font-family:var(--disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  background:#fff;border:3px solid var(--ink);border-radius:0;padding:9px 16px;box-shadow:4px 4px 0 var(--ink);}

/* ============ FLIPBOOK FINALE ============ */
#bulletin{background:var(--navy);overflow:hidden;}
.noise{position:absolute;inset:0;opacity:.35;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");}
.spotlight{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1.4px,transparent 1.5px);background-size:24px 24px;}
#bulletin .sec-head{text-align:center;position:relative;z-index:2;}
#fbStage{position:relative;z-index:2;display:flex;justify-content:center;margin:30px auto 0;}
.fb-page{background:#fff;overflow:hidden;position:relative;}
.fb-page img{position:absolute;inset:0;width:100%;height:100%;display:block;}
.fb-controls{position:relative;z-index:2;display:flex;gap:12px;justify-content:center;align-items:center;margin-top:32px;flex-wrap:wrap;}

/* ============ FOOTER ============ */
footer{position:relative;background:var(--paper);padding:104px 6vw 60px;overflow:hidden;text-align:center;
  border-top:4px solid var(--ink);}
.f-dragon{position:absolute;width:min(42vw,560px);height:auto;right:-40px;bottom:-20px;opacity:.16;pointer-events:none;}
.f-inner{position:relative;z-index:1;}
.f-logos{display:flex;gap:22px;justify-content:center;align-items:center;margin-bottom:30px;}
.f-logos img{height:128px;width:auto;}
.f-logos img.big{height:131px;width:auto;}
.f-title{font-size:clamp(30px,4.8vw,58px);text-transform:uppercase;color:var(--purple);line-height:1.06;letter-spacing:-.04em;}
.f-title em{font-style:normal;color:var(--magenta);}
footer p{margin-top:18px;font-size:14px;}
.f-credit{margin-top:34px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(60,12,98,.55);}

/* ============ FULL PACKING + ORG + ACTS ============ */
.checklist-full{display:flex;flex-direction:column;gap:38px;}
.pack-group .pg-head{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.pg-count.full{background:var(--navy);color:#fff;}
.pg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (max-width:680px){.pg-grid{grid-template-columns:1fr;}}
.chk .qty{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:12px;color:var(--purple);white-space:nowrap;padding-left:8px;}
.acts{max-width:1150px;margin:0 auto;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.chip.act{font-size:14px;padding:11px 20px;}

.org{max-width:920px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:0;}
.org-row{display:flex;gap:16px;justify-content:center;align-items:stretch;position:relative;width:100%;}
.org-row + .org-row{margin-top:28px;}
.org-row + .org-row::before{content:'';position:absolute;top:-28px;left:50%;width:4px;height:28px;background:var(--ink);}
.org-node{background:#fff;border:var(--bw) solid var(--ink);border-radius:0;box-shadow:var(--sh);padding:13px 22px;
  font-family:var(--disp);font-weight:700;font-size:16px;text-align:center;text-transform:uppercase;letter-spacing:-.02em;}
.org-node span{display:block;font-family:var(--disp);font-weight:700;font-size:9px;letter-spacing:.14em;color:rgba(60,12,98,.6);margin-bottom:3px;}
.org-node.root{background:var(--navy);color:#fff;}
.org-node.root span{color:rgba(255,255,255,.75);}
.org-node.hoc{background:var(--purple);color:#fff;} .org-node.hoc span{color:rgba(255,255,255,.75);}
.org-node.dep{background:var(--pink);color:#fff;} .org-node.dep span{color:rgba(255,255,255,.78);}
.org-node.side{background:var(--cream);}
.org-row.three{display:grid;grid-template-columns:repeat(3,1fr);}
.org-row.three .org-node,.org-row.three .bcard{font-size:14px;}
.bcard.team{padding:18px;text-align:center;}
.bcard.team b{font-family:var(--disp);font-size:19px;display:block;text-transform:uppercase;}
.bcard.team i{margin:10px 0;display:inline-block;font-style:normal;}
.bcard.team .chip{color:var(--ink);}
.bcard.team.t1{background:var(--gold);}
.bcard.team.t2{background:var(--pink);color:#fff;} .bcard.team.t3{background:var(--blue);color:#fff;}
.org-row.teams{margin-top:16px;}
.org-row.teams::before{display:none;}
.org-row.hocrow{position:relative;}
.org-row.hocrow .sidewrap{position:absolute;left:0;right:50%;top:50%;transform:translateY(-50%);display:flex;align-items:center;z-index:0;}
.org-row.hocrow .sidewrap .org-node.side{white-space:nowrap;}
.org-row.hocrow .sidewrap{overflow:hidden;}
.org-row.hocrow .sidewrap .dashline{flex:1;border-top:4px dashed var(--ink);border-bottom:none;height:0;margin-right:0;min-width:24px;}
.org-row.hocrow .org-node.hoc{position:relative;z-index:1;}
.orgstats{width:100%;max-width:780px;}
.ost-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.ost-avg{font-family:var(--disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;}
.ost-body{display:flex;gap:24px;margin-top:16px;align-items:flex-end;flex-wrap:wrap;}
.ost-bars{flex:1.3;min-width:230px;display:flex;gap:8px;align-items:flex-end;height:92px;}
.ost-bar{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;}
.ost-bar b{font-family:var(--disp);font-size:12px;line-height:1;}
.ost-bar i{display:block;width:100%;border:3px solid var(--ink);border-radius:0;}
.ost-bar s{text-decoration:none;font-family:var(--disp);font-size:10px;font-weight:700;color:rgba(60,12,98,.6);line-height:1;}
.ost-right{flex:1;min-width:210px;}
.ost-gender{display:flex;height:34px;border:3px solid var(--ink);border-radius:0;overflow:hidden;box-shadow:4px 4px 0 var(--ink);}
.ost-gender div{display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:11px;
  color:var(--ink);letter-spacing:.08em;}
.ost-gender .m{background:var(--blue);} .ost-gender .f{background:var(--pink);}
.ost-gender div{color:#fff;}
.ost-right .sm{margin-top:10px;font-size:13px;}
@media (max-width:760px){.org-row.three{grid-template-columns:1fr;}.org-row{flex-direction:column;align-items:center;}
.org-row.hocrow .sidewrap{position:static;transform:none;order:2;}
.org-row.hocrow .sidewrap .org-node.side{white-space:normal;}
.org-row.hocrow .sidewrap .dashline{display:none;}}

/* ============ MENU MỤC LỤC ============ */
#menu{position:fixed;inset:0;z-index:200;background:var(--paper);display:none;overflow:hidden;}
#menu.open{display:block;}
.menu-decor{position:absolute;height:min(84svh,760px);width:auto;right:-4vw;bottom:0;opacity:.9;pointer-events:none;}
.menu-cloud{position:absolute;width:220px;top:-50px;left:-60px;pointer-events:none;}
.menu-inner{position:relative;z-index:2;max-width:840px;margin:0 auto;padding:26px 5vw 40px;height:100%;display:flex;flex-direction:column;}
.menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:12px;}
.menu-brand{display:flex;align-items:center;gap:12px;}
.menu-brand img{width:56px;display:block;}
.menu-list{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding-right:8px;}
.m-item{display:flex;align-items:baseline;gap:18px;text-decoration:none;color:var(--ink);background:var(--paper);
  padding:14px 10px;border-bottom:3px solid var(--ink);transition:background .1s linear,padding .1s linear;}
.m-item i{font-style:normal;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--magenta);min-width:36px;}
.m-item b{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3vw,30px);line-height:1.2;letter-spacing:-.03em;text-transform:uppercase;}
.m-item span{margin-left:auto;font-size:11px;font-weight:600;color:rgba(60,12,98,.55);text-align:right;}
.m-item:hover{background:var(--yellow);padding-left:16px;}
.m-item.dl:hover{background:var(--pink);color:#fff;}
@media (max-width:640px){.m-item span{display:none;}.m-item b{font-size:20px;}
  .menu-decor{height:46svh;right:-34vw;bottom:-4vh;opacity:.22;}
  .menu-cloud{width:150px;opacity:.5;}}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  #dragon{width:min(58vw,560px);right:-3vw;bottom:4vh;}
  .air{font-size:42px;}
}
@media (max-width:760px){
  section{padding:76px 5vw;}
  #topbar{padding:10px 12px;}
  #topbar .btn{font-size:11px;padding:8px 12px;}
  .brand span{display:none;}
  .brand img{width:44px;}
  #dragon{width:86vw;right:-14vw;bottom:2vh;}
  .hero-inner{padding-top:8vh;}
  .eyebrow{font-size:9px;padding:7px 13px;letter-spacing:.12em;}
  .hero-chips{gap:8px;}
  .hero-chips .chip{font-size:11px;padding:6px 11px;}
  #stamp{width:84px;height:84px;left:auto;right:16px;bottom:16px;}
  .cloud.c2{display:none;}
  .ticker-track span{font-size:15px;padding:10px 0;}
  .sec-head.mt{margin-top:70px;}
  .bcard{padding:20px;}
  .bcard.tall{grid-row:span 1;min-height:220px;}
  .route{gap:10px;}
  .air{font-size:32px;}
  .pass-main{padding:18px;}
  .pass-stub b{font-size:24px;}
  .timeline{padding-left:38px;}
  .tl-dot{left:-35px;}
  .photo-strip{margin-top:44px;}
  .term-body{font-size:11.5px;padding:16px 14px;line-height:1.85;}
  .term-bar{font-size:11px;padding:9px 12px;}
  .ban{font-size:11px;padding:7px 12px;}
  #fbStage{margin-top:16px;}
  .fb-controls .btn{padding:8px 12px;font-size:11.5px;}
  .f-dragon{width:78vw;right:-24px;}
  .f-logos img{height:70px;}
  .bcard:hover,.tl-card:hover,.pcard-badge:hover{transform:none;}
}
@media (max-width:480px){
  .giant{font-size:clamp(34px,12.5vw,60px);}
  .chipline .chip{font-size:10px;}
  .pass-top{flex-direction:column;align-items:flex-start;}
  .chk{padding:12px 14px;font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* ============================================================================
   MOTION LAYER · WebGL canvas · preloader · cursor · split type · lightbox
   ==========================================================================*/
main,footer,#topbar,#dotnav,#menu{position:relative;z-index:2;}
#packing{background:var(--cream);}

/* ---- preloader ---- */
#loader{position:fixed;inset:0;z-index:1000;background:var(--paper);display:flex;align-items:center;justify-content:center;}
.loader-inner{text-align:center;width:min(420px,82vw);}
.loader-logo{width:120px;margin:0 auto 18px;display:block;}
.loader-count{font-family:var(--disp);font-weight:700;font-size:54px;line-height:1;margin-bottom:14px;letter-spacing:-.04em;}
.loader-count em{font-style:normal;font-size:24px;vertical-align:super;color:var(--magenta);}
.loader-bar{height:16px;border:3px solid var(--ink);background:#fff;overflow:hidden;box-shadow:4px 4px 0 var(--ink);}
.loader-bar i{display:block;height:100%;width:0%;background:repeating-linear-gradient(45deg,var(--gold) 0 10px,var(--magenta) 10px 20px);}
.loader-tag{margin-top:16px;font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.16em;}

/* ---- custom cursor ---- */
#cursor{position:fixed;z-index:999;top:0;left:0;width:16px;height:16px;opacity:0;
  background:var(--yellow);border:2.5px solid var(--ink);pointer-events:none;
  display:flex;align-items:center;justify-content:center;transition:width .2s,height .2s,background .2s;}
#cursor.alive{opacity:1;}
#cursor.big{width:auto;height:36px;padding:0 14px;box-shadow:4px 4px 0 var(--ink);background:var(--magenta);color:#fff;}
#cursorTxt{font-family:var(--disp);font-weight:700;font-size:12px;white-space:nowrap;display:none;text-transform:uppercase;letter-spacing:.05em;}
#cursor.big #cursorTxt{display:block;}
@media (hover:none),(pointer:coarse){#cursor{display:none!important;}}

/* ---- kinetic typography ---- */
.wd{display:inline-block;white-space:nowrap;}
.ch{display:inline-block;overflow:hidden;vertical-align:top;perspective:600px;
  padding:.26em .06em .22em;margin:-.26em -.06em -.22em;}
.ch > i{display:inline-block;font-style:inherit;will-change:transform;}


/* ---- timeline lit state ---- */
.tl-rail{overflow:hidden;background:#fff;}
.tl-rail i{display:block;width:100%;height:0%;background:var(--ink);}
.tl-item .tl-dot{transition:transform .3s ease-out,background .3s;}
.tl-item.lit .tl-dot{background:var(--magenta);transform:scale(1.25);}
.tl-item.lit .tl-card{box-shadow:var(--sh-lg);}

/* ---- warning flash ---- */
.terminal.sirens{animation:siren .34s steps(2) 6;}
@keyframes siren{50%{box-shadow:10px 10px 0 var(--ink),0 0 0 5px var(--red);}}
.blink{animation:blinkc 1s steps(2) infinite;}
@keyframes blinkc{50%{opacity:.15;}}

/* ---- FLIP lightbox ---- */
#lightbox{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  background:rgba(60,12,98,.92);cursor:zoom-out;}
#lightbox.open{display:flex;}
#lightbox img{max-width:88vw;max-height:82dvh;border:4px solid var(--ink);box-shadow:14px 14px 0 var(--ink);
  background:#fff;object-fit:contain;}
.lb-hint{position:absolute;bottom:26px;font-family:var(--disp);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);}

/* ---- tránh nháy trước khi intro chạy ---- */
body:not(.ready) #dotnav,body:not(.ready) #stamp{opacity:0;}
.pcard,.bcard.photo{cursor:zoom-in;}

@media (prefers-reduced-motion:reduce){
  #ink,#cursor{display:none!important;}
  body.no-motion .ch > i{transform:none!important;}
}

#bulletin{background:var(--cobalt);}


/* ---- máy bay bay ngang section chuyến bay ---- */
#flight{overflow:hidden;}
#planeEmoji{position:absolute;z-index:6;font-size:clamp(34px,4.6vw,62px);line-height:1;
  pointer-events:none;filter:drop-shadow(4px 6px 0 rgba(60,12,98,.18));will-change:transform,left,top;}

/* ---- vé: hiệu năng khi trượt vào từ mép ---- */
.pass{will-change:transform;}
.pass-stub{will-change:transform;}
.ost-bar i{will-change:transform;}

/* ---- cuộn siêu mượt: tránh repaint thừa ---- */



/* ============================================================================
   LAYOUT GUARD · VIEWPORT · FLUID  — [FIXED] chống tràn & co giãn mọi thiết bị
   ==========================================================================*/
/* [FIXED] min-width:0 cho mọi flex/grid item — mặc định min-width:auto làm
   chữ/ảnh dài đẩy vỡ khung cha, đây là nguyên nhân overflow phổ biến nhất   */
.bento > *,.badges > *,.passes > *,.pg-grid > *,.checklist > *,
.org-row > *,.photo-strip > *,.acts > *,.row > *,.col > *{min-width:0;}
.pass,.pass-main,.pass-top,.bcard,.tl-card,.org-node,.m-item{min-width:0;}
.pass-main,.bcard p,.tl-card p,.m-item b,.sec-sub{overflow-wrap:anywhere;}
.chip,.tag,.btn{max-width:100%;}

/* [FIXED] spacing dạng fluid bằng clamp -> bớt media query, mượt mọi viền màn */
section{padding:clamp(64px,8vw,110px) clamp(18px,6vw,88px);}
.sec-head{margin-bottom:clamp(28px,4vw,46px);}
.sec-head.mt{margin-top:clamp(58px,8vw,110px);}
.bento,.badges{gap:clamp(12px,1.6vw,20px);}
footer{padding:clamp(64px,8vw,110px) clamp(18px,6vw,88px) 56px;}

/* [FIXED] ultra-wide: khoá bề rộng nội dung, không để chữ chạy dài vô tận */
@media (min-width:1900px){
  .bento,.badges,.passes,.photo-strip,.acts,.org,.sec-head{max-width:1320px;margin-inline:auto;}
  .timeline{max-width:940px;}
}

/* [FIXED] mobile ngang (landscape thấp): hero không ép cao quá màn */
@media (orientation:landscape) and (max-height:520px){
  #hero{min-height:auto;padding-top:88px;padding-bottom:56px;}
  #dragon{width:64vw;}
  #stamp{display:none;}
}

/* [FIXED] chỉ bật hover-effect trên thiết bị thật sự có chuột */
@media (hover:none){
  .bcard:hover,.tl-card:hover,.pcard-badge:hover,.btn:hover{transform:none;box-shadow:var(--sh-lg);}
}

/* lớp floating: chỉ những phần tử thực sự chuyển động mới được promote */
#dragon,.cloud,.spark,.waves,#heroLogo,.f-dragon,#planeEmoji,.stamp-arrow{will-change:transform;}


/* ============================================================================
   ẢNH · TIÊU ĐIỂM CROP — [FIXED] object-fit:cover mặc định cắt giữa nên trên
   khung dọc/ngang hẹp hay mất mặt người. Đặt object-position theo chủ thể.
   ==========================================================================*/
img[src$="hi_camp.jpg"]{object-position:58% 24%;}   /* Trưởng kéo xe — mặt ở 1/4 trên */
img[src$="hi_hike2.jpg"]{object-position:50% 30%;}  /* 2 đoàn sinh vác balo */
img[src$="hi_wing2.jpg"]{object-position:50% 42%;}  /* quầy check-in nhìn từ trên */
img[src$="hi_pen1.jpg"]{object-position:50% 44%;}   /* ảnh đoàn — hàng mặt ở giữa */

/* khung ảnh trên mobile: bớt dẹt để chủ thể không bị xén hai đầu */
@media (max-width:760px){
  .pcard{aspect-ratio:5/4;}
  .bcard.photo.tall{min-height:300px;}
}
@media (max-width:480px){
  .pcard{aspect-ratio:1/1;}
}

/* ============================================================================
   BỘ NHẬN DIỆN MỚI · LỚP ĐỒ HOẠ "CHƠI ĐÙA"
   Xoáy trống đồng làm background wash · mây vàng làm divider ·
   chim Lạc làm neo thị giác · hoa bách hợp làm sparkle
   ==========================================================================*/

/* --- wash: phóng đại xoáy trống đồng, cắt cúp lệch khung, chìm dưới nội dung --- */
.wash{position:absolute;pointer-events:none;z-index:-1;opacity:.07;}
.wash-a{width:min(120vw,1500px);top:-14%;right:-28%;transform:rotate(-8deg);}
.wash-b{width:min(105vw,1250px);bottom:-22%;left:-24%;transform:rotate(12deg) scaleX(-1);opacity:.06;}
main > section{isolation:isolate;}   /* giữ z-index:-1 của wash nằm trong section */

/* --- divider: dải mây vàng ngăn giữa hai hồi --- */
.divider{position:relative;z-index:2;display:flex;justify-content:center;padding:34px 6vw 0;pointer-events:none;}
.divider img{width:min(78vw,760px);opacity:.9;}
@media (max-width:760px){.divider{padding-top:22px;}.divider img{width:88vw;}}

/* --- hero: chim Lạc là neo, mây vàng cần đậm hơn trên nền sáng --- */
.cloud{opacity:.95;}
.waves{width:min(52vw,620px);bottom:-16%;left:22%;opacity:.09;}
.spark.s2,.spark.s3{opacity:.85;}

/* --- huy hiệu: hexagon có viền hồng neon nên bỏ shadow cứng cho sạch --- */
#heroLogo{filter:drop-shadow(6px 8px 0 rgba(60,12,98,.16));}
.brand img,.loader-logo,.menu-brand img{filter:drop-shadow(3px 3px 0 rgba(60,12,98,.14));}

/* --- 60/30/10: cobalt là nền lớn, vàng là mảng nhấn, hồng neon chỉ viền/điểm --- */
.ticker{background:var(--cobalt);color:var(--gold);border-color:var(--ink);}
#bulletin .sec-title{color:var(--gold);}
#bulletin{border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);}
.spotlight{background-image:radial-gradient(rgba(252,218,85,.16) 1.4px,transparent 1.5px);background-size:24px 24px;}

/* --- hồng neon dùng đúng chỗ: viền nhấn, không nền chữ nhỏ --- */
.bcard.photo{border-color:var(--magenta);}
.pcard{border-color:var(--magenta);}
#stamp{border-color:var(--magenta);}
.eyebrow{border-color:var(--magenta);}

/* --- trạng thái tương tác theo màu nhận diện --- */
.btn:hover{background:var(--gold);}
.btn.pk:hover{background:var(--magenta);color:#fff;}
.btn.yl:hover{background:var(--cobalt);color:#fff;}
.m-item:hover{background:var(--gold);}
.chk:hover{border-color:var(--cobalt);}
.chk.done{background:var(--gold);}
a:focus-visible,button:focus-visible{outline-color:var(--magenta);}

/* --- section nền tối để kiểm chứng đảo nền --- */
#packing{background:var(--cream);}
.warn-zone .terminal{border-color:var(--ink);}

/* --- thẻ nền tím than trùng màu mực -> viền vàng để khung vẫn đọc được --- */
.bcard.purple,.pcard-badge.purple,.tl-card.hl,.org-node.root{border-color:var(--gold);}
.bcard.purple .tag,.pcard-badge.purple .chip,.tl-card.hl .chip{border-color:var(--ink);}
.warn-zone .terminal{border-color:var(--gold);}
#bulletin{border-color:var(--ink);}

/* --- chim Lạc: bố cục bay chéo lên góc phải, chừa chỗ cho tiêu đề --- */
#dragon{right:-3vw;bottom:8vh;width:min(44vw,620px);}
@media (max-width:1024px){#dragon{width:min(60vw,540px);bottom:5vh;right:-5vw;}}
@media (max-width:760px){#dragon{width:92vw;bottom:3vh;right:-12vw;}}

/* --- chim Lạc phải nằm trọn trong khung, không bị mép dưới cắt --- */
#dragon{right:2vw;bottom:14vh;width:min(38vw,520px);}
@media (max-width:1024px){#dragon{width:min(54vw,460px);bottom:9vh;right:0;}}
@media (max-width:760px){#dragon{width:86vw;bottom:5vh;right:-6vw;}}
#dragon{bottom:20vh;right:3vw;width:min(34vw,470px);}
@media (max-width:1024px){#dragon{bottom:12vh;width:min(50vw,420px);}}
@media (max-width:760px){#dragon{bottom:6vh;width:84vw;right:-4vw;}}

/* ============================================================================
   CINEMATIC · KIẾN TRÚC BỐI CẢNH ĐA TẦNG
   Dựng lại đúng thứ tự lớp trong Official Logo:
   không gian tối → mây → núi & chùa → chim Lạc → chữ
   ==========================================================================*/
:root{
  --sky-0:#08021C; --sky-1:#1A0740; --sky-2:#2A1163; --sky-3:#174DEB;
  --lite:#F7F1FF;                     /* chữ trên nền tối */
  --lite-dim:rgba(247,241,255,.72);
  --glass:rgba(26,7,64,.52);
  --glass-hi:rgba(255,255,255,.07);
}
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  contain:strict;}                    /* cô lập repaint của cả sân khấu */
#scene > *{position:absolute;will-change:transform;}

/* ---------- LAYER 0 · không gian sâu ---------- */
.sky{inset:-10% -10%;background:
  radial-gradient(120% 80% at 50% 8%,  var(--sky-2) 0%, transparent 62%),
  radial-gradient(90% 60% at 82% 78%,  var(--sky-3) 0%, transparent 55%),
  linear-gradient(178deg, var(--sky-1) 0%, var(--sky-0) 68%, #05010F 100%);
  transition:filter .8s ease;}
.glow{border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen;}
.glow.g1{width:52vw;height:52vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#FC1CA1 0%,transparent 68%);opacity:.32;}
.glow.g2{width:66vw;height:66vw;right:-18vw;top:24vh;background:radial-gradient(circle,#174DEB 0%,transparent 70%);opacity:.42;}
.vortex{width:150vmax;left:50%;top:44%;translate:-50% -50%;opacity:.10;
  filter:brightness(2.2) saturate(.6);}
.stars{inset:0;opacity:.5;
  background-image:radial-gradient(rgba(252,218,85,.85) .9px,transparent 1px),
                   radial-gradient(rgba(255,255,255,.55) .7px,transparent .8px);
  background-size:180px 180px, 97px 121px;
  background-position:0 0, 40px 60px;}

/* ---------- LAYER 1 · mây ---------- */
.cl{opacity:.9;filter:drop-shadow(0 0 26px rgba(252,218,85,.35));}
.cl.a{width:46vw;left:-6vw;top:12vh;}
.cl.b{width:34vw;right:-4vw;top:26vh;opacity:.75;}
.cl.c{width:52vw;left:22vw;top:62vh;opacity:.5;}
.cl.d{width:26vw;right:16vw;top:6vh;opacity:.6;}

/* ---------- LAYER 2 · núi non trùng điệp + chùa ---------- */
.ridge{bottom:-6vh;height:min(92vh,900px);width:auto;}
.ridge.far {left:-16vw;opacity:.45;filter:brightness(.55) saturate(1.3) blur(1.5px);}
.ridge.near{right:-14vw;opacity:.85;transform:scaleX(-1);filter:brightness(.85) saturate(1.2);}

/* ---------- LAYER 3 · chim Lạc dẫn đường ---------- */
.bird{width:min(38vw,520px);right:6vw;top:34vh;opacity:.9;
  filter:drop-shadow(0 0 30px rgba(252,218,85,.5));}

/* ---------- ánh sáng & hạt phim ---------- */
.vig{inset:0;background:radial-gradient(120% 90% at 50% 42%,transparent 42%,rgba(5,1,15,.72) 100%);}
.grain{inset:-50%;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}

/* đèn rọi bám con trỏ — tương tác với các layer nền */
#spot{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,40%),
    rgba(252,218,85,.16), rgba(23,77,235,.10) 45%, transparent 70%);}

/* ============================================================================
   NỘI DUNG TRÊN NỀN TỐI · glass + viền phát sáng, giữ nguyên bố cục
   ==========================================================================*/
body{background:transparent;background-image:none;color:var(--lite);}
main,footer,#topbar,#dotnav,#menu{position:relative;z-index:2;}
section{background:transparent;}
.wash,.divider{display:none;}                  /* sân khấu đã lo phần nền */

h1,h2,h3,h4,h5,.sec-title,.giant{color:var(--lite);}
.sec-sub,.lbl{color:var(--lite-dim);}
.sec-title em{color:var(--gold);}
.sec-title em.coral,.sec-title em.red-t{color:var(--magenta);}
.sec-title em.blue-t{color:#6FA8FF;}
.giant .stroke{-webkit-text-stroke:3px var(--gold);color:transparent;}

/* thẻ kính: viền vàng mảnh + nền mờ, bỏ shadow đặc kiểu in ấn */
.bcard,.pcard-badge,.tl-card,.pass,.chk,.org-node,.terminal,.pack-note,.ban,
.eyebrow,.btn,.chip,.tag,.m-item,.orgstats{
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);}
.bcard,.pcard-badge,.tl-card,.pass,.chk,.org-node,.orgstats{
  background:var(--glass);border-color:rgba(252,218,85,.42);
  box-shadow:0 18px 46px rgba(3,0,12,.55), inset 0 1px 0 rgba(255,255,255,.14);
  color:var(--lite);}
.bcard p,.tl-card p,.pcard-badge p,.chk em,.pass .sm{color:var(--lite-dim);}
.bcard.photo{background:none;border-color:var(--magenta);
  box-shadow:0 20px 50px rgba(3,0,12,.6);}
.pcard{border-color:var(--magenta);box-shadow:0 20px 50px rgba(3,0,12,.6);}

/* card có màu thương hiệu vẫn giữ khối đặc để làm điểm nhấn 30/10 */
.bcard.yellow,.bcard.team.t1{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.bcard.yellow .lbl,.bcard.team.t1 .lbl{color:rgba(60,12,98,.72);}
.bcard.blue,.pcard-badge.blue,.bcard.team.t3{background:rgba(23,77,235,.78);border-color:#6FA8FF;}
.bcard.pink,.pcard-badge.pink,.bcard.team.t2{background:rgba(212,6,127,.75);border-color:var(--magenta);}
.bcard.purple,.pcard-badge.purple{background:rgba(60,12,98,.72);border-color:var(--gold);}
.pcard-badge.green{background:rgba(27,24,155,.72);border-color:#6FA8FF;}

/* nút & chip: kính viền vàng, hover thì bừng sáng */
.btn,.chip,.tag{background:var(--glass-hi);color:var(--lite);border-color:rgba(252,218,85,.5);
  box-shadow:0 8px 22px rgba(3,0,12,.45);}
.btn.yl,.chip.yl,.tag,.tag.yl{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.btn.pk,.chip.pk,.tag.pk{background:rgba(212,6,127,.85);color:#fff;border-color:var(--magenta);}
.chip.bl,.tag.bl{background:rgba(23,77,235,.85);color:#fff;border-color:#6FA8FF;}
.chip.pu,.tag.pu,.chip.gr,.tag.gr,.chip.rd,.tag.rd{color:#fff;}
.btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 12px 40px rgba(252,218,85,.4);transform:translateY(-2px);}
.btn.pk:hover{background:var(--magenta);box-shadow:0 0 0 1px var(--magenta),0 12px 40px rgba(252,28,161,.45);}
.chk:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(252,218,85,.5),0 14px 34px rgba(3,0,12,.5);}
.chk.done{background:rgba(252,218,85,.9);color:var(--ink);border-color:var(--gold);}
.chk.done em{color:rgba(60,12,98,.7);}
.chk i{border-color:currentColor;background:rgba(255,255,255,.1);}
.chk.done i{background:var(--ink);}
.chk.done i::after{color:var(--gold);}

/* các mảng đặc còn lại */
.ticker{background:rgba(8,2,28,.72);color:var(--gold);border-color:rgba(252,218,85,.4);
  backdrop-filter:blur(10px);}
#packing{background:transparent;}
#bulletin{background:rgba(8,2,28,.55);border-top:1px solid rgba(252,218,85,.35);
  border-bottom:1px solid rgba(252,218,85,.35);backdrop-filter:blur(6px);}
#bulletin .sec-title{color:var(--gold);}
.terminal{background:rgba(6,2,20,.82);border-color:rgba(252,218,85,.45);}
.pack-note{background:rgba(252,218,85,.9);color:var(--ink);border-color:var(--gold);}
.tl-rail{background:rgba(252,218,85,.25);border-color:rgba(252,218,85,.4);}
.tl-rail i{background:var(--gold);}
.tl-dot{background:var(--sky-1);border-color:var(--gold);box-shadow:0 0 18px rgba(252,218,85,.6);}
.tl-item.lit .tl-dot{background:var(--magenta);box-shadow:0 0 26px rgba(252,28,161,.75);}
.tl-card.hl{background:rgba(23,77,235,.7);border-color:#6FA8FF;}
.org-row + .org-row::before{background:rgba(252,218,85,.5);}
.org-node.root{background:rgba(23,77,235,.8);border-color:#6FA8FF;}
.org-node.hoc{background:rgba(60,12,98,.8);border-color:var(--gold);}
.org-node.dep{background:rgba(212,6,127,.8);border-color:var(--magenta);}
.org-node.side{background:rgba(255,255,255,.08);}
.org-node span{color:var(--lite-dim);}
.ost-bar s{color:var(--lite-dim);}
.pass-stub{background:rgba(252,218,85,.92);color:var(--ink);}
.pass-stub .lbl{color:rgba(60,12,98,.7);}
.pass-stub::before,.pass-stub::after{background:transparent;backdrop-filter:none;
  border-color:rgba(252,218,85,.6);}
.dashline{border-color:rgba(252,218,85,.55);}
.eyebrow{background:rgba(255,255,255,.08);color:var(--lite);border-color:var(--magenta);}
#stamp{background:rgba(252,218,85,.92);border-color:var(--magenta);}
#dotnav a i{background:rgba(255,255,255,.18);border-color:rgba(252,218,85,.6);}
#dotnav a.on i{background:var(--gold);box-shadow:0 0 16px rgba(252,218,85,.8);}
#menu{background:rgba(8,2,28,.9);backdrop-filter:blur(24px);}
.m-item{background:rgba(255,255,255,.05);color:var(--lite);border-bottom-color:rgba(252,218,85,.3);}
.m-item:hover{background:rgba(252,218,85,.92);color:var(--ink);}
.m-item:hover b,.m-item:hover span,.m-item:hover i{color:var(--ink);}
.m-item span{color:var(--lite-dim);}
footer{background:transparent;border-top:1px solid rgba(252,218,85,.3);}
.f-title{color:var(--gold);} .f-title em{color:var(--magenta);}
.f-credit,footer p{color:var(--lite-dim);}
#loader{background:var(--sky-0);}
.loader-count,.loader-tag{color:var(--lite);}
.loader-bar{border-color:rgba(252,218,85,.6);background:rgba(255,255,255,.08);}
::selection{background:var(--gold);color:var(--ink);}
:focus-visible{outline-color:var(--gold);}
.brand,.brand b{color:var(--lite);} .brand b{color:var(--gold);}
#lightbox{background:rgba(5,1,15,.94);}
.chk .qty{color:var(--gold);}
.progress,.pp-bar{background:rgba(255,255,255,.1);border-color:rgba(252,218,85,.5);}

/* hero: chim Lạc riêng của hero ẩn đi vì sân khấu đã có chim Lạc dẫn đường */
#hero .par,#dragon{display:none;}

@media (max-width:760px){
  .ridge{height:56vh;} .bird{width:74vw;right:-8vw;top:26vh;}
  .cl.a{width:80vw;} .cl.b{width:62vw;} .cl.c{width:86vw;} .cl.d{width:52vw;}
  .glow{filter:blur(60px);}
  .bcard,.pcard-badge,.tl-card,.pass,.chk,.org-node{backdrop-filter:blur(8px);}
}
@media (prefers-reduced-motion:reduce){#scene > *{transform:none!important;}}

/* --- DỰNG CHIỀU SÂU BẰNG SẮC ĐỘ: xa = tối & mờ, gần = rõ & sáng --- */
.vortex{opacity:.055;}
.stars{opacity:.35;}

/* núi giờ là ĐƯỜNG CHÂN TRỜI phía dưới, không phải bức tường phủ kín khung */
.ridge{bottom:-3vh;height:min(46vh,470px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%);}
.ridge.far {left:-12vw;opacity:.5;filter:brightness(.32) saturate(1.6) blur(2.5px);}
.ridge.near{right:-10vw;height:min(38vh,390px);opacity:.9;
  filter:brightness(.62) saturate(1.35) blur(.3px);}

/* mây: giữ ở dải trên, chừa sạch vùng tiêu đề */
.cl.a{width:38vw;left:-5vw;top:9vh;opacity:.8;}
.cl.b{width:28vw;right:-2vw;top:20vh;opacity:.6;}
.cl.c{width:44vw;left:26vw;top:3vh;opacity:.28;}
.cl.d{width:20vw;right:22vw;top:30vh;opacity:.4;}

/* chim Lạc bay ở góc cao, không đè huy hiệu */
.bird{width:min(24vw,330px);right:5vw;top:13vh;opacity:.92;}

/* màn sương sau nội dung hero -> chữ luôn tách khỏi cảnh */
#hero .hero-inner::before{content:'';position:absolute;inset:-16% -22%;z-index:-1;
  background:radial-gradient(58% 52% at 50% 48%,rgba(6,2,22,.72) 0%,rgba(6,2,22,.35) 55%,transparent 78%);
  filter:blur(18px);pointer-events:none;}
.sec-head{position:relative;}
.sec-head::before{content:'';position:absolute;inset:-24% -8% -18% -6%;z-index:-1;
  background:radial-gradient(60% 60% at 30% 50%,rgba(6,2,22,.6),transparent 72%);
  filter:blur(16px);pointer-events:none;}

@media (max-width:760px){
  .ridge{height:30vh;} .ridge.near{height:26vh;}
  .bird{width:52vw;right:-4vw;top:10vh;}
  .cl.a{width:66vw;} .cl.b{width:54vw;} .cl.c{width:70vw;opacity:.2;} .cl.d{width:40vw;}
}

/* --- [FIXED] thẻ nền đặc phải tự khai màu chữ, nếu không sẽ kế thừa màu sáng --- */
.bcard.yellow,.bcard.yellow p,.bcard.yellow .sm,.bcard.yellow h3,.bcard.yellow h4,
.bcard.team.t1,.bcard.team.t1 p,.bcard.team.t1 b{color:var(--ink);}
.bcard.yellow .lbl,.bcard.team.t1 .lbl{color:rgba(60,12,98,.75);}
.bcard.blue p,.bcard.pink p,.bcard.purple p,.bcard.navy p,
.bcard.team.t2 p,.bcard.team.t3 p,.pcard-badge p{color:rgba(255,255,255,.9);}
.bcard.blue .lbl,.bcard.pink .lbl,.bcard.purple .lbl{color:rgba(255,255,255,.78);}
.pack-note,.pack-note p{color:var(--ink);}
.pass-stub,.pass-stub .sm,.pass-stub b{color:var(--ink);}
.chk.done,.chk.done span,.chk.done b{color:var(--ink);}
.tl-card.hl p{color:rgba(255,255,255,.9);}
.org-node.root,.org-node.hoc,.org-node.dep{color:#fff;}
.ost-gender div{color:#fff;}
.cl.c{display:none;}                    /* bớt một tầng mây cho vùng tiêu đề sạch */

/* --- [FIXED] chip lồng trong thẻ tối vẫn giữ màu mực cũ -> chữ tàng hình --- */
.bcard .chip,.pcard-badge .chip,.tl-card .chip,.bcard.team .chip{
  background:rgba(255,255,255,.13);color:var(--lite);border-color:rgba(252,218,85,.55);}
.bcard.yellow .chip,.bcard.team.t1 .chip{
  background:rgba(60,12,98,.12);color:var(--ink);border-color:var(--ink);}
.bcard .chip.yl,.pcard-badge .chip.yl,.tl-card .chip.yl{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.bcard .tag,.pcard-badge .tag,.tl-card .tag{color:var(--ink);}
/* --- [FIXED] chip đồ cấm còn nền trắng, chữ sáng -> vô hình --- */
.ban{background:rgba(255,255,255,.12);color:var(--lite);border-color:rgba(252,218,85,.5);}
.term-x,.term-bar{color:#fff;}
.pcard-badge.purple .chip,.pcard-badge.green .chip{
  color:var(--lite);background:rgba(255,255,255,.13);border-color:rgba(252,218,85,.55);}

/* ============================================================================
   STORYTELLING · CHƯƠNG, GIỌNG KỂ, THANH HÀNH TRÌNH
   ==========================================================================*/
.hi{font-family:var(--disp);font-weight:700;font-size:clamp(15px,2vw,22px);
  color:var(--gold);letter-spacing:.02em;margin-bottom:12px;text-transform:none;}
.chap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.chap i{font-style:normal;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(252,218,85,.5);padding:5px 12px;background:rgba(252,218,85,.08);
  backdrop-filter:blur(8px);white-space:nowrap;}
.chap b{font-family:var(--disp);font-weight:700;font-size:clamp(15px,1.8vw,20px);
  color:var(--lite);letter-spacing:-.01em;text-transform:none;}
.chapline{max-width:52ch;font-size:clamp(14px,1.35vw,17px);line-height:1.75;
  color:var(--lite-dim);margin:14px 0 0;text-transform:none;}
.chapline.lead{max-width:44ch;margin:18px auto 0;text-align:center;font-size:clamp(13px,1.3vw,16px);}
.sec-head .chapline{margin-top:16px;}
.signoff{font-family:var(--disp);font-weight:700;font-size:clamp(16px,2.2vw,26px);
  line-height:1.5;color:var(--lite);margin-top:26px;text-transform:none;}
.signoff b{color:var(--gold);}

/* thanh hành trình bám mép trái — thay cho đồng hồ của bar.digital */
#spine{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;align-items:center;gap:14px;pointer-events:none;}
.spine-rail{width:3px;height:34vh;background:rgba(252,218,85,.2);position:relative;overflow:hidden;}
.spine-rail i{position:absolute;inset:0 0 auto 0;height:0%;background:var(--gold);
  box-shadow:0 0 14px rgba(252,218,85,.8);}
.spine-now{writing-mode:vertical-rl;text-orientation:mixed;display:flex;gap:12px;align-items:center;}
.spine-now b{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);}
.spine-now span{font-size:11px;letter-spacing:.1em;color:var(--lite-dim);}
@media (max-width:1100px){#spine{display:none;}}

/* ============================================================================
   [FIXED] 5 lỗi từ feedback: nền trắng lộ ra · núi quá nhỏ · chữ chìm trên xanh
   ==========================================================================*/
/* nền sáng còn sót -> lộ mảng trắng khi lướt & bị glow magenta xuyên qua */
#packing,#trai,#flight,#hero,footer,section{background:transparent !important;}
#bulletin{background:rgba(8,2,28,.5) !important;}
.warn-zone,.pack-wrap,.bento,.badges,.passes,.timeline,.photo-strip{background:transparent;}

/* núi non trùng điệp: to hẳn lên, thành hậu cảnh thật chứ không phải viền nhỏ */
.ridge{bottom:-4vh;height:min(78vh,860px);transform-origin:50% 100%;}
.ridge.far {left:-20vw;opacity:.52;filter:brightness(.34) saturate(1.7) blur(3px);}
.ridge.near{right:-18vw;height:min(66vh,720px);opacity:.92;
  filter:brightness(.66) saturate(1.4);}
@media (max-width:760px){
  .ridge{height:46vh;left:-28vw;} .ridge.near{height:40vh;right:-24vw;}
}

/* nền xanh -> nhấn bằng chữ VÀNG, không dùng tím/chàm (bị chìm) */
.sec-title em,
.sec-title em[style]{color:var(--gold) !important;}
.sec-title em.blue-t,.sec-title em.blue-t[style]{color:#FFE88A !important;}
.bcard.blue b,.bcard.blue h3,.bcard.blue h4,
.pcard-badge.blue h4,.tl-card.hl h5,.org-node.root{color:var(--gold);}
.bcard.blue .lbl,.pcard-badge.blue .chip{color:var(--gold);}
.f-title em,.brand b,.m-item i{color:var(--gold);}
.air,.pass-top b{color:var(--lite);}
/* glow magenta hạ xuống để screen-blend không cháy thành cam */
.glow.g1{opacity:.18;} .glow.g2{opacity:.34;}
.vig{background:radial-gradient(125% 95% at 50% 40%,transparent 38%,rgba(5,1,15,.8) 100%);}

/* ============================================================================
   HỆ ICON THỐNG NHẤT · Lucide (stroke 2px) thay toàn bộ emoji
   ==========================================================================*/
.ic{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;
  flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.chip .ic,.tag .ic,.btn .ic{width:1em;height:1em;vertical-align:-.14em;margin-right:.1em;}
.sec-title .ic{width:.78em;height:.78em;stroke-width:2.4;vertical-align:.02em;color:var(--gold);}
.pcard-badge .em .ic,.em .ic{width:1em;height:1em;stroke-width:1.7;}
.pcard-badge .em{color:var(--gold);}
.bcard.blue .em,.pcard-badge.blue .em{color:var(--gold);}
.lbl .ic{width:.95em;height:.95em;vertical-align:-.12em;margin-right:.28em;}
.chapline .ic,.sec-sub .ic{width:.95em;height:.95em;}
.term-line .ic{width:.9em;height:.9em;stroke-width:2.2;}
.ban .ic{width:1em;height:1em;margin-right:.35em;}
.dayline i .ic,.tl-card h5 .ic{width:.9em;height:.9em;}
/* thứ tự kể chuyện trong mỗi section: chương → nhãn → tiêu đề → lời dẫn */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;}
.sec-head > .chap{order:0;} .sec-head > .tag,.sec-head > span.tag{order:1;margin-top:4px;}
.sec-head > .sec-title{order:2;} .sec-head > .chapline{order:3;}
.sec-head > .sec-sub{order:4;}
.warn-zone .chap{margin-bottom:10px;}

/* ============================================================================
   TỐI ƯU CUỘN · [FIXED] 243 phần tử backdrop-filter = mỗi frame chụp lại nền
   243 lần rồi blur. Chỉ giữ blur ở 2 bề mặt lớn, còn lại dùng nền đặc rgba
   (trên nền tối nhìn gần như y hệt nhưng rẻ hơn hàng chục lần).
   ==========================================================================*/
.bcard,.pcard-badge,.tl-card,.pass,.chk,.org-node,.pack-note,.ban,
.eyebrow,.btn,.chip,.tag,.m-item,.orgstats,.ticker,.chap i,#bulletin,.terminal{
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
#menu{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}

/* nền đặc hơn một chút để bù phần blur đã bỏ */
.bcard,.pcard-badge,.tl-card,.pass,.org-node,.orgstats{background:rgba(20,6,52,.78);}
.chk{background:rgba(20,6,52,.72);}
.btn,.chip,.tag{background:rgba(255,255,255,.1);}
.chap i{background:rgba(252,218,85,.12);}
.ticker{background:rgba(8,2,28,.92);}
#bulletin{background:rgba(8,2,28,.72) !important;}
.terminal{background:rgba(6,2,20,.94);}

/* chỉ các tầng thật sự chuyển động mới được promote lên layer riêng */
*{will-change:auto;}
#scene > *,#spot,#dragon,#planeEmoji{will-change:transform;}

/* bỏ blur động trên SVG khổng lồ — mỗi lần scale/translate phải raster lại */
.ridge.far{filter:brightness(.34) saturate(1.7);opacity:.42;}
.ridge.near{filter:brightness(.66) saturate(1.4);}
.cl{filter:none;}
#heroLogo{filter:none;}
.bird{filter:none;}
.grain{opacity:.1;}

/* ảnh trong khung: bỏ ken-burns scale vô tận (raster lại ảnh lớn liên tục) */
@media (max-width:1024px){.pcard img,.bcard.photo img{transform:none !important;}}

/* ============================================================================
   KÝ HIỆU CHIM LẠC · đổi màu theo nhịp ngày–đêm của bối cảnh
   ==========================================================================*/
:root{--mark:#FCDA55;}                     /* JS nội suy theo scroll */
.ic.lac{fill:currentColor;stroke:none;width:1.5em;height:1.5em;vertical-align:-.42em;
  color:var(--mark);margin-right:.15em;}
.chip .ic.lac,.tag .ic.lac{width:1.35em;height:1.35em;vertical-align:-.35em;}
.chip.yl .ic.lac,.tag.yl .ic.lac,.tag .ic.lac{color:var(--ink);}   /* trên nền vàng thì dùng mực */
.chip.pk .ic.lac,.chip.bl .ic.lac,.tag.pk .ic.lac{color:#fff;}

/* ============================================================================
   TỐI ƯU CUỘN GIAI ĐOẠN 2 · bỏ filter trên SVG khổng lồ + bỏ blend toàn màn
   filter trên layer đã promote khiến trình duyệt raster lại ảnh mỗi frame.
   ==========================================================================*/
.ridge.far{filter:none;opacity:.3;}
.ridge.near{filter:none;opacity:.62;}
.vortex{filter:none;opacity:.05;}
.glow{mix-blend-mode:normal;filter:blur(80px);}
.glow.g1{opacity:.22;} .glow.g2{opacity:.3;}
.grain{mix-blend-mode:normal;opacity:.05;}
#spot{mix-blend-mode:normal;opacity:.55;}
.stars{opacity:.3;}
/* [FIXED] tối ưu ở trên lỡ ghi đè nền vàng của .tag -> chữ mực trên nền trong suốt */
.tag{background:var(--gold) !important;color:var(--ink) !important;border-color:var(--gold);}
.tag.pk{background:rgba(212,6,127,.95) !important;color:#fff !important;border-color:var(--magenta);}
.tag.bl{background:rgba(23,77,235,.95) !important;color:#fff !important;}
.tag.pu,.tag.gr{background:rgba(60,12,98,.95) !important;color:#fff !important;border-color:var(--gold);}
.tag.rd{background:rgba(212,6,127,.95) !important;color:#fff !important;}
.tag .ic{color:inherit;}
.chip{background:rgba(255,255,255,.12);}