/* Flow Group — giao diện dùng chung (PC) */
@font-face{font-family:"Gilroy";src:url("../fonts/gilroy-300.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Gilroy";src:url("../fonts/gilroy-400.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Gilroy";src:url("../fonts/gilroy-500.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Gilroy";src:url("../fonts/gilroy-600.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Gilroy";src:url("../fonts/gilroy-700.woff") format("woff");font-weight:700;font-display:swap}

:root{
  --gut:max(108px, calc((100% - 1224px) / 2));
  --navy:#0e2048; --blue:#18377c; --blue-d:#132b61; --gold:#c8a465;
  --mint:#63f7c6; --purple:#bd95f4; --yellow:#ffe470;
  --ink2:#4a5a80; --ink3:#6b7aa0; --line:#dbe0ec; --soft:#f7f8fb; --err:#b3261e;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:170px}
html.modal-lock{overflow:hidden}
body{margin:0;background:#fff;color:var(--navy);font-family:"Gilroy","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-width:1000px}
html[data-lang="zh"] body{font-family:"Gilroy","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
img{max-width:none}
button,input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}
.hp{position:absolute!important;left:-9999px!important;opacity:0;pointer-events:none}

/* ============ THANH ƯU ĐÃI + HEADER (cố định) ============ */
.site-top{position:sticky;top:0;z-index:100}
.promo-bar{position:relative;overflow:hidden;height:64px;background:var(--yellow);display:flex;align-items:center;justify-content:center;gap:20px;padding:0 80px;
  animation:promoIn .9s var(--ease) both, promoGlow 3.2s ease-in-out 1s infinite}
.promo-shine{position:absolute;top:0;bottom:0;left:-30%;width:22%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);animation:promoShine 3.6s ease-in-out 1.2s infinite;pointer-events:none}
.promo-badge{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:4px;background:var(--navy);font-size:11px;line-height:16px;font-weight:700;letter-spacing:.12em;color:#fff;animation:badgePulse 1.6s ease-in-out infinite}
.promo-spark{width:13px;height:13px;animation:spark 1.6s ease-in-out infinite}
.promo-text{position:relative;font-size:16px;line-height:24px;color:var(--navy)}
.promo-amount{font-weight:700;display:inline-block;animation:amountBlink 1.6s ease-in-out infinite}
.promo-cta{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:999px;background:var(--navy);color:#fff!important;font-size:14px;line-height:20px;font-weight:600;transition:transform .2s var(--ease)}
.promo-cta::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(14,32,72,.55);animation:ring 1.8s ease-out infinite}
.promo-cta:hover{transform:translateY(-1px) scale(1.04)}
.promo-cta svg{width:15px;height:15px;transition:transform .2s}
.promo-cta:hover svg{transform:translateX(3px)}
@keyframes promoIn{0%{transform:translateY(-100%);opacity:0}60%{transform:translateY(6%);opacity:1}80%{transform:translateY(-2%)}100%{transform:none}}
@keyframes promoGlow{0%,100%{background:var(--yellow)}50%{background:#fff08f}}
@keyframes promoShine{0%{left:-30%}55%,100%{left:130%}}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(14,32,72,0)}50%{box-shadow:0 0 0 4px rgba(14,32,72,.15)}}
@keyframes spark{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.35) rotate(45deg);opacity:.6}}
@keyframes amountBlink{0%,100%{color:var(--navy);transform:scale(1)}50%{color:#b3261e;transform:scale(1.06)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(14,32,72,.45)}80%,100%{box-shadow:0 0 0 12px rgba(14,32,72,0)}}

.site-header{height:88px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 40px;gap:24px;transition:box-shadow .25s}
.site-top.is-scrolled .site-header{box-shadow:0 6px 20px rgba(14,32,72,.08)}
.site-logo{flex-shrink:0;display:block}
.site-logo img{display:block;width:124px;height:32px}
.site-nav{flex-grow:1;display:flex;align-items:center;justify-content:center;gap:34px}
.site-nav>a,.nav-dd-trigger{position:relative;display:inline-flex;align-items:center;gap:5px;font-size:16px;line-height:24px;font-weight:500;color:var(--navy)}
.site-nav>a::after,.nav-dd-trigger::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.site-nav>a:hover::after,.nav-dd:hover .nav-dd-trigger::after,.site-nav a.is-current::after{transform:scaleX(1)}
.site-nav a.is-current{font-weight:600;color:var(--blue)}
.nav-dd-trigger svg{width:15px;height:15px;transition:transform .25s}
.nav-dd{position:relative}
.nav-dd:hover .nav-dd-trigger svg,.nav-dd:focus-within .nav-dd-trigger svg{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;top:calc(100% + 22px);left:50%;width:340px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(14,32,72,.16);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .2s var(--ease),visibility .2s}
.nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd-item{display:flex;gap:12px;align-items:stretch;padding:12px;border-radius:10px;transition:background .2s}
.dd-item:hover{background:var(--soft)}
.dd-bar{width:4px;border-radius:2px;flex-shrink:0}
.dd-body{display:flex;flex-direction:column;gap:4px}
.dd-body img{width:auto;display:block}
.dd-desc{font-size:13px;line-height:18px;color:var(--ink2);font-weight:500}
.dd-all{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:12px 14px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--blue)}
.dd-all svg{width:15px;height:15px}
.site-header-right{flex-shrink:0;display:flex;align-items:center;gap:16px}
.lang-switch{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:4px}
.lang-btn{padding:5px 12px;border-radius:999px;color:var(--ink2);font-size:13px;line-height:19px;font-weight:600;transition:background .2s,color .2s}
.lang-btn:hover{color:var(--blue)}
.lang-btn.is-active{background:var(--blue);color:#fff!important}
.lang-btn--dark{color:#b9c6e4}
.lang-btn--dark:hover{color:#fff}
.lang-btn--dark.is-active{background:#fff;color:var(--navy)!important}
.btn-primary{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:8px;background:var(--blue);color:#fff!important;font-size:15px;line-height:20px;font-weight:600;transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.btn-primary:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 8px 18px rgba(24,55,124,.25)}
.btn-primary svg{width:15px;height:15px;transition:transform .2s}
.btn-primary:hover svg{transform:translateX(3px)}

/* ============ HIỆU ỨNG CHUNG TRÊN NỘI DUNG ============ */
.frame a[style*="display: inline-flex"] svg,.frame a[style*="display: flex"] svg{transition:transform .2s var(--ease)}
.frame a:hover svg{transform:translateX(3px)}
.frame a[style*="border-radius: 8px"][style*="background"]{transition:transform .2s var(--ease),box-shadow .2s,filter .2s}
.frame a[style*="border-radius: 8px"][style*="background"]:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(14,32,72,.18);filter:brightness(1.05)}
.frame a[style*="border: 1px solid #7a88aa"]{transition:background .2s,border-color .2s,transform .2s}
.frame a[style*="border: 1px solid #7a88aa"]:hover{background:var(--soft);border-color:var(--blue)!important;transform:translateX(2px)}
.hero-cards a,.chart-node{transition:transform .3s var(--ease),box-shadow .3s}
.hero-cards a:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(14,32,72,.22)!important}
.chart-node{cursor:pointer;color:inherit}
@media (hover:hover){.chart-node:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.25)}}

/* xuất hiện khi cuộn */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* hero */
.hero-copy>*{opacity:0;transform:translateY(22px);animation:heroUp .9s var(--ease) forwards}
.hero-copy>*:nth-child(1){animation-delay:.25s}
.hero-copy>*:nth-child(2){animation-delay:.4s}
.hero-copy>*:nth-child(3){animation-delay:.55s}
.hero-copy>*:nth-child(4){animation-delay:.7s}
.hero-cards>div>a{opacity:0;transform:translateY(36px);animation:heroUp .9s var(--ease) forwards}
.hero-cards>div>a:nth-child(1){animation-delay:.85s}
.hero-cards>div>a:nth-child(2){animation-delay:.97s}
.hero-cards>div>a:nth-child(3){animation-delay:1.09s}
.hero-waves path{animation:wave 9s ease-in-out infinite alternate}
.hero-waves path:nth-child(2){animation-duration:11s}
.hero-waves path:nth-child(3){animation-duration:13s}
.hero-waves path:nth-child(4){animation-duration:10s;animation-direction:alternate-reverse}
@keyframes heroUp{to{opacity:1;transform:none}}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-40px)}}

/* ============ NÚT CHAT NỔI ============ */
.float-chat{position:fixed;right:22px;bottom:24px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fc-list{display:flex;flex-direction:column;align-items:flex-end;gap:8px;transform-origin:bottom right;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.float-chat.is-closed .fc-list{opacity:0;transform:translateY(10px) scale(.92);pointer-events:none;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
.fc-item{position:relative;display:flex;align-items:center;animation:fcIn .6s var(--ease) both}
.fc-item:nth-child(1){animation-delay:1.2s}.fc-item:nth-child(2){animation-delay:1.3s}.fc-item:nth-child(3){animation-delay:1.4s}.fc-item:nth-child(4){animation-delay:1.5s}
.fc-label{position:absolute;right:calc(100% + 8px);top:50%;white-space:nowrap;padding:5px 11px;border-radius:999px;background:#fff;box-shadow:0 4px 12px rgba(14,32,72,.18);font-size:12px;line-height:17px;font-weight:600;color:var(--navy);opacity:0;transform:translate(6px,-50%);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.fc-item:hover .fc-label,.fc-item:focus-visible .fc-label{opacity:1;transform:translate(0,-50%)}
.fc-icon{width:42px;height:42px;border-radius:999px;background:#fff;box-shadow:0 3px 10px rgba(14,32,72,.18);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),box-shadow .2s}
.fc-icon svg{width:20px;height:20px}
.fc-icon--gold{background:var(--gold);box-shadow:0 3px 10px rgba(14,32,72,.24);animation:phoneRing 2.4s ease-in-out 2s 2}
.fc-item:hover .fc-icon{transform:scale(1.08);box-shadow:0 6px 16px rgba(14,32,72,.26)}
.fc-toggle{width:28px;height:28px;margin-right:7px;border:0;border-radius:999px;background:rgba(14,32,72,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 10px rgba(14,32,72,.2);transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .2s,transform .2s;animation:fcIn .6s var(--ease) 1.6s both}
.fc-toggle:hover{background:var(--navy);transform:scale(1.08)}
.fc-toggle svg{width:14px;height:14px}
.fc-ico-chat{display:none}
.float-chat.is-closed .fc-toggle{width:46px;height:46px;margin-right:0;background:var(--navy);color:var(--gold);box-shadow:0 6px 18px rgba(14,32,72,.3)}
.float-chat.is-closed .fc-toggle svg{width:22px;height:22px}
.float-chat.is-closed .fc-ico-x{display:none}
.float-chat.is-closed .fc-ico-chat{display:block}
@keyframes fcIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes phoneRing{0%,100%{box-shadow:0 0 0 0 rgba(200,164,101,.6)}50%{box-shadow:0 0 0 10px rgba(200,164,101,0)}}

/* ============ MODAL / FORM 1 ============ */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(14,32,72,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s}
.modal-card{position:relative;width:680px;max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:18px;padding:36px 36px 28px;box-shadow:0 30px 80px rgba(14,32,72,.35);opacity:0;transform:translateY(18px) scale(.97);transition:opacity .22s,transform .3s var(--ease)}
.modal-card--wide{width:860px}
.modal.is-open .modal-backdrop{opacity:1}
.modal.is-open .modal-card{opacity:1;transform:none}
.modal-stripe{position:absolute;left:0;top:0;right:0;height:6px;background:linear-gradient(90deg,var(--mint) 0 33.33%,var(--purple) 33.33% 66.66%,var(--yellow) 66.66% 100%)}
.modal-close{position:absolute;right:14px;top:16px;width:40px;height:40px;border:none;border-radius:999px;background:transparent;color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.modal-close:hover{background:var(--soft);color:var(--navy)}
.modal-close svg{width:18px;height:18px}
.f1-head,.bk-head{display:flex;gap:18px;align-items:center;padding-right:30px}
.f1-avatar{width:64px;height:64px;border-radius:999px;border:1px solid var(--line);background:#fff;flex-shrink:0;object-fit:cover;box-shadow:0 6px 16px rgba(14,32,72,.2)}
.f1-title{margin:0;font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.f1-lead{margin:6px 0 0;font-size:15px;line-height:23px;color:var(--ink2)}
.f1-form{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.f1-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld-label{font-size:14px;line-height:20px;font-weight:600;color:var(--navy);padding:0}
.fld-label b{color:var(--err)}
.muted{font-weight:500;color:var(--ink3)}
.fld input,.fld textarea{height:50px;padding:0 14px;border:1px solid #b7c0d6;border-radius:8px;background:#fff;font-size:15px;line-height:24px;color:var(--navy);transition:border-color .2s,box-shadow .2s}
.fld textarea{height:auto;padding:12px 14px;resize:none}
.fld input:focus,.fld textarea:focus,[data-form="quick"] input:focus,[data-form="quick"] textarea:focus{outline:none;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(24,55,124,.14)}
.is-invalid{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(179,38,30,.1)!important}
.fld-err{min-height:0;font-size:12px;line-height:16px;color:var(--err);font-weight:500}
.fld-err:empty{display:none}
.f1-services{border:none;margin:0;padding:0}
.f1-services legend{margin-bottom:10px}
.chk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chk{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px 10px 14px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;background:#fff;font-size:14px;line-height:20px;font-weight:600;color:var(--navy);cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.chk:hover{background:var(--soft)}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk-box{width:20px;height:20px;flex-shrink:0;border:1.5px solid #9aa6c2;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.chk-box::after{content:"";width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.chk input:checked+.chk-box{background:var(--blue);border-color:var(--blue)}
.chk input:checked+.chk-box::after{opacity:1}
.chk:has(input:checked){background:color-mix(in srgb,var(--c) 16%,#fff);border-color:var(--c)}
.chk input:focus-visible+.chk-box{outline:2px solid var(--gold);outline-offset:2px}
.btn-submit,.btn-quick{position:relative;height:56px;border:none;border-radius:8px;background:var(--blue);color:#fff;font-size:16px;line-height:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.btn-submit:hover,.btn-quick:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 10px 22px rgba(24,55,124,.25)}
.btn-submit:disabled,.btn-quick:disabled{cursor:wait;opacity:.85;transform:none}
.btn-spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.is-loading .btn-spinner{display:inline-block}
.is-loading svg{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.form-msg{margin:0;font-size:14px;line-height:20px;font-weight:600}
.form-msg:empty{display:none}
.form-msg.is-ok{margin-top:14px;padding:12px 14px;border-radius:8px;background:#e6fbf3;color:#0b6b4a}
.form-msg.is-err{margin-top:14px;padding:12px 14px;border-radius:8px;background:#fdecea;color:var(--err)}
.f1-privacy{margin:0;font-size:12.5px;line-height:19px;color:var(--ink3)}
.f1-privacy a{font-weight:600;text-decoration:underline}
.f1-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 10px 10px}
.f1-done .f1-lead{font-size:17px;line-height:26px;color:var(--navy)}
.done-icon{width:72px;height:72px;border-radius:999px;background:var(--mint);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px;animation:pop .5s var(--ease)}
.done-icon svg{width:34px;height:34px}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.btn-outline{margin-top:22px;height:48px;padding:0 32px;border:1px solid var(--blue);border-radius:8px;background:#fff;color:var(--blue);font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-outline:hover{background:var(--soft)}
.bk-icon{width:56px;height:56px;border-radius:12px;background:#eaeef7;color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bk-icon svg{width:28px;height:28px}
.bk-visual{margin-top:22px;display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--navy);background:#fff;transition:box-shadow .25s,transform .25s var(--ease),border-color .25s}
.bk-visual:hover{color:var(--navy);border-color:#b7c0d6;box-shadow:0 14px 34px rgba(14,32,72,.14);transform:translateY(-2px)}
.bk-cal{padding:24px 26px;border-right:1px solid var(--line)}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between}
.bk-month{font-size:17px;font-weight:700}
.bk-nav{display:flex;gap:6px}
.bk-nav i{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;color:var(--ink2);background:var(--soft)}
.bk-grid{margin-top:16px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px 4px;text-align:center}
.bk-grid .wd{font-size:12px;font-weight:600;color:var(--ink3);padding-bottom:4px;text-transform:uppercase}
.bk-grid .d{height:36px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.bk-grid .is-off{color:#b4bccf;font-weight:500}
.bk-grid .is-free{color:var(--blue);background:#eaeef7}
.bk-grid .is-pick{color:#fff;background:var(--blue);box-shadow:0 4px 12px rgba(24,55,124,.3)}
.bk-legend{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3)}
.bk-legend .lg{width:10px;height:10px;border-radius:999px;display:inline-block}
.bk-legend .lg-free{background:#eaeef7;border:1px solid #b7c0d6}
.bk-legend .lg-pick{background:var(--blue);margin-left:10px}
.bk-slots{padding:24px 26px;background:var(--soft);display:flex;flex-direction:column}
.bk-slot-date{font-size:17px;font-weight:700}
.bk-slot-meta{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink2)}
.bk-slot-meta span{display:inline-flex;align-items:center;gap:8px}
.bk-slot-meta svg{width:16px;height:16px;color:var(--gold)}
.bk-slot-list{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #b7c0d6;border-radius:8px;background:#fff;font-size:14px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.slot.is-pick{background:var(--blue);border-color:var(--blue);color:#fff}
.bk-go{margin-top:auto;justify-content:center;height:50px;width:100%}
.bk-visual .bk-slot-list{margin-bottom:22px}
.bk-visual:hover .bk-go{background:var(--blue-d)}
.bk-ext-line{margin:14px 0 0;font-size:14px;line-height:20px;color:var(--ink2);text-align:center}
.bk-ext{font-weight:600;color:var(--blue);text-decoration:underline}
.bk-fallback{margin-top:22px;padding:28px;border-radius:12px;background:var(--soft);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.bk-fallback p{margin:0;font-size:16px;line-height:26px;color:var(--ink2)}

/* toast */
.toast{position:fixed;left:50%;bottom:36px;z-index:1100;max-width:520px;padding:14px 22px;border-radius:12px;background:var(--navy);color:#fff;font-size:15px;line-height:22px;font-weight:500;box-shadow:0 14px 34px rgba(14,32,72,.3);transform:translate(-50%,20px);opacity:0;transition:opacity .25s,transform .3s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ============ TRANG VỀ FLOW ============ */
.about-hero .hero-copy>*{animation-duration:1s}
.about-hero-art .sun{transform-origin:560px 150px;animation:sunGlow 6s ease-in-out infinite}
@keyframes sunGlow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.about-hero-art svg{animation:artIn 1.4s var(--ease) both}
@keyframes artIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.scroll-cue{color:inherit}
.scroll-cue:hover span{color:var(--blue)!important}
.scroll-cue-dot{animation:cueBob 2s ease-in-out infinite;transition:background .2s}
.scroll-cue:hover .scroll-cue-dot{background:var(--blue)!important}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.brand-cell{transition:transform .3s var(--ease)}
.brand-cell .brand-bar{transition:width .3s var(--ease)}
.brand-cell img{transition:transform .3s var(--ease)}
.brand-cell:hover .brand-bar{width:96px!important}
.brand-cell:hover img{transform:translateY(-3px)}
.dna-badge{transition:transform .25s var(--ease),box-shadow .25s}
.dna-badge:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,32,72,.25)}
.dna-card{color:inherit;transition:transform .25s var(--ease),box-shadow .25s}
.dna-card:hover{color:inherit;transform:translateY(-4px);box-shadow:0 14px 30px rgba(70,41,110,.14)}

/* chữ "flow" + mũi tên: tự vẽ khi cuộn tới */
.flow-word-line .draw{stroke-dasharray:1;stroke-dashoffset:1}
.flow-word-line .tip{opacity:0}
.flow-word-line.is-playing .draw{animation:draw 1.6s var(--ease) forwards}
.flow-word-line.is-playing .tip{animation:fadeIn .4s ease 1.4s forwards}

/* dòng chảy gỡ rối */
.river .tangle-line{stroke-dasharray:1;stroke-dashoffset:1}
.river .stream{stroke-dasharray:1;stroke-dashoffset:1}
.river .tip,.river .drops,.river .stream-shine,.river .stream-bg{opacity:0}
.river .knot{transform-origin:606px 94px;transform:scale(0)}
.river .knot-ring{transform-origin:606px 94px;opacity:0}
.river.is-playing .tangle-line{animation:draw 2s cubic-bezier(.5,.1,.4,1) forwards}
.river.is-playing .knot{animation:knotPop .5s var(--ease) 1.9s forwards}
.river.is-playing .knot-ring{animation:knotRing 2.4s ease-out 2.2s infinite}
.river.is-playing .stream{animation:draw 1.4s var(--ease) 2.2s forwards}
.river.is-playing .tip{animation:fadeIn .35s ease 3.4s forwards}
.river.is-playing .stream-bg{animation:fadeIn .8s ease 3s forwards,flowDash 2.4s linear 3s infinite}
.river.is-playing .stream-bg2{animation:fadeIn .8s ease 3.2s forwards,flowDash 3.2s linear 3.2s infinite}
.river.is-playing .stream-shine{animation:fadeIn .6s ease 3.5s forwards,shineRun 3.2s linear 3.5s infinite}
.river.is-playing .drops{animation:fadeIn .6s ease 3.6s forwards}
.river.is-playing .tangle{animation:tangleCalm 1.2s ease 3.4s forwards}
.river-motto{display:inline-block;opacity:.0;transform:translateY(8px);transition:opacity .8s ease 3.6s,transform .8s var(--ease) 3.6s}
.river-card:has(.river.is-playing) .river-motto{opacity:1;transform:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
@keyframes knotPop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes knotRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes flowDash{to{stroke-dashoffset:-48}}
@keyframes shineRun{from{stroke-dashoffset:580}to{stroke-dashoffset:0}}
@keyframes tangleCalm{to{opacity:.55}}

/* dòng thời gian 2026 */
.timeline .tl-start{stroke-dasharray:1;stroke-dashoffset:1}
.timeline .tl-stop{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.timeline .tl-now-ring{transform-box:fill-box;transform-origin:center;opacity:0}
.timeline.is-playing .tl-start{animation:draw 1s var(--ease) forwards}
.timeline.is-playing .tl-stop{animation:knotPop .45s var(--ease) forwards;animation-delay:calc(.9s + var(--i) * .22s)}
.timeline.is-playing .tl-dots{animation:flowDash 1.6s linear infinite}
.timeline.is-playing .tl-now-ring{animation:knotRing 2.2s ease-out 1s infinite}

@media (prefers-reduced-motion:reduce){
  .flow-word-line .draw,.river .tangle-line,.river .stream,.timeline .tl-start{stroke-dashoffset:0}
  .flow-word-line .tip,.river .tip,.river .drops,.river .stream-bg,.river .stream-shine{opacity:1}
  .river .knot,.timeline .tl-stop{transform:none}
  .river-motto{opacity:1;transform:none}
}


/* ============ TRANG DỊCH VỤ / FLOW ACCOUNTING ============ */
.svc-card,.lift-card{transition:transform .3s var(--ease),box-shadow .3s}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(14,32,72,.12)}
.lift-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(14,32,72,.12)!important}
.team-card{animation:artIn 1.2s var(--ease) .3s both}
.f1-context{display:flex;align-items:center;gap:8px;margin:18px 0 -6px;padding:10px 14px;border-radius:10px;background:#e6fbf3;font-size:14px;line-height:20px;color:#0b6e50}
.f1-context svg{width:16px;height:16px;flex-shrink:0}
.f1-context b{color:var(--navy);font-weight:700}

/* bộ chọn ngân sách */
.tier-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--blue);transition:width .45s var(--ease)}
.tier-btn{position:relative}
.tier-dot{display:block;width:18px;height:18px;margin:3px 0;border-radius:50%;background:#fff;border:2.5px solid #b9c4da;box-sizing:border-box;transition:all .25s var(--ease)}
.tier-btn.is-past .tier-dot{border-color:var(--blue)}
.tier-btn.is-active .tier-dot{width:24px;height:24px;margin:0;background:var(--blue);border:6px solid #fff;box-shadow:0 0 0 3px var(--blue)}
.tier-label{font-size:15px;line-height:24px;font-weight:500;color:#5a6a8c;text-align:center;transition:color .2s}
.tier-btn:hover .tier-label{color:var(--blue)}
.tier-btn:hover .tier-dot{border-color:var(--blue);transform:scale(1.12)}
.tier-btn.is-active .tier-label{font-size:16px;font-weight:700;color:var(--navy)}
.tier-btn.is-active:hover .tier-dot{transform:none}
.tier-pane.is-in{animation:paneIn .45s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 3 gói dịch vụ: rê chuột gói nào gói đó sáng & nổi lên; SCALE luôn nổi bật */
.pkg-row{align-items:center!important}
.pkg{transition:transform .35s var(--ease),box-shadow .35s,border-color .3s,filter .3s;align-self:stretch}
.pkg--featured{transform:scale(1.035);z-index:2}
.pkg:hover{transform:translateY(-12px) scale(1.05);box-shadow:0 34px 70px rgba(24,55,124,.24)!important;border-color:#18377c!important;z-index:3}
.pkg--featured:hover{transform:translateY(-12px) scale(1.07)}
.pkg-row:hover .pkg:not(:hover){filter:saturate(.85) brightness(.98)}
.pkg-row:hover .pkg--featured:not(:hover){filter:none}
.pkg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,rgba(99,247,198,.18),transparent 60%);opacity:0;transition:opacity .35s}
.pkg:hover::after{opacity:1}

/* danh mục 46 dịch vụ */
.svc-switch{position:relative;margin-top:18px;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#eef2fa}
.svc-switch button{position:relative;z-index:1;border:none;background:transparent;padding:8px 18px;border-radius:999px;font-size:13px;line-height:19px;font-weight:600;color:#33456e;cursor:pointer;transition:color .25s;white-space:nowrap}
.svc-switch button b{font-weight:700}
.svc-switch button.is-active{color:#0b6e50}
.svc-switch-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(14,32,72,.1);transition:transform .3s var(--ease)}
.svc-switch[data-pos="1"] .svc-switch-pill{transform:translateX(100%)}
.svc-tools{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.svc-hint{font-size:14px;line-height:20px;color:var(--ink3)}
.svc-expand{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--blue);cursor:pointer;transition:background .2s,border-color .2s}
.svc-expand:hover{background:var(--soft);border-color:var(--blue)}
.svc-grid{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.svc-grid.is-switching{animation:paneIn .4s var(--ease)}
.svc-col{display:flex;flex-direction:column;gap:28px}
.svc-group{border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#fff;transition:box-shadow .3s}
.svc-group:hover{box-shadow:0 12px 30px rgba(14,32,72,.07)}
.svc-gh{width:100%;display:flex;align-items:center;gap:14px;padding:20px 24px;background:#e6fbf3;border:none;border-bottom:1px solid #c9efe1;text-align:left;cursor:default;font:inherit}
.svc-code{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--navy);font-size:13px;font-weight:700;color:var(--mint)}
.svc-gname{flex-grow:1;font-size:18px;line-height:26px;font-weight:700;color:var(--navy)}
.svc-count{flex-shrink:0;font-size:13px;font-weight:600;color:#0b6e50}
.svc-chev{display:none;width:30px;height:30px;border-radius:999px;background:#fff;color:var(--blue);align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.svc-chev svg{width:16px;height:16px}
.svc-list{padding:6px 10px 12px}
.svc-grid[data-view="groups"] .svc-gh{cursor:pointer;border-bottom-color:transparent}
.svc-grid[data-view="groups"] .svc-gh:hover{background:#d8f8ec}
.svc-grid[data-view="groups"] .svc-chev{display:inline-flex}
.svc-grid[data-view="groups"] .svc-group:not(.is-open) .svc-list{display:none}
.svc-grid[data-view="groups"] .svc-group.is-open .svc-gh{border-bottom-color:#c9efe1}
.svc-grid[data-view="groups"] .svc-group.is-open .svc-chev{transform:rotate(180deg)}
.svc-grid[data-view="groups"] .svc-group.is-open .svc-list{animation:paneIn .35s var(--ease)}
.svc-item{border-bottom:1px solid #eef1f7}
.svc-item:last-child{border-bottom:none}
.svc-q{width:100%;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:transparent;border:none;border-radius:10px;cursor:pointer;text-align:left;font:inherit;transition:background .2s}
.svc-q:hover{background:var(--soft)}
.svc-num{flex-shrink:0;width:24px;font-size:13px;line-height:23px;font-weight:700;color:#0b6e50;font-variant-numeric:tabular-nums}
.svc-name{flex-grow:1;font-size:15px;line-height:23px;font-weight:600;color:var(--navy)}
.svc-plus{flex-shrink:0;margin-top:4px;transition:transform .25s var(--ease)}
.svc-plus svg{width:15px;height:15px;display:block}
.svc-item.is-open .svc-plus{transform:rotate(45deg)}
.svc-item.is-open .svc-q{background:#f3fbf8}
.svc-a{padding:4px 16px 22px 52px}
.svc-a.is-in{animation:paneIn .35s var(--ease)}
.svc-desc{margin:0;font-size:14.5px;line-height:25px;color:#33456e;text-align:justify}
.svc-block{margin-top:16px}
.svc-block p{margin:6px 0 0;font-size:14px;line-height:23px;color:#4a5a80}
.svc-lbl{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0b6e50}
.svc-lbl svg{width:15px;height:15px}
.svc-docs{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.svc-docs li{position:relative;padding-left:20px;font-size:14px;line-height:22px;color:var(--navy)}
.svc-docs li::before{content:"";position:absolute;left:3px;top:8px;width:7px;height:7px;border-radius:2px;background:var(--mint)}
.svc-steps{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;position:relative}
.svc-steps li{position:relative;display:flex;gap:12px;padding-bottom:10px}
.svc-steps li:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:1.5px;background:#c9efe1}
.st-n{flex-shrink:0;width:23px;height:23px;border-radius:999px;background:var(--navy);color:var(--mint);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.st-t{font-size:14px;line-height:22px;color:var(--navy);padding-top:1px}
.svc-meta{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc-chip{padding:12px 14px;border-radius:10px;background:var(--soft);display:flex;flex-direction:column;gap:6px}
.svc-chip .svc-lbl{color:var(--ink2)}
.svc-val{font-size:13.5px;line-height:21px;font-weight:600;color:var(--navy)}
.svc-cta{margin-top:16px;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:8px;background:var(--blue);color:#fff!important;font-size:14px;font-weight:600;transition:background .2s,transform .2s var(--ease)}
.svc-cta:hover{background:var(--blue-d);transform:translateY(-1px)}
.svc-cta svg{width:15px;height:15px}
.svc-item:target .svc-q{background:#e6fbf3}

/* FAQ */
.faq-q{transition:background .2s}
.faq-q:hover{background:var(--soft)!important}
.faq-plus{flex-shrink:0;display:block;margin-top:5px;transition:transform .25s var(--ease)}
.is-open>.faq-q .faq-plus{transform:rotate(45deg)}
.faq-a.is-in{animation:paneIn .35s var(--ease)}


/* ============ FLOW LEGAL ============ */
.perk-link{transition:transform .25s var(--ease),box-shadow .25s}
.perk-link:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.25)}
.perk-arrow{font-size:18px;color:#6b2fc4;transition:transform .25s}
.perk-link:hover .perk-arrow{transform:translateX(4px)}
.svc-switch--legal button.is-active{color:#6b2fc4}
.lg-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.lg-grid.is-switching{animation:paneIn .4s var(--ease)}
.lg-col{display:flex;flex-direction:column;gap:28px}
.lg-group{position:relative;border-radius:18px;border:1px solid var(--line);background:#fff;transition:box-shadow .3s,transform .3s var(--ease)}
.lg-group:hover{box-shadow:0 12px 30px rgba(70,41,110,.08)}
.lg-gh{display:flex;align-items:center;gap:14px;padding:20px 24px;background:#f4ecfe;border-bottom:1px solid #ddcdf6;border-radius:18px 18px 0 0}
.lg-code{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--navy);font-size:13px;font-weight:700;color:var(--purple)}
.lg-gname{flex-grow:1;font-size:18px;line-height:26px;font-weight:700;color:var(--navy)}
.lg-count{flex-shrink:0;font-size:13px;font-weight:600;color:#6b2fc4}
.lg-list{padding:6px 10px 4px}
.lg-sub{border-bottom:1px solid #efe9f8}
.lg-sub:last-child{border-bottom:none}
.lg-q{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;background:transparent;border:none;border-radius:10px;cursor:pointer;text-align:left;font:inherit;transition:background .2s}
.lg-q:hover{background:#faf6ff}
.lg-sname{flex-grow:1;font-size:15px;line-height:23px;font-weight:600;color:var(--navy)}
.lg-n{flex-shrink:0;min-width:24px;padding:2px 8px;border-radius:999px;background:#f4ecfe;font-size:12px;font-weight:700;color:#6b2fc4;text-align:center;font-variant-numeric:tabular-nums}
.lg-plus{flex-shrink:0;transition:transform .25s var(--ease)}
.lg-plus svg{width:15px;height:15px;display:block}
.lg-sub.is-open .lg-plus{transform:rotate(45deg)}
.lg-a{padding:0 16px 16px}
.lg-a.is-in{animation:paneIn .35s var(--ease)}
.lg-chips{display:flex;flex-wrap:wrap;gap:8px}
.lg-chip{display:inline-flex;padding:7px 13px;border-radius:8px;background:#f4ecfe;font-size:13px;line-height:19px;font-weight:500;color:#33246b;transition:background .2s,transform .2s}
.lg-chip:hover{background:#e9dcfc;transform:translateY(-1px)}
.lg-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 16px 16px;height:44px;border-radius:8px;border:1.5px dashed #cdb5f2;font-size:14px;font-weight:600;color:#6b2fc4!important;transition:background .2s,border-color .2s}
.lg-cta:hover{background:#faf6ff;border-color:#6b2fc4;border-style:solid}
.lg-cta svg{width:15px;height:15px}

/* phần được trỏ tới: sáng lên & nổi bật */
.target-badge{display:none}
.is-target{position:relative;z-index:2;animation:targetGlow 1.4s ease-out 3}
.lg-group.is-target,.svc-group.is-target,.svc-item.is-target{transform:translateY(-4px)}
.lg-group.is-target{border-color:#6b2fc4;box-shadow:0 0 0 4px rgba(189,149,244,.45),0 24px 50px rgba(107,47,196,.22)}
@keyframes targetGlow{0%{box-shadow:0 0 0 0 rgba(189,149,244,.9),0 24px 50px rgba(107,47,196,.22)}70%{box-shadow:0 0 0 18px rgba(189,149,244,0),0 24px 50px rgba(107,47,196,.22)}100%{box-shadow:0 0 0 4px rgba(189,149,244,.45),0 24px 50px rgba(107,47,196,.22)}}
.lg-group[data-target-kind="vn"].is-target-alias{border-color:#0e8f66;box-shadow:0 0 0 4px rgba(99,247,198,.55),0 24px 50px rgba(14,143,102,.22)}
.lg-group[data-target-kind="vn"].is-target-alias .lg-gh{background:#e6fbf3;border-bottom-color:#9fe9cd}
.lg-group[data-target-kind="intl"].is-target-alias{border-color:#c8a465;box-shadow:0 0 0 4px rgba(255,228,112,.65),0 24px 50px rgba(200,164,101,.25)}
.lg-group[data-target-kind="intl"].is-target-alias .lg-gh{background:#fff6d6;border-bottom-color:#f1dc8a}
.lg-group.is-target-alias{animation:none}
.lg-group.is-target-alias .target-badge{display:inline-flex;position:absolute;top:-16px;left:22px;z-index:3;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em;box-shadow:0 8px 20px rgba(14,32,72,.18);animation:pop .5s var(--ease)}
.target-badge svg{width:15px;height:15px}
.target-badge--vn{background:#0e2048;color:#63f7c6}
.target-badge--intl{background:#0e2048;color:#ffe470}
/* các vùng khác (ví dụ khối ưu đãi) khi được trỏ tới */
#uu-dai.is-target{animation:bandGlow 1.4s ease-out 3}
@keyframes bandGlow{0%{box-shadow:inset 0 0 0 0 rgba(255,228,112,.9)}60%{box-shadow:inset 0 0 0 10px rgba(255,228,112,.55)}100%{box-shadow:inset 0 0 0 0 rgba(255,228,112,0)}}
#uu-dai.is-target a[data-action]{animation:ring 1.4s ease-out 3}

/* ================= FLOWTOWN ================= */
/* sơ đồ bộ ba: vòng tròn bấm được */
.triad-hit{position:absolute;width:88px;height:88px;border-radius:50%;z-index:2;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.triad-hit:hover,.triad-hit:focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,.85),0 0 0 9px rgba(255,228,112,.35);transform:scale(1.04)}
/* panel ẩn: chỉ hiện khi được trỏ tới */
.tt-panel[hidden]{display:none!important}
.tt-panel.is-shown{animation:panelIn .6s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tt-bar{display:flex;align-items:center;gap:14px;padding:14px var(--gut);background:#0e2048;color:#fff;font-size:14px;line-height:20px;border-top:4px solid #ffe470}
.tt-bar-dot{width:9px;height:9px;border-radius:50%;background:#ffe470;box-shadow:0 0 0 4px rgba(255,228,112,.25);animation:badgePulse 2s infinite}
.tt-bar-label{font-weight:700;letter-spacing:.02em;flex-grow:1}
.tt-bar-switch{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid #45609c;color:#e6e9f1;font-weight:600;transition:background .2s,border-color .2s}
.tt-bar-switch:hover{background:#1b2f61;border-color:#ffe470;color:#fff}
.tt-bar-close{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:0;background:#ffe470;color:#2e2610;font:inherit;font-weight:700;cursor:pointer;transition:filter .2s}
.tt-bar-close:hover{filter:brightness(1.06)}
.tt-bar-close svg{width:15px;height:15px}
.tt-role{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;background:#ffe470;color:#2e2610;font-size:15px;font-weight:700}
/* nút khảo sát & báo giá */
.tt-quote{display:flex!important;width:fit-content;align-items:center;gap:10px;color:#18377c!important;text-decoration:underline;text-decoration-color:rgba(24,55,124,.3);text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.tt-quote:hover{color:#0e2048!important;text-decoration-color:#ffe470}
.tt-quote svg{transition:transform .2s}
.tt-quote:hover svg{transform:translateX(4px)}
/* thẻ tòa nhà */
.tt-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tt-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(14,32,72,.14)}
/* bản đồ */
.tt-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tt-map-fallback{position:absolute;left:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(14,32,72,.9);color:#fff;font-size:12px;font-weight:600}
.tt-map-fallback svg{width:14px;height:14px;color:#ffe470}
/* vùng được trỏ tới (FlowTown) */
#goi-can-ho-le.is-target,#uu-dai-8.is-target{animation:townGlow 1.4s ease-out 3;box-shadow:0 0 0 4px rgba(255,228,112,.75),0 24px 50px rgba(200,164,101,.3)}
#goi-can-ho-le.is-target{transform:translateY(-6px);transition:transform .4s var(--ease)}
@keyframes townGlow{0%{box-shadow:0 0 0 0 rgba(255,228,112,1),0 24px 50px rgba(200,164,101,.3)}70%{box-shadow:0 0 0 20px rgba(255,228,112,0),0 24px 50px rgba(200,164,101,.3)}100%{box-shadow:0 0 0 4px rgba(255,228,112,.75),0 24px 50px rgba(200,164,101,.3)}}
@media (prefers-reduced-motion:reduce){.tt-panel.is-shown,.tt-bar-dot{animation:none}}

/* ================= LIÊN HỆ ================= */
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label{display:flex;align-items:center;gap:12px;box-sizing:border-box;height:100%;padding:15px 16px;border-radius:10px;border:1px solid #dbe0ec;background:#fbfcfe;cursor:pointer;font-size:14px;line-height:21px;font-weight:600;color:#33456e;transition:border-color .2s,background .2s}
.opt label:hover{border-color:#9aa8c8}
.opt .box{flex-shrink:0;width:20px;height:20px;border-radius:6px;border:1.5px solid #c2ccdf;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.opt .box svg{opacity:0}
.opt .dot{flex-shrink:0;width:9px;height:9px;border-radius:999px}
.opt input:checked+label{border-color:#18377c;background:#eef2fa;color:#0e2048}
.opt input:checked+label .box{background:#18377c;border-color:#18377c}
.opt input:checked+label .box svg{opacity:1}
.opt input:focus-visible+label{outline:2px solid #18377c;outline-offset:2px}
form[data-form="contact"] input[name]:not([type=checkbox]),form[data-form="contact"] textarea{font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
form[data-form="contact"] input[name]:not([type=checkbox]):focus,form[data-form="contact"] textarea:focus{border-color:#18377c!important;box-shadow:0 0 0 3px rgba(24,55,124,.12)}
.addr-link{text-decoration:underline;text-decoration-color:rgba(200,164,101,.55);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.addr-link:hover{text-decoration-color:currentColor}
#tu-van-dich-vu.is-target,#hop-tac.is-target,#khao-sat.is-target{animation:townGlow 1.4s ease-out 3;box-shadow:0 0 0 4px rgba(255,228,112,.75),0 24px 50px rgba(200,164,101,.3)}

/* ================= PHÁP LÝ & CHÍNH SÁCH ================= */
.pl-doc .toc a{display:block;padding:7px 10px;border-radius:7px;font-size:13px;line-height:20px;font-weight:500;color:#4a5a80;transition:background .2s,color .2s}
.pl-doc .toc a:hover{background:#f2f5fb;color:#18377c}
.pl-doc .toc a.on{background:#eef2fa;font-weight:700;color:#0e2048}
.pl-doc .sec{scroll-margin-top:170px}
.pl-doc .sec h2{margin:0;font-size:25px;line-height:35px;font-weight:700;letter-spacing:-0.018em;color:#0e2048}
.pl-doc .sec .no{flex-shrink:0;font-size:13px;line-height:20px;font-weight:700;letter-spacing:0.06em;color:#c8a465}
.pl-doc .sec p{margin:14px 0 0 0;font-size:17px;line-height:31px;font-weight:400;color:#1f2d52;text-align:justify}
.pl-doc .li{display:flex;gap:13px;font-size:17px;line-height:31px;font-weight:400;color:#1f2d52}
.pl-doc .li i{flex-shrink:0;width:7px;height:7px;margin-top:12px;border-radius:999px;background:#c8a465;font-style:normal}
.pl-doc .rule{display:block;margin:30px 0 0 0;height:1px;background:#eceff6}
.pl-doc .th{box-sizing:border-box;padding:15px 20px;background:#f7f9fd;border-bottom:1px solid #e8ecf5;font-size:13px;line-height:21px;font-weight:700;color:#5a6a8c}
.pl-doc .td{box-sizing:border-box;padding:15px 20px;border-bottom:1px solid #e8ecf5;font-size:15px;line-height:24px;font-weight:500;color:#1f2d52}
.pl-aside{position:sticky;top:150px;align-self:flex-start}
.pl-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.pl-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,32,72,.1);border-color:#c8a465!important}
.ft-head-link{color:inherit!important}
.ft-head-link:hover{color:#ffe470!important}
/* dải cookie */
.cookie-bar{position:fixed;left:0;right:0;bottom:20px;z-index:60;display:flex;justify-content:center;padding:0 24px;pointer-events:none;opacity:0;transform:translateY(24px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cookie-bar.is-in{opacity:1;transform:none}
.cookie-bar[hidden]{display:none!important}
.cookie-card{pointer-events:auto;width:min(1080px,100%);display:flex;align-items:center;gap:30px;padding:22px 28px!important;box-shadow:0 18px 50px rgba(14,32,72,.22)!important}
.cookie-card a{font-weight:600;text-decoration:underline}
.cookie-card button:hover{filter:brightness(1.12)}
/* in / tải bản PDF tài liệu */
@media print{
  .site-top,.site-footer,footer,.float-chat,.cookie-bar,.modal,.toast,.pl-aside,[data-action="print"]{display:none!important}
  body{zoom:1!important}
  .pl-doc{min-height:0!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ================= ẢNH THẬT ================= */
.has-photo{background:#e8ecf4!important}
.ph-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;transition:transform .9s var(--ease)}
.has-photo>*:not(.ph-img){position:relative;z-index:1}
.has-photo>[style*="position: absolute"]{position:absolute!important}
.has-photo:hover>.ph-img{transform:scale(1.035)}
.ph-bg{z-index:0}
.ph-bg+div{background:linear-gradient(100deg,#0e2048 0%,rgba(24,55,124,.86) 38%,rgba(24,55,124,.55) 72%,rgba(14,32,72,.45) 100%)!important;opacity:1!important}
#thuong-hieu>.ph-bg+div{background:linear-gradient(180deg,rgba(14,32,72,.80),rgba(24,55,124,.88))!important}
/* thẻ bất động sản: ảnh dọc bên trái, nội dung bên phải */
.vcard-grid{grid-template-columns:1fr!important;row-gap:24px;align-items:stretch!important}
.vcard-grid>div{display:grid!important;grid-template-columns:340px minmax(0,1fr);align-items:stretch}
.vcard-grid--mgmt>div{grid-template-columns:260px minmax(0,1fr)}
.vcard-grid>div>.has-photo{height:auto!important;min-height:440px;border-bottom:0!important;border-right:1px solid #dbe0ec}
.vcard-grid--mgmt>div>.has-photo{min-height:300px}
.vcard-grid>div>:not(.has-photo){display:flex;flex-direction:column;justify-content:center}
/* thẻ tòa nhà dạng link (trang FlowTown) */
.vcard-grid>a{display:grid!important;grid-template-columns:340px minmax(0,1fr);align-items:stretch}
.vcard-grid>a>.has-photo{height:auto!important;min-height:460px;border-right:1px solid #f0e2bd}
.vcard-grid>a>:not(.has-photo){display:flex;flex-direction:column;justify-content:center}
/* xem ảnh toàn màn hình */
.lb-open{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,16,36,.92);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.lb.is-open{opacity:1}
.lb[hidden]{display:none!important}
.lb-img{max-width:min(1200px,86vw);max-height:84vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);object-fit:contain}
.lb-x,.lb-nav{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;border-radius:999px;display:flex;align-items:center;justify-content:center;font:inherit;transition:background .2s}
.lb-x:hover,.lb-nav:hover{background:rgba(255,228,112,.9);color:#0e2048}
.lb-x{top:24px;right:28px;width:46px;height:46px;font-size:28px;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:34px;line-height:1}
.lb-prev{left:28px}.lb-next{right:28px}
.lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#d6dae6;font-size:14px;font-weight:600;letter-spacing:.06em}
/* Liên hệ: ảnh nền phần mở đầu */
.ct-veil{position:absolute;inset:0;background:linear-gradient(100deg,#0e2048 0%,rgba(14,32,72,.9) 40%,rgba(14,32,72,.62) 70%,rgba(14,32,72,.5) 100%)}
/* mã QR tổng hợp kênh liên hệ */
.qr-card{flex-shrink:0;width:560px;display:flex;align-items:center;gap:22px;padding:18px 22px 18px 18px;border:1px solid #dbe0ec;border-radius:18px;background:#f7f9fd}
.qr-card img{flex-shrink:0;width:132px;height:132px;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(14,32,72,.1)}
.qr-eyebrow{font-size:11px;line-height:16px;font-weight:700;letter-spacing:.14em;color:#8a6d33}
.qr-card p{margin:8px 0 0;font-size:15px;line-height:24px;color:#4a5a80}
.qr-card .qr-note{margin-top:6px;font-size:13px;line-height:20px;color:#6b7aa0}
/* WeChat QR popup */
.modal-card--qr{max-width:440px;text-align:center}
.modal-card--qr .f1-lead{margin-top:8px}
.wc-qr{display:block;margin:18px auto 4px;width:300px;max-width:100%;height:auto;border-radius:14px;border:1px solid #dbe0ec}
/* kênh kết nối (Trang chủ) — lưới gọn, đồng bộ với trang Liên hệ */
.ch-wrap{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ch-direct{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ch-tile{box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:1px solid #dbe0ec;border-radius:12px;background:#fff;color:#0e2048;transition:border-color .2s,box-shadow .2s,transform .2s}
.ch-tile:hover{border-color:#18377c;box-shadow:0 8px 18px rgba(14,32,72,.08);transform:translateY(-1px)}
.ch-ico{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#eef2fa;display:flex;align-items:center;justify-content:center}
.ch-name{display:flex;flex-direction:column;min-width:0;font-size:14.5px;line-height:20px;font-weight:600;white-space:nowrap}
.ch-sub{font-size:11.5px;line-height:15px;font-weight:600;color:#6b7aa0;overflow:hidden;text-overflow:ellipsis}
.qr-card--inline{width:auto;padding:12px 16px 12px 12px;gap:16px}
.qr-card--inline img{width:104px;height:104px}
.qr-card--inline p{margin-top:6px;font-size:14px;line-height:22px}
.zalo-qr{flex-shrink:0;width:124px;height:124px;border-radius:12px;border:1px solid #dbe0ec;background:#fff;box-shadow:0 6px 16px rgba(14,32,72,.08)}

/* ngắt dòng đẹp: tiêu đề chia đều các dòng, đoạn văn tránh để một chữ lẻ ở dòng cuối */
main h1, main h2, main h3, main h4, .modal h2, .modal h3 { text-wrap: balance; }
main p, main li, main blockquote, main figcaption { text-wrap: pretty; }
/* canh trái thay vì canh đều: tránh khoảng trắng loang giữa các chữ ở cột hẹp */
main [style*="text-align: justify"] { text-align: left !important; }
/* danh mục Flow Legal: liệt kê từng hạng mục */
.lg-item{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:1px solid #efe9f8;font-size:15px;line-height:23px;font-weight:500;color:var(--navy)}
.lg-item:last-child{border-bottom:none}
.lg-tick{flex-shrink:0;margin-top:4px;display:inline-flex}
.lg-tick svg{width:15px;height:15px}
.lg-grid[data-view="groups"] .lg-list{display:none}
.lg-group[data-target-kind="vn"] .target-badge--intl,.lg-group[data-target-kind="intl"] .target-badge--vn{display:none!important}
/* Flow Legal: hai hình thức làm việc mở khung tương ứng */
.lg-mode{transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.lg-mode.is-active{border-color:#6b2fc4!important;box-shadow:0 0 0 3px rgba(189,149,244,.45),0 20px 44px rgba(107,47,196,.16);transform:translateY(-3px)}
.lg-panel{margin-top:36px}
#danh-muc.lg-panel{padding-top:36px;border-top:1px solid #ece4f8}
/* điện thoại / máy tính bảng: hiển thị nguyên khung PC thu nhỏ, chặn rung ngang do sai số làm tròn */
@media (hover:none) and (pointer:coarse){html,body{overflow-x:clip}}
/* chặn trình duyệt điện thoại tự phóng to chữ (làm vỡ tỉ lệ khung PC khi thu nhỏ) */
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}