/* Shared VI / EN refinement. HTML and original images remain the fallback. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
::selection{background:#d8e7f7;color:#0a2540}
:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.nav{transition:box-shadow .35s,border-color .35s}
.nav.is-scrolled{box-shadow:0 8px 30px -20px #071b2e66;border-bottom-color:#cdd8e5}
.hero{background:var(--navy-deep)}
.hero h1{text-wrap:balance}
.hero .eyebrow{margin-top:0;font-size:12.5px;letter-spacing:.2em}
.hero .eyebrow::before{content:"";width:30px;height:1px;background:currentColor;flex:none}
.hero p:not(.eyebrow):not(.hero-deck){max-width:640px}
.hero-cta .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.hero .btn-ghost{color:#fff;border-color:#ffffff73}
.hero .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.hero-cta .btn:first-child::after{content:"↗";font-size:18px;margin-left:24px;font-weight:400}
.hero-strip{background:linear-gradient(110deg,#071b2e,#0b2c49)}
.hs span{color:#b0bfd0}
.stat{background:linear-gradient(150deg,#fff,#f7f9fc);border-color:#dce4ed}
.stat b{font-variant-numeric:tabular-nums}
.tbl-wrap{border-top:2px solid var(--navy)}
.story-img{border-radius:5px}
/* Maps retain all their labels and never zoom/crop on hover. */
section:not(#tiemnang) .story-img:hover img{transform:none}
.story-num{display:flex;align-items:center;gap:14px;color:#61778f}
.story-num::after{content:"";height:1px;width:38px;background:#ccd7e2}
.story-txt h3{text-wrap:balance}
.ph-media{border:1px solid #d7e1ec;border-radius:5px}
.ph-stage{background:radial-gradient(ellipse at center,#edf3f9,#e4edf6);position:relative}
.ph-stage::after{content:"";position:absolute;inset:18px;border:1px solid #c8d7e566;pointer-events:none}
.ph-side{background:#fbfcfe}
.formbox{box-shadow:0 24px 60px -40px #0a254066}
.field input,.field textarea{border-radius:4px}
@media(min-width:1100px){
section{padding:clamp(88px,7.8vw,120px) 0}
.story-row{gap:64px;padding:66px 0}
.story-txt{max-width:440px}
}
@media(max-width:700px){
.nav .wrap{gap:12px}
.navtools{gap:10px}
.brand img{width:135px;height:auto}
.navtools .btn-sm{padding:9px 12px;font-size:12.5px;white-space:nowrap}
.navtools .lang{font-size:12px}
.hero-bg::after{background:linear-gradient(165deg,#061728f5,#08203bee 55%,#0a2540d9)}
.hero .eyebrow{font-size:11.5px;letter-spacing:.16em}
.hero h1{font-size:clamp(29px,7.8vw,36px)}
.hero-cta{gap:10px}
.hero-cta .btn{padding:12px 17px}
}
@media(max-width:370px){.nav .wrap{padding-left:12px;padding-right:12px;gap:8px}.brand img{width:115px}.navtools{gap:7px}}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.thumb:hover img,.story-img:hover img,.card:hover,.dir:hover,.btn:hover{transform:none}
}
/* Architectural editorial layout: imagery is still; hierarchy does the work. */
[hidden]{display:none!important}
/* Hero: anh full-bleed nam duoi, chi phu mot lop overlay len tren. */
.hero{min-height:calc(100svh - 68px);overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
.hero>.hero-main{width:100%;min-height:0;display:flex;align-items:center;max-width:1320px;
padding-top:clamp(54px,7vh,78px);padding-bottom:clamp(48px,6vh,68px)}
.hero-copy{max-width:760px}
.hero h1{font-size:clamp(40px,4.4vw,62px);line-height:1.1;letter-spacing:-.035em;max-width:none}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:58% center;filter:saturate(.92) contrast(.97)}
.hero-bg::after{z-index:2;background:
linear-gradient(100deg,rgba(6,23,40,.93) 0%,rgba(8,32,55,.86) 37%,rgba(10,37,64,.55) 68%,rgba(10,37,64,.24) 100%),
linear-gradient(rgba(6,23,40,.2),transparent 45%)}
.hero-credit{font-size:12px!important;letter-spacing:.03em;color:#8ea2b9!important;margin:34px 0 0!important}
.hero .hero-deck{font-family:"Lora",Georgia,serif;font-size:clamp(23px,2.2vw,30px)!important;color:#e5edf5;line-height:1.4!important;margin:20px 0 26px;max-width:22em}
.hero-copy>p:not(.eyebrow):not(.hero-deck):not(.hero-credit){font-size:15px!important;line-height:1.85!important;color:#aebed0;margin:0 0 30px}
.hero .hero-strip{position:relative;z-index:3;width:100%;background:rgba(7,27,46,.94);backdrop-filter:blur(8px)}
.hero .hero-strip .wrap{max-width:1320px;min-height:0;padding-top:0;padding-bottom:0;display:grid;align-items:stretch}
.hs{padding-top:26px;padding-bottom:26px}
.hs b{font-size:36px}
.hs span{font-size:13px;max-width:290px}
.site-status{max-width:720px;margin:0 0 34px;font-size:17px}
.context-folds{margin-top:48px}
.context-folds>h3{font-size:15px;font-weight:500;color:#6b7e93;margin-bottom:22px}
.context-detail{border-top:1px solid #ccd8e4;background:transparent}
.context-detail:last-child{border-bottom:1px solid #ccd8e4}
.context-detail>summary{display:flex;align-items:center;gap:22px;cursor:pointer;list-style:none;padding:23px 0;font-family:"Lora",Georgia,serif;font-size:21px;color:var(--navy)}
.context-detail>summary::-webkit-details-marker{display:none}
.context-detail>summary::after{content:"+";font-family:system-ui;font-size:24px;font-weight:300;margin-left:auto}
.context-detail[open]>summary::after{content:"−"}
.context-index{font:12px "Be Vietnam Pro",sans-serif;color:#7a8ca1;flex:none}
.context-body{padding:8px 0 32px}
.context-body .lead{font-size:16px;margin-bottom:28px}
.context-detail.dark[open]{background:var(--navy);padding:0 26px;margin-top:12px}
.context-detail.dark[open]>summary{color:white}
.context-detail.dark:not([open]){color:var(--navy)}
#duan .g2{margin-top:0!important;align-items:start}
.media-section{padding:64px 0}
.media-section .lead{font-size:16px;margin-bottom:32px}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d1dce7}
.media-item{position:relative;padding:30px 28px 0 0;scroll-margin-top:95px}
.media-item+.media-item{border-left:1px solid #dce4ed;padding-left:28px}
.media-item>svg{width:29px;height:29px;display:block;margin-bottom:18px}
.media-item h3{font-size:18px}
.media-item p{font-size:14px;line-height:1.75;margin:12px 0 20px}
.media-status{font-size:12px;letter-spacing:.025em;color:#65798f;display:inline-flex;align-items:center;gap:8px}
.media-status::before{content:"";width:5px;height:5px;border-radius:50%;background:#8c9eb0}
.gallery-ready{margin-top:26px}
.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 22px;border-bottom:1px solid #cfdae6}
.gallery-filters{display:flex;gap:24px;flex-wrap:wrap}
.gallery-filters button{font:inherit;font-size:14px;color:#61748a;background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;cursor:pointer}
.gallery-filters button span{font-size:11px;margin-left:8px;color:#8292a4}
.gallery-filters button[aria-pressed="true"]{color:var(--navy);border-color:var(--navy);font-weight:600}
.gallery-paging{display:flex;align-items:center;gap:14px;flex-shrink:0}
.gallery-paging span{font-size:13px;color:#61748a;font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.gallery-paging button{width:38px;height:38px;border:1px solid #d1dce7;background:#fff;font-size:19px;color:var(--navy);cursor:pointer}
.gallery-paging button:hover:not(:disabled){background:var(--navy);color:white}
.gallery-paging button:disabled{opacity:.28;cursor:default}
.gallery-ready .story-row,.gallery-ready .story-row:nth-child(even){display:grid;grid-template-columns:1fr;gap:0;padding:26px 0 24px;border:0;opacity:1;transform:none;transition:none}
.gallery-ready .story-img,.gallery-ready .story-row:nth-child(even) .story-img{order:0;border:0;border-radius:0;background:#fff;box-shadow:none;aspect-ratio:1672/763;overflow:hidden}
.gallery-ready .story-img img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;transform:none!important}
.gallery-ready .story-txt,.gallery-ready .story-row:nth-child(even) .story-txt{order:1;display:grid;grid-template-columns:1fr 1.2fr;column-gap:60px;max-width:none;padding-top:24px;min-height:140px}
.gallery-ready .story-num{grid-column:1;font-size:12px;margin-bottom:8px}
.gallery-ready .story-txt h3{grid-column:1;grid-row:2;font-size:25px;margin:0}
.gallery-ready .story-txt p{grid-column:2;grid-row:1 / 3;font-size:15px;line-height:1.8;margin:0}
.gallery-rail{position:relative;display:flex;gap:12px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:thin;scrollbar-color:#a7b8ca transparent}
.gallery-rail button{position:relative;flex:0 0 142px;border:2px solid transparent;background:#eef2f6;padding:0;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.gallery-rail button:hover,.gallery-rail button[aria-pressed="true"]{opacity:1}
.gallery-rail button[aria-pressed="true"]{border-color:var(--navy);outline:2px solid #fff;outline-offset:-4px}
.gallery-rail img{width:100%;height:auto;aspect-ratio:2.19;object-fit:cover}
.gallery-rail button>span{position:absolute;right:5px;bottom:4px;color:white;background:#071b2ebf;font-size:10px;padding:0 5px}
.enquiry-section{background:var(--navy)!important;color:#b7c7d8}
.enquiry-section>.wrap{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:80px;grid-template-rows:auto 1fr;align-items:start}
.enquiry-section>.wrap>div:first-child{text-align:left!important;margin:10px 0 0!important}
.enquiry-section h2{color:white;font-size:44px!important;line-height:1.2;max-width:9em}
.enquiry-section .eyebrow{color:#8ab8e9}
.enquiry-section>.wrap>div:first-child>p:last-child{margin:22px 0 0!important;font-size:16px}
.enquiry-section .formbox{grid-column:2;grid-row:1 / span 2;width:100%;padding:34px;box-shadow:none;border:0;color:var(--body)}
.enquiry-section .callout{grid-column:1;grid-row:2;text-align:left;margin:26px 0 0;align-self:start}
.enquiry-section .callout a{color:white}
@media(max-width:1100px){
.hero h1{font-size:44px}
.hero-copy>p:not(.eyebrow):not(.hero-deck):not(.hero-credit){font-size:14px!important}
.enquiry-section>.wrap{gap:36px}
.gallery-toolbar{flex-wrap:wrap}
}
@media(max-width:800px){
.hero{grid-template-rows:auto auto}
.hero>.hero-main{padding-top:62px;padding-bottom:54px}
.hero .hero-strip .wrap{grid-template-columns:repeat(3,1fr)}
.hero .hs{padding:18px 9px}
.hero .hs+.hs{padding-left:9px;border-left:1px solid rgba(255,255,255,.11);border-top:0}
.hero .hs b{font-size:22px}
.hero .hs span{font-size:9.5px;line-height:1.5}
.hero h1{font-size:clamp(36px,7.5vw,50px)}
.hero .hero-deck{font-size:23px!important;max-width:23em}
.hero-copy>p:not(.eyebrow):not(.hero-deck):not(.hero-credit){font-size:15px!important}
.hero-credit{margin-top:26px!important}
.media-grid{grid-template-columns:1fr}
.media-item,.media-item+.media-item{padding:24px 0;border:0;border-bottom:1px solid #dce4ed}
.media-item p{margin:8px 0 12px}
.media-item>svg{float:left;margin-right:18px;margin-bottom:8px}
.gallery-filters{gap:12px}
.gallery-filters button{font-size:12px}
.gallery-filters button span{margin-left:4px}
.gallery-toolbar{gap:10px}
.gallery-paging{margin-left:auto}
.gallery-ready .story-txt{display:block!important;min-height:0;padding-top:20px}
.gallery-ready .story-txt h3{font-size:23px;margin-bottom:12px}
.gallery-ready .story-txt p{font-size:15px}
.gallery-rail button{flex-basis:112px}
.enquiry-section>.wrap{display:flex;flex-direction:column;gap:28px}
.enquiry-section h2{font-size:36px!important;max-width:none}
.enquiry-section .formbox{padding:26px 22px}
.enquiry-section .callout{margin-top:0}
}
@media(max-width:700px){
.tbl-stack table{min-width:0}
.tbl-stack td:first-child{white-space:normal;width:38%}
.tbl-stack th,.tbl-stack td{padding:13px 12px 13px 0}
.tbl-scroll{position:relative}
.tbl-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--bg-soft,#f7f9fc))}
.tbl-scroll+.note::before{content:"⟷ ";color:#7a8ca1}
}
/* the media grid had a top rule but no closing one */
.media-grid{border-bottom:1px solid #d1dce7}
.media-item{padding-bottom:30px}
@media(max-width:800px){.media-grid{border-bottom:0}.media-item:last-child{border-bottom:0}}
/* ---- Menu mobile ----------------------------------------------------------
Truoc day duoi 1000px thanh menu bi an hoan toan ma khong co gi thay the,
nen khach dung dien thoai khong nhay muc duoc. Panel nay chi kich hoat khi
co JS (.js); neu JS loi thi cac link tu dong hien lai dang xep doc. */
.navtoggle{display:none;width:42px;height:42px;padding:0;flex:none;
flex-direction:column;align-items:center;justify-content:center;gap:4px;
border:1px solid #d5dfea;border-radius:4px;background:#fff;cursor:pointer}
.navtoggle:hover{border-color:#b6c6d6}
.navtoggle span{display:block;width:17px;height:1.5px;background:var(--navy);
transition:transform .28s var(--ease-out),opacity .18s}
.nav.menu-open .navtoggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.menu-open .navtoggle span:nth-child(2){opacity:0}
.nav.menu-open .navtoggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media(max-width:1000px){
.js .navtoggle{display:flex}
.js .nav .navlinks{
display:block;position:absolute;left:0;right:0;top:100%;
background:#fff;border-bottom:1px solid var(--silver-pale);
box-shadow:0 22px 44px -30px #071b2e66;padding:4px 0 8px;
max-height:calc(100svh - 68px);overflow-y:auto;
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .24s,transform .28s var(--ease-out),visibility .28s}
.js .nav.menu-open .navlinks{opacity:1;visibility:visible;transform:none}
.js .nav .navlinks a{display:block;padding:15px 20px;font-size:16px;
border-bottom:1px solid #eef2f6}
.js .nav .navlinks a:last-child{border-bottom:0}
.js .nav .navlinks a::after{display:none}
.js .nav .navlinks a.active{color:var(--navy);font-weight:600}
.js .nav .navlinks .lang{display:block;padding:15px 20px;font-size:14px;
border-top:1px solid #dfe6ee;margin-top:4px}
.js .nav .navlinks .lang a.lang-opt{display:inline-flex;align-items:center;gap:6px;
padding:0;border:0;font-size:inherit}
/* Khong co JS: rule goc `.navlinks{display:none}` se an het link va khach
mat duong nhay muc. Cho thanh nav cao ra, xep link thanh hang xuong dong. */
html:not(.js) .nav{height:auto}
html:not(.js) .nav .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:11px;row-gap:10px}
html:not(.js) .nav .navlinks{display:flex;flex-wrap:wrap;width:100%;order:3;
gap:11px 18px;padding-top:9px;border-top:1px solid #eef2f6}
html:not(.js) .nav .navlinks a{font-size:14px}
}
@media(max-width:700px){
.js .nav .navlinks a{padding:14px 20px}
.navtoggle{width:40px;height:40px}
}
@media(max-width:370px){.navtoggle{width:36px;height:36px}}
/* ---- Bo doi ngon ngu co la co ---------------------------------------------
Co la tin hieu quoc gia, khong phai ngon ngu - nen la co chi de nhan dien
nhanh, ma quyet dinh van la ma "VI"/"EN" ben canh, va thuoc tinh
hreflang/lang moi la thu may doc hieu. Do la cach cac trang quoc te lam. */
.lang{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.lang-opt{display:inline-flex;align-items:center;gap:6px;line-height:1;
font-size:13px;letter-spacing:.02em}
.lang-opt b{font-weight:600}
.lang .flag{width:18px;height:12px;flex:none;display:block;border-radius:2px;
box-shadow:0 0 0 .5px #0a25402e,0 1px 2px -1px #0a254040}
.lang-opt.is-on{color:var(--ink)}
.lang-opt.is-on b{color:var(--ink)}
a.lang-opt{color:var(--muted);transition:color .25s}
a.lang-opt b{color:var(--muted);font-weight:500;transition:color .25s}
a.lang-opt .flag{filter:saturate(.25);opacity:.6;transition:filter .3s,opacity .3s}
a.lang-opt:hover{color:var(--blue)}
a.lang-opt:hover b{color:var(--blue)}
a.lang-opt:hover .flag{filter:none;opacity:1}
.lang-sep{width:1px;height:13px;background:#ccd7e2;flex:none}
@media(max-width:1000px){
/* trong panel mobile bo doi nay nam thanh mot hang rieng */
.js .nav .navlinks .lang{display:flex;justify-content:flex-start}
}
@media(max-width:700px){.lang-opt{font-size:12.5px}.lang .flag{width:17px;height:11.3px}}