/* Giao diện doanhnghiepai.vn: navy Aduca + vàng đồng, tiêu đề Playfair Display, thân chữ Inter.
   Màu lấy từ config.json (brand.colors) qua biến --primary, --accent, --gold, --navy, --ink, --muted, --bg, --card, --r.
   Giữ nguyên cơ chế menu, form, cookie của bộ khung. Mọi hiệu ứng tắt khi người dùng bật "giảm chuyển động". */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16.5px;line-height:1.7;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%}
@font-face{font-family:"Serif Fallback";src:local("Georgia");size-adjust:104%}
img{max-width:100%;height:auto}
a{color:var(--primary);text-underline-offset:3px}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em;text-wrap:balance;color:var(--navy)}
h1,h2,.serif{font-family:"Playfair Display","Serif Fallback",Georgia,serif;font-weight:700}
h1{font-size:clamp(32px,4.6vw,56px);margin:.35em 0}
h2{font-size:clamp(25px,3vw,38px);margin:1.4em 0 .5em}
h3{font-size:19px;font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.lede{font-size:clamp(17px,1.6vw,19.5px);color:var(--muted);max-width:64ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:0;border-radius:999px;padding:12px 24px;background:var(--accent);color:#fff;font:600 15px/1.1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px -12px var(--accent);background:color-mix(in srgb,var(--accent) 88%,#000)}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid color-mix(in srgb,var(--navy) 25%,transparent)}
.btn.ghost:hover{box-shadow:none;background:color-mix(in srgb,var(--navy) 6%,transparent)}
.btn.light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn.light:hover{background:rgba(255,255,255,.08);box-shadow:none}
.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.ext::after{content:" ↗";font-size:.85em}

/* ---- Thanh menu ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(6,25,47,.97);border-bottom:1px solid rgba(212,175,106,.18);transition:background .2s,box-shadow .2s}
.nav.scrolled{background:rgba(6,25,47,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.nav-in{display:flex;align-items:center;gap:18px;height:70px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex-shrink:0}
.lg-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font:700 15px/1 "Playfair Display",Georgia,serif;letter-spacing:.02em}
.lg-txt b{display:block;font:700 19px/1.1 "Playfair Display",Georgia,serif;letter-spacing:.01em}
.lg-txt small{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu a.top,.dd-btn{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;color:#dfe5ee;font:500 15px/1 Inter,"Inter Fallback",system-ui,sans-serif;text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap}
.menu a.top:hover,.dd-btn:hover,.menu a.top[aria-current="page"],.dd.on>.dd-btn{color:var(--gold);background:rgba(212,175,106,.08)}
.dd{position:relative}
.dd-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .15s}
.dd-panel{position:absolute;left:0;top:calc(100% + 10px);min-width:300px;padding:8px;background:var(--card);border:1px solid #e9e3d7;border-top:2px solid var(--gold);border-radius:var(--r);box-shadow:0 26px 52px -24px rgba(6,25,47,.5);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd-panel a{display:block;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none}
.dd-panel a b{display:block;font-weight:600;color:var(--navy)}
.dd-panel a small{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:2px}
.dd-panel a:hover,.dd-panel a[aria-current="page"]{background:color-mix(in srgb,var(--gold) 14%,transparent)}
@media (hover:hover) and (min-width:1101px){.dd:hover>.dd-panel,.dd:focus-within>.dd-panel{opacity:1;visibility:visible;transform:none}.dd:hover .dd-btn svg{transform:rotate(180deg)}}
.dd.open>.dd-panel{opacity:1;visibility:visible;transform:none}.dd.open .dd-btn svg{transform:rotate(180deg)}
.join{min-height:42px;padding:10px 18px;font-size:14.5px}
.m-cta{display:none}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(212,175,106,.4);border-radius:12px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){
  .burger{display:flex;margin-left:auto}
  .join{display:none}
  .menu{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 18px;background:var(--navy);border-bottom:1px solid rgba(212,175,106,.25);max-height:calc(100vh - 70px);overflow:auto}
  .menu.open{display:flex}
  .menu a.top,.dd-btn{width:100%;justify-content:space-between;padding:14px 8px;font-size:16px}
  .dd-panel{position:static;min-width:0;box-shadow:none;border:0;border-left:2px solid var(--gold);border-radius:0;padding:0 0 0 10px;margin:0 0 6px 8px;display:none;opacity:1;visibility:visible;transform:none;background:transparent}
  .dd.open>.dd-panel{display:block}
  .dd-panel a{color:#dfe5ee}.dd-panel a b{color:#fff;font-weight:500}
  .dd-panel a small{display:none}
  .menu .m-cta{display:flex;margin-top:12px}
}

/* ---- Khối đầu trang (nền navy, ảnh tách nền) ---- */
main{min-height:60vh}
.crumbs{max-width:1180px;margin:14px auto 0;padding:0 20px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 78% 30%,#12345c 0%,var(--navy) 60%);color:#e8edf4;padding:0}
.hero::before{content:"";position:absolute;right:6%;top:12%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,106,.30),transparent 62%);animation:troi 16s ease-in-out infinite alternate;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
@keyframes troi{to{transform:translate(-50px,40px) scale(1.06)}}
.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:24px;min-height:min(640px,82vh)}
.hero-txt{padding:72px 0 64px;align-self:center}
.hero h1{color:#fff;margin:.3em 0 .25em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{color:#c3cddb}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-img{position:relative;align-self:end;justify-self:center;width:min(100%,430px)}
.hero-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.hero-img .ring{position:absolute;left:50%;top:14%;width:86%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(212,175,106,.45)}
.hero-img figcaption{position:absolute;left:-8px;bottom:56px;padding:10px 14px;border-radius:12px;background:rgba(6,25,47,.82);border:1px solid rgba(212,175,106,.4);font-size:13px;line-height:1.4;color:#e8edf4;backdrop-filter:blur(8px);max-width:230px}
.hero-img figcaption b{color:var(--gold);display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.hero.sub .hero-in{min-height:0;grid-template-columns:1.3fr .7fr}
.hero.sub .hero-txt{padding:56px 0 52px}
.hero.sub .hero-img{width:min(100%,330px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border-top:1px solid rgba(212,175,106,.25)}
.stats div{padding:16px 14px 0 0}
.stats b{display:block;font:700 clamp(24px,2.6vw,32px)/1.1 "Playfair Display",Georgia,serif;color:var(--gold)}
.stats span{display:block;font-size:13px;color:#aab6c7;margin-top:4px}
@media (max-width:860px){
  .hero-in,.hero.sub .hero-in{grid-template-columns:1fr;min-height:0;gap:0}
  .hero-txt,.hero.sub .hero-txt{padding:44px 0 8px}
  .hero-img{width:min(78%,330px)}
  .hero.sub .hero-img{width:min(62%,250px)}
  .hero-img figcaption{left:-14px;right:auto;bottom:24px;max-width:180px;font-size:12px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---- Khối nội dung ---- */
section{padding:28px 0}
.sec{padding:64px 0}
.sec-head{max-width:760px;margin-bottom:24px}
.sec-head h2{margin:.35em 0 .3em}
.band{background:var(--navy);color:#cfd8e6}
.band h2,.band h3{color:#fff}
.band .lede,.band p{color:#b9c4d4}
.band .card{background:rgba(255,255,255,.04);border-color:rgba(212,175,106,.22);color:#dfe5ee}
.band .card p{color:#b9c4d4}
.band a.card:hover{border-color:var(--gold)}
.paper{background:#fffdf9;border-top:1px solid #ece5d6;border-bottom:1px solid #ece5d6}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid,.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid,.grid.g2,.grid.g4{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--card);border:1px solid #ebe5d9;border-radius:var(--r);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
a.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 55%,#ebe5d9);box-shadow:0 20px 38px -26px rgba(6,25,47,.5)}
.card h3{margin:.1em 0}
.card img{border-radius:calc(var(--r) - 6px);margin:-8px -8px 4px;width:calc(100% + 16px);max-width:none}
.card p{margin:0;color:var(--muted)}
.card .more{margin-top:auto;padding-top:8px;font-weight:600;color:var(--accent);font-size:14.5px}
.num{font:700 15px/1 "Playfair Display",Georgia,serif;color:var(--accent);letter-spacing:.06em}
.tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.meta{font-size:13px;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:20px}.split.rev>:first-child{order:0}}
.portrait{position:relative;max-width:420px;margin:0 auto;padding:22px 22px 0;border-radius:24px;background:radial-gradient(circle at 50% 35%,#163d69,var(--navy) 70%);overflow:hidden}
.portrait::before{content:"";position:absolute;left:50%;top:10%;width:80%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(212,175,106,.45)}
.portrait img{position:relative;display:block;width:100%;height:auto}
.quote{margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid var(--gold);font:600 clamp(20px,2.2vw,26px)/1.45 "Playfair Display",Georgia,serif;color:var(--navy)}
.quote cite{display:block;margin-top:8px;font:500 14px/1.4 Inter,system-ui,sans-serif;color:var(--muted);font-style:normal}
.band .quote{color:#fff}
.checks{list-style:none;padding:0;margin:14px 0}
.checks li{position:relative;padding:6px 0 6px 28px}
.checks li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* ---- Dòng thời gian ---- */
.timeline{position:relative;list-style:none;margin:20px 0;padding:0 0 0 30px;max-width:820px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--gold),color-mix(in srgb,var(--gold) 20%,transparent))}
.timeline li{position:relative;padding:0 0 28px}
.timeline li::before{content:"";position:absolute;left:-27px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.timeline .yr{font:700 22px/1.1 "Playfair Display",Georgia,serif;color:var(--accent)}
.timeline h3{margin:.25em 0 .3em}
.timeline p{margin:0;color:var(--muted)}

/* ---- Truyền thông ---- */
.media{display:flex;flex-direction:column;overflow:hidden;padding:0}
.media .thumb{position:relative;aspect-ratio:16/9;background:#0b2545}
.media .thumb img{display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;max-width:100%}
.media .thumb::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(6,25,47,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4AF6A' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center/30px no-repeat;border:1px solid rgba(212,175,106,.6)}
.media .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid #dcd3c2;background:#fff;border-radius:999px;padding:9px 15px;font:500 14px/1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.post-body{max-width:780px}
.post-body h2{font-size:clamp(23px,2.6vw,30px)}
.post-body table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;font-size:15.5px}
.post-body th,.post-body td{border-bottom:1px solid #e6dfd1;padding:10px;text-align:left;vertical-align:top}
.post-body th{color:var(--navy)}
.post-body figure{margin:24px 0}.post-body figcaption{font-size:13px;color:var(--muted)}
details.faq{border:1px solid #e6dfd1;border-radius:12px;background:var(--card);margin:10px 0;padding:0 18px}
details.faq summary{cursor:pointer;font-weight:600;padding:15px 0;color:var(--navy)}
details.faq[open] summary{color:var(--accent)}
.cta-box{margin:40px 0;padding:30px;border-radius:var(--r);background:var(--navy);color:#cfd8e6;border:1px solid rgba(212,175,106,.35)}
.cta-box h2{margin-top:0;color:#fff}
.cta-box p{color:#b9c4d4}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cta-band h2{margin:0}
.note{font-size:14px;color:var(--muted)}

/* ---- Chân trang, nút nổi ---- */
.foot{padding:52px 0 96px;background:#041222;color:#b9c4d4;border-top:1px solid rgba(212,175,106,.25)}
.foot a,.foot .linkbtn{color:#fff}
.foot-in{display:grid;grid-template-columns:1.2fr 1.1fr 1fr;gap:32px}
.foot h3{color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-family:Inter,system-ui,sans-serif}
.foot p{margin:.35em 0;font-size:15px}
.foot-name{font:700 24px/1.2 "Playfair Display",Georgia,serif;color:#fff}
.foot-quote{font-style:italic;color:#8f9db1}
.copy{font-size:13px;opacity:.7;margin-top:28px}
@media (max-width:860px){.foot-in{grid-template-columns:1fr}}
.float-cta{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;gap:10px}
.float-cta a{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;color:#fff;font-weight:700;font-size:13px;text-decoration:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.55)}
.fz{background:#0068ff}.fp{background:var(--accent)}

/* ---- Form trượt, cookie ---- */
.drawer{position:fixed;inset:0;z-index:60}
.drawer-bg{position:absolute;inset:0;background:rgba(4,18,34,.6)}
.drawer-box{position:absolute;right:0;top:0;bottom:0;width:min(460px,100%);background:#fff;padding:28px 24px;overflow:auto;animation:vao .25s ease-out;border-left:3px solid var(--gold)}
.drawer-box h2{margin:.2em 0 .2em;font-size:28px}
.drawer-sub{font-size:14.5px;color:var(--muted);margin:0 0 6px}
@keyframes vao{from{transform:translateX(30px);opacity:0}}
.drawer-x{position:absolute;right:14px;top:10px;border:0;background:none;font-size:30px;cursor:pointer;color:var(--navy)}
form label{display:grid;gap:6px;margin:12px 0;font-size:14px;font-weight:500}
form .opt{font-weight:400;color:var(--muted)}
form input,form textarea,form select{font:inherit;font-size:16px;padding:12px;border:1px solid #d8d0c0;border-radius:10px;width:100%;background:#fff;color:var(--ink)}
form .consent{grid-template-columns:auto 1fr;align-items:start;font-weight:400;font-size:13px;color:var(--muted)}
form .consent input{width:auto;margin-top:3px}
.hp{position:absolute!important;left:-9999px!important}
.form-msg{min-height:1.4em;font-size:14px}
.form-msg.err{color:#c62828}.form-msg.ok{color:#1b7f3b}
.ck-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px;background:#fff;border:1px solid #e6dfd1;border-radius:16px;box-shadow:0 18px 40px -20px rgba(0,0,0,.45);font-size:14px}
.ck-bar p{flex:1 1 300px;margin:0}

@media (max-width:600px){
  body{font-size:16px}
  .sec{padding:48px 0}
  .lg-txt small{font-size:10.5px}
  .card{padding:20px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
button.card{text-align:left;font:inherit;cursor:pointer;width:100%}
button.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 55%,#ebe5d9);box-shadow:0 20px 38px -26px rgba(6,25,47,.5)}
.foot .foot-name{font:700 26px/1.2 "Playfair Display","Serif Fallback",Georgia,serif;color:#fff;margin-bottom:8px}
.foot .copy{margin:28px auto 0;font-size:13px}
@media (max-width:600px){.float-cta{right:12px;bottom:12px;gap:8px}.float-cta a{width:46px;height:46px;font-size:12px}}

.float-cta{transition:opacity .3s}

/* ---- Nút Messenger, khung chat n8n (tải chậm, màu thương hiệu) ---- */
.fm{background:linear-gradient(45deg,#0099ff,#a033ff)}
body.co-chat .float-cta{bottom:84px}
#n8n-chat{--chat--color-primary:#B8893B;--chat--color-primary-shade-50:#a07732;--chat--color-primary-shade-100:#8a6629;--chat--color-secondary:#0B2545;--chat--color-dark:#06192F;
  --chat--header--background:#06192F;--chat--header--color:#fff;--chat--toggle--size:56px;--chat--toggle--background:#06192F;--chat--toggle--hover--background:#0B2545;--chat--toggle--active--background:#0B2545;
  --chat--message--bot--background:#fff;--chat--message--user--background:#B8893B;--chat--message--user--color:#fff;--chat--window--width:380px;--chat--window--height:560px;--chat--border-radius:14px;--chat--spacing:16px;font-family:Inter,system-ui,sans-serif}
#n8n-chat .chat-window-toggle{box-shadow:0 10px 24px -10px rgba(0,0,0,.6);border:1px solid rgba(212,175,106,.55)}
body:has(.mr-stage):not(.qua-mr) #n8n-chat .chat-window-toggle{opacity:0;pointer-events:none}
@media (max-width:600px){#n8n-chat{--chat--toggle--size:50px;--chat--window--width:calc(100vw - 24px);--chat--window--height:min(560px,calc(100dvh - 110px));--chat--spacing:12px}body.co-chat .float-cta{bottom:72px}}
#n8n-chat .chat-title{margin:0;font:700 19px/1.3 Inter,system-ui,sans-serif;color:#fff}
#n8n-chat .chat-header p{color:#cfd8e6}
.so-do{margin:26px 0}.so-do svg{display:block;width:100%;height:auto;border-radius:16px}

/* ---- Độ tương phản (WCAG AA 4.5:1): chữ nhấn nhỏ trên nền sáng dùng đồng đậm; nút vàng dùng chữ navy ---- */
:root{--accent-ink:#86601F}
.eyebrow,.tag,.num,.card .more,details.faq[open] summary,.timeline .yr{color:var(--accent-ink)}
.band .eyebrow,.band .tag,.band .num,.band .card .more,.hero .eyebrow,.hero .tag,.cta-box .tag,.foot .tag{color:var(--gold)}
.btn,.fp{color:var(--navy)}
.btn:hover{color:var(--navy)}
.btn.ghost{color:var(--navy)}.btn.light{color:#fff}
.dd-panel a b{color:var(--navy)}
.float-cta .fp{color:var(--navy)}

/* ===== Giao diện biên tập theo mẫu MAREN (23/10/2026): giữ màu navy + vàng đồng của thương hiệu.
   Chữ thân và tiêu đề: Inter Tight. Logo, chữ nhấn <em>, chữ chìm cỡ lớn: Playfair Display nghiêng.
   Đường kẻ trắng mảnh chia khung, nút tròn kiểu kính, ảnh polaroid nghiêng. Khối đầu trang chủ dùng lớp mr-. ===== */
:root{--r:8px;--sans:"Inter Tight","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;--serif-i:"Playfair Display","Serif Fallback",Georgia,serif;
  --line:rgba(255,255,255,.24);--glass:rgba(11,37,69,.34);--star:#F4B8A2;--sky:url(/assets/img/anh/hero-nen.jpg)}
body{font-family:var(--sans);font-size:17px}
h1,h2{font-family:var(--sans);font-weight:300;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(36px,5.2vw,68px)}
h2{font-size:clamp(28px,3.4vw,46px)}
h3{font-family:var(--sans);font-weight:500;letter-spacing:-.01em;font-size:20px}
h1 em,h2 em{font-family:var(--serif-i);font-style:italic;font-weight:400;letter-spacing:-.01em}
h2 em{color:var(--accent-ink)}
.eyebrow{font:500 12px/1.2 var(--sans);letter-spacing:.22em}
.eyebrow::before{content:"✦";width:auto;height:auto;background:none;font-size:15px;letter-spacing:0;color:var(--accent)}
.tag{letter-spacing:.16em;font-weight:500}
.btn{font:500 15px/1.1 var(--sans);background:var(--navy);color:#fff;padding:13px 26px;min-height:48px}
.btn:hover{background:var(--primary);color:#fff;box-shadow:0 14px 30px -16px rgba(6,25,47,.75)}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid rgba(6,25,47,.28)}
.btn.ghost:hover{background:rgba(6,25,47,.05);color:var(--navy)}
.hero .btn,.band .btn,.cta-box .btn{background:#fff;color:var(--navy)}
.hero .btn:hover,.band .btn:hover,.cta-box .btn:hover{background:#f3ede2;color:var(--navy)}
.btn.light,.hero .btn.ghost,.band .btn.ghost{background:var(--glass);color:#fff;border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.light:hover,.hero .btn.ghost:hover,.band .btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.chip{font-family:var(--sans)}
.quote{font:italic 400 clamp(22px,2.4vw,30px)/1.4 var(--serif-i)}
.quote cite{font-family:var(--sans)}
.timeline .yr{font:italic 500 24px/1.1 var(--serif-i)}
.num{font:italic 500 16px/1 var(--serif-i)}
.stats b{font:italic 500 clamp(26px,2.8vw,34px)/1.1 var(--serif-i)}
.card{border-color:#e6dfd2}
.paper{background:#fbf8f2}
details.faq{border-radius:var(--r)}
.drawer-box h2{font-size:30px}
form input,form textarea,form select{border-radius:8px}

/* ---- Thanh menu: logo chữ nghiêng, mục chữ in hoa ngăn bằng đường kẻ dọc, hai nút tròn kiểu kính ---- */
.nav{background:var(--navy);border-bottom:1px solid var(--line)}
.nav.scrolled{background:rgba(6,25,47,.9)}
.nav-in{height:72px;gap:0}
.logo{font:italic 500 21px/1 var(--serif-i);letter-spacing:.02em;color:#fff;white-space:nowrap;padding-right:24px}
.menu{gap:0}
.menu>a.top,.menu>.dd>.dd-btn{padding:10px 17px;border-radius:0;color:#fff;font:400 12px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase}
.menu>a.top,.menu>.dd{border-left:1px solid var(--line)}
.menu>a.top[href="/"]{display:none}
.menu>a.top[href="/"]+*{border-left:0}
.menu>a.top:hover,.menu>.dd>.dd-btn:hover,.menu>a.top[aria-current="page"],.dd.on>.dd-btn{color:var(--gold);background:none}
.dd-panel{border-top:1px solid var(--gold)}
.dd-panel a b{font-family:var(--sans);font-weight:500}
.nav-ic{display:flex;gap:10px;margin-left:20px}
.ic{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,border-color .2s,color .2s}
.ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic:hover{background:rgba(255,255,255,.16);border-color:var(--gold);color:var(--gold)}
@media (max-width:1100px){
  .nav-in{height:64px}
  .nav-ic{margin-left:auto}
  .burger{margin-left:10px;border-color:rgba(255,255,255,.3);border-radius:50%}
  .menu{top:64px;max-height:calc(100vh - 64px)}
  .menu>a.top,.menu>.dd{border-left:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .menu>a.top[href="/"]{display:flex}
  .menu>a.top,.menu>.dd>.dd-btn{padding:16px 6px;font-size:13px}
}
@media (max-width:600px){.logo{font-size:16.5px;padding-right:8px}.ic,.burger{width:40px;height:40px}.nav-ic{gap:8px}.burger{margin-left:8px}}
@media (max-width:359px){.nav-ic .ic[href^="tel"]{display:none}}

/* ---- Khối đầu các trang con: nền trời chạng vạng, đường kẻ chia khung, chữ chìm "Nguyễn Đức" sau ảnh ---- */
.hero{color:#fff;background:
  linear-gradient(var(--line),var(--line)) 17.37% 0/1px 100% no-repeat,
  linear-gradient(var(--line),var(--line)) 73.04% 0/1px 100% no-repeat,
  linear-gradient(var(--line),var(--line)) 0 64%/100% 1px no-repeat,
  #06192F var(--sky) 50% 100%/cover no-repeat}
.hero::before{content:"Nguyễn Đức";left:50%;right:auto;top:auto;bottom:-.2em;width:auto;height:auto;border-radius:0;background:none;transform:translateX(-50%);animation:none;
  font:italic 400 clamp(110px,17vw,250px)/1 var(--serif-i);letter-spacing:-.02em;color:rgba(255,255,255,.1);white-space:nowrap;z-index:0}
.hero::after{display:none}
.hero-in{z-index:1}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(6,25,47,.35)}
.hero h1 em{font-style:italic;color:#fff}
.hero .lede{color:rgba(255,255,255,.86)}
.hero .eyebrow{color:#fff}.hero .eyebrow::before{color:var(--star)}
.hero-img .ring{display:none}
.hero-img img{filter:drop-shadow(0 0 16px rgba(232,190,130,.25)) drop-shadow(0 30px 40px rgba(0,0,0,.4))}
.hero-img figcaption{background:var(--glass);border-color:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.crumbs:has(+ .hero){position:absolute;left:0;right:0;z-index:5;margin-top:14px;color:rgba(255,255,255,.7)}
.crumbs:has(+ .hero) a{color:rgba(255,255,255,.85)}
main{position:relative}

/* ---- Khối nền tối, hộp kêu gọi, ảnh chân dung kiểu polaroid, chân trang có chữ chìm ---- */
.band,.cta-box{background:linear-gradient(rgba(6,25,47,.78),rgba(6,25,47,.9)),#06192F var(--sky) 50% 100%/cover no-repeat}
.band .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
.portrait{max-width:400px;padding:12px 12px 52px;border-radius:2px;background:#fbf8f2;overflow:visible;transform:rotate(-3deg);box-shadow:0 30px 50px -28px rgba(6,25,47,.6)}
.portrait::before{display:none}
.portrait img{background:linear-gradient(#0B2545,#3a3c58 55%,#c4925c);padding-top:18px}
.portrait::after{content:"Nguyễn Đức";position:absolute;left:0;right:0;bottom:12px;text-align:center;font:500 24px/1 "Dancing Script",cursive;color:#3a3a48}
.foot{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.foot h3{font-family:var(--sans);font-weight:500;letter-spacing:.2em}
.foot .foot-name{font:italic 500 28px/1.2 var(--serif-i)}
.foot-wm{margin:30px 0 -.28em;text-align:center;font:italic 400 clamp(84px,15vw,230px)/1 var(--serif-i);letter-spacing:-.02em;color:rgba(255,255,255,.06);white-space:nowrap;user-select:none;pointer-events:none}

/* ---- Trang chủ: thanh menu trong suốt nằm trên khối đầu, đổi nền khi cuộn ---- */
body:has(.mr-stage) #site-nav{position:fixed;left:0;right:0;top:0;background:transparent}
body:has(.mr-stage) #site-nav.scrolled{background:rgba(6,25,47,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body:has(.mr-stage):not(.qua-mr) .float-cta{opacity:0;pointer-events:none}

/* ---- Khối đầu trang chủ (mẫu MAREN, khung 1155×767): ảnh phủ kín một màn hình ---- */
.mr-stage{--u:min(calc(100vw / 1155),calc(100vh / 767));--L:calc(34 * var(--u));position:relative;height:100vh;min-height:560px;padding:0;overflow:hidden;background:#06192F;color:#fff;isolation:isolate}
@supports (height:100svh){.mr-stage{--u:min(calc(100vw / 1155),calc(100svh / 767));height:100svh}}
.mr-scene{position:absolute;inset:0;z-index:0}
.mr-sky{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%}
.mr-person{position:absolute;z-index:2;bottom:0;left:59%;height:83%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 0 18px rgba(232,190,130,.3));user-select:none}
.mr-wm{position:absolute;z-index:1;left:50%;bottom:calc(-58 * var(--u));transform:translateX(-50%);font:italic 400 calc(272 * var(--u))/1 var(--serif-i);letter-spacing:-.02em;color:rgba(255,255,255,.14);white-space:nowrap;pointer-events:none;user-select:none}
.mr-grid i{position:absolute;z-index:3;background:var(--line);pointer-events:none}
.mr-v1,.mr-v2{top:72px;bottom:0;width:1px}
.mr-v1{left:17.37%}.mr-v2{left:73.04%}
.mr-h{left:0;right:0;top:52.83%;height:1px}
.mr-title{position:absolute;z-index:4;left:var(--L);top:calc(176 * var(--u));margin:0;color:#fff;font:300 calc(64 * var(--u))/1.04 var(--sans);letter-spacing:-.035em;text-shadow:0 2px 26px rgba(6,25,47,.4);text-wrap:nowrap;white-space:nowrap}
.mr-l{display:block}
.mr-title em{font:italic 400 calc(94 * var(--u))/1 var(--serif-i);letter-spacing:-.02em}
.mr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mr-star{position:absolute;z-index:4;left:calc(73.04% + 28 * var(--u));top:calc(150 * var(--u));margin:0;font:500 calc(12.5 * var(--u))/1 var(--sans);letter-spacing:.24em}
.mr-star span{color:var(--star);font-size:1.6em;vertical-align:-.14em;margin-right:.4em;letter-spacing:0}
.mr-side{position:absolute;z-index:4;left:calc(73.04% + 28 * var(--u));right:var(--L);top:calc(52.83% + 32 * var(--u))}
.mr-side p{margin:0 0 calc(26 * var(--u));max-width:calc(268 * var(--u));font:400 calc(14.5 * var(--u))/1.6 var(--sans);color:rgba(255,255,255,.93);text-shadow:0 1px 12px rgba(6,25,47,.45)}
.mr-act{display:flex;align-items:center;gap:calc(10 * var(--u))}
.mr-pill{height:max(42px,calc(48 * var(--u)));padding:0 max(20px,calc(28 * var(--u)));border:0;border-radius:999px;background:#fff;color:var(--navy);font:500 max(14px,calc(14.5 * var(--u)))/1 var(--sans);white-space:nowrap;cursor:pointer;transition:background .2s,transform .2s}
.mr-pill:hover{background:#f3ede2;transform:translateY(-1px)}
.mr-round{display:grid;place-items:center;flex:none;width:max(42px,calc(48 * var(--u)));height:max(42px,calc(48 * var(--u)));border-radius:50%;background:var(--glass);border:1px solid rgba(255,255,255,.42);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,transform .2s}
.mr-round:hover{background:rgba(255,255,255,.18);transform:translateX(2px)}
.mr-round svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mr-season{position:absolute;z-index:4;left:var(--L);bottom:calc(34 * var(--u));margin:0;font:500 calc(11.5 * var(--u))/1.75 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.mr-season span{display:block}
.mr-polaroid{position:absolute;z-index:5;left:calc(122 * var(--u));top:calc(52.83% + 22 * var(--u));width:calc(150 * var(--u));margin:0;padding:calc(8 * var(--u)) calc(8 * var(--u)) 0;background:#fbf8f2;box-shadow:0 calc(22 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.38);transform:rotate(-13deg);transform-origin:50% 0}
.mr-polaroid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mr-polaroid figcaption{padding:calc(9 * var(--u)) 0 calc(12 * var(--u));text-align:center;font:500 calc(18 * var(--u))/1 "Dancing Script",cursive;color:#3a3a48}
.mr-stage a:focus-visible,.mr-stage button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Điện thoại, máy tính bảng dọc: ảnh phủ màn hình, chữ chảy lại phía trên và phía dưới người, vừa một màn hình */
@media (max-width:820px) and (orientation:portrait),(max-width:560px){
  .mr-stage{--u:calc(100vw / 390);--L:20px;min-height:600px}
  .mr-stage::after{content:"";position:absolute;inset:auto 0 0 0;z-index:3;height:46%;background:linear-gradient(rgba(6,25,47,0),rgba(6,25,47,.82) 62%);pointer-events:none}
  .mr-person{height:61%;left:60%}
  .mr-v1,.mr-v2{top:64px}
  .mr-h{top:auto;bottom:calc(200 * var(--u))}
  .mr-star{left:var(--L);top:calc(64px + 26 * var(--u));font-size:calc(11.5 * var(--u))}
  .mr-title{top:calc(64px + 54 * var(--u));font-size:calc(42 * var(--u))}
  .mr-title em{font-size:calc(54 * var(--u))}
  .mr-side{left:var(--L);right:var(--L);top:auto;bottom:calc(24 * var(--u));z-index:6}
  .mr-side p{max-width:34ch;margin-bottom:14px;font-size:calc(14.5 * var(--u))}
  .mr-season{display:none}
  .mr-polaroid{left:calc(18 * var(--u));top:auto;bottom:calc(214 * var(--u));width:calc(98 * var(--u))}
  .mr-polaroid figcaption{font-size:calc(12 * var(--u));white-space:nowrap}
  .mr-wm{font-size:calc(116 * var(--u));bottom:calc(196 * var(--u))}
}
@media (max-width:820px) and (orientation:portrait) and (min-width:561px){.mr-stage{--u:calc(100vw / 560)}}

/* Hiệu ứng mở đầu (chỉ giao diện chuyển động; ảnh đứng yên). Tắt khi bật giảm chuyển động. */
@keyframes mr-drop{from{opacity:0;transform:translateY(-16px)}}
@keyframes mr-rise{from{opacity:0;transform:translateY(.5em)}}
@keyframes mr-fade{from{opacity:0;transform:translateY(18px)}}
@keyframes mr-drawv{from{transform:scaleY(0)}}
@keyframes mr-drawh{from{transform:scaleX(0)}}
@keyframes mr-pol{0%{opacity:0;transform:translateY(-120px) rotate(6deg)}65%{opacity:1;transform:translateY(8px) rotate(-15deg)}100%{transform:rotate(-13deg)}}
body:has(.mr-stage) .nav-in>*{animation:mr-drop .7s cubic-bezier(.16,1,.3,1) backwards}
body:has(.mr-stage) .nav-in>:nth-child(2){animation-delay:.08s}
body:has(.mr-stage) .nav-in>:nth-child(3){animation-delay:.16s}
body:has(.mr-stage) .nav-in>:nth-child(4){animation-delay:.16s}
.mr-v1,.mr-v2{transform-origin:50% 0;animation:mr-drawv 1.2s .1s cubic-bezier(.65,0,.35,1) backwards}
.mr-h{transform-origin:0 50%;animation:mr-drawh 1.2s .25s cubic-bezier(.65,0,.35,1) backwards}
.mr-l{animation:mr-rise 1s cubic-bezier(.16,1,.3,1) backwards}
.mr-l:nth-of-type(2){animation-delay:.36s}.mr-l:nth-of-type(3){animation-delay:.48s}.mr-l:nth-of-type(4){animation-delay:.6s}
.mr-star{animation:mr-fade .8s .7s cubic-bezier(.16,1,.3,1) backwards}
.mr-side,.mr-season{animation:mr-fade .9s .85s cubic-bezier(.16,1,.3,1) backwards}
.mr-polaroid{animation:mr-pol 1.15s 1s cubic-bezier(.3,.7,.3,1) backwards}
.nav-in{max-width:none;padding:0 clamp(20px,2.95vw,48px)}
.menu .m-cta{background:#fff;color:var(--navy)}