/* Services panel detail view (canvas v3) */
.svc-detail { display: grid; gap: 10px; }
.svc-detail .badge { display: inline-block; border: 1px solid #ffd6db; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; color: #c1121f; }
body.modal-open { overflow: hidden; }

/* --- Enhancements: Services panel + button font (canvas v2 integration) --- */
button, .btn { font-family: "Times New Roman", Times, serif; }
.svc-panel-content { display: grid; gap: 12px; }
.svc-group { border: 1px solid var(--line, #eef2f7); border-radius: 12px; padding: 12px; background: #fff; }
.svc-group-title { font-weight: 700; color: var(--accent, #c1121f); margin-bottom: 8px; }
.svc-chip { display:inline-block; margin:4px 6px 0 0; }
.svc-chip .btn { font-size: 14px; padding: 6px 10px; }
.ui-cta { margin-top: 10px; }

/* Job icon dragon logo */
.job-ico img { width: 40px; height: 40px; object-fit: contain; display: block; }

/* ==== DỊCH VỤ MODAL (generic) ==== */
.svc-modal-card { max-width: 370px; width: 96vw; font-family: "Times New Roman", Times, serif; padding: 0; }
.svc-modal-card .modal-head { border-bottom: 1px solid var(--line); background: #fff7f7; padding: 14px 18px 10px 18px; }
.svc-modal-card .modal-title { font-size: 1.18em; font-weight: 900; color: var(--brand); font-family: "Times New Roman", Times, serif; }
.svc-modal-close { font-family: "Times New Roman", Times, serif; font-size: 1em; background: #fff; color: var(--brand); border: 1px solid #ffd6db; border-radius: 10px; padding: 6px 16px; margin-left: 10px; cursor: pointer; transition: background .15s, color .15s; }
.svc-modal-close:hover { background: #ffd6db; color: #fff; }
.svc-modal-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 10px 0; }
.svc-modal-group { margin-bottom: 12px; }
.svc-modal-group-title { font-weight: 800; color: var(--brand); margin-bottom: 4px; font-size: 1.05em; }
.svc-modal-link { display: flex; align-items: center; gap: 8px; font-family: "Times New Roman", Times, serif; font-size: 1em; background: #f9fafb; border: 1px solid #ffd6db; border-radius: 10px; padding: 10px 12px; color: var(--brand); cursor: pointer; transition: background .15s, color .15s; }
.svc-modal-link:hover, .svc-modal-link:focus { background: #ffd6db; color: #fff; }
.svc-modal-link .svc-modal-hash { font-size: 0.98em; color: #64748b; margin-left: auto; font-family: monospace; background: #fff; border-radius: 6px; padding: 2px 6px; }
@media (max-width: 600px) {
  .svc-modal-card { max-width: 99vw; }
  .svc-modal-link { font-size: 0.98em; padding: 10px 8px; }
}

/* ===== Root, base, layout ===== */
:root{
  --brand:#c1121f; --ink:#02050e; --muted:#475569; --bg:#fff; --line:#eef2f7;
  --header-h:92px; --radius:18px; --slogan-h:100px;
  --wm-size:53vw; --wm-opacity:.09; --wm-speed:60s;
  --glass-grad-top: rgba(255,255,255,.78);
  --glass-grad-btm: rgba(255,255,255,.52);
  --glass-brd:#eef2f7; --glass-blur:6px; --glass-saturate:160%;
  --navy:#050b20; --brand-pink:#ff2d55;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;color:var(--ink);background:var(--bg);overflow-x:hidden;}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header (glass) */
.site-header{position:sticky;top:0;z-index:1000;background:transparent;border-bottom:1px solid transparent}
.site-header .inner{position:relative;max-width:1400px;margin:0 auto;height:var(--header-h);display:flex;flex-direction:column;gap:6px;align-items:stretch;justify-content:center;padding:6px 16px 10px}
.site-header::before{
  content:"";position:fixed;left:0;right:0;top:0;height:var(--header-h);
  background:rgba(255,255,255,.52);border-bottom:1px solid rgba(231,38,52,.12);
  backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
  opacity:0;pointer-events:none;z-index:-1;transition:opacity .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.header--scrolled::before{opacity:1;background:rgba(255,255,255,.72);box-shadow:0 10px 30px rgba(15,23,42,.08)}
#brandHome{display:inline-flex;align-items:center}
.logo-rect{height:62px; max-width:160px; width:100%; object-fit:contain}
.brand-row{width:100%;display:flex;align-items:center;gap:10px;justify-content:space-between}
.mobile-primary{display:flex;gap:8px;align-items:center}
.tab.mob{padding:8px 14px;border-radius:999px;border:1px solid #e9edf2;background:#fff;color:var(--brand);font-weight:900;letter-spacing:.02em}
.tab.mob[aria-selected="true"], .tab.mob:hover{background:var(--brand);color:#fff}

/* Tabs + burger */
.main-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.tabs{display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0}
.tab.desk{appearance:none;border:1px solid #e9edf2;background:#fff;color:var(--brand);padding:10px 22px;border-radius:999px;cursor:pointer;transition:all .15s ease;font-family:"Times New Roman", Times, serif;font-weight:900;letter-spacing:.02em;min-height:40px}
.tab.desk:hover,.tab.desk[aria-selected="true"]{background:var(--brand);color:#fff;border-color:transparent}
.nav-toggle{display:flex;gap:8px;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid #e9edf2;background:#fff;box-shadow:0 8px 20px rgba(2,6,23,.08);cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

/* Burger dropdown inside header */
.more-panel{display:none;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 18px 40px rgba(2,6,23,.12)}
.more-panel.is-open{display:flex;animation:fadeIn .2s ease both}
.menu-link{appearance:none;border:1px solid #e9edf2;background:#fff;color:var(--ink);padding:12px;border-radius:12px;text-align:center;font-weight:800;cursor:pointer}
.menu-link:hover{border-color:#ffc9d0;box-shadow:0 2px 10px rgba(2,6,23,.06)}

/* Desktop vs Mobile visibility */
@media (min-width:921px){
  .site-header .inner{flex-direction:row;align-items:center;padding:0 16px}
  .mobile-primary,.nav-toggle,.more-panel{display:none!important}
  .main-nav{justify-content:flex-end;width:100%}
  .logo-rect{height:auto; width:268px}
}
@media (max-width:920px){
  .tabs{display:none}
}

/* Views / hero */
main{flex:1;padding:18px 0}
.view{display:none;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.view.is-visible{display:block;opacity:1;transform:none}
.view-title{margin:0 0 14px;color:var(--brand);font-weight:900}
.panel-flat{background:transparent;border-top:1px solid var(--line);padding:12px 0}

.hero{position:relative;min-height:calc(100dvh - var(--header-h));display:grid;place-items:center;background:#fff;overflow:hidden}
.hero-bleed{max-width:100vw;overflow-x:hidden;}
.hero-inner{position:relative;width:min(1100px,100%);padding:32px 32px 14vh;text-align:center}
.vf-hero .vf-wordmark{display:flex;flex-direction:column;align-items:center}
.vf-hero .word{display:inline-block;font-family:"SVN-Mightiest",system-ui,sans-serif;font-weight:1000;letter-spacing:-.02em;font-size:clamp(72px,11vw,160px);line-height:.9;color:var(--brand)}
.greet{margin-top:6px;font-size:clamp(16px,2.4vw,24px);font-weight:900;letter-spacing:.12em;color:var(--brand)}
.wm-giant{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wm-giant .wm-track{position:absolute;top:50%;left:0;transform:translateY(-50%);white-space:nowrap;animation:wmMarquee var(--wm-speed) linear infinite;will-change:transform}
.wm-giant .wm-track span{display:inline-block;margin-right:6vw;font-family:"SVN-Mightiest",system-ui,sans-serif;font-weight:1000;letter-spacing:-.06em;font-size:var(--wm-size);line-height:.8;color:#c1121f;opacity:var(--wm-opacity);filter:drop-shadow(0 18px 36px rgba(193,18,31,.22))}
@keyframes wmMarquee{0%{transform:translate3d(0,-50%,0)}100%{transform:translate3d(-50%,-50%,0)}}
.cta-down{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);width:54px;height:54px;border-radius:14px;display:grid;place-items:center;transition:box-shadow .2s, transform .2s, border-color .2s}
.cta-down.ghost.subtle{background:transparent;border:1px solid transparent;color:#0f172a}
.cta-down.ghost.subtle:hover,.cta-down.ghost.subtle:focus-visible{border-color:#e5e7eb;box-shadow:0 6px 16px rgba(2,6,23,.08);transform:translateX(-50%) translateY(-2px)}
.cta-down svg{width:22px;height:22px}

/* About */
.about-wrap{position:relative}
.about-stage{position:relative;padding-bottom:var(--slogan-h)}
.slide{display:none;opacity:0;transform:translateY(4px) scale(.997);transition:opacity .28s ease,transform .28s ease}
.slide.is-active{display:block;opacity:1;transform:none}
.panel-card{position:relative;border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;box-shadow:0 12px 40px rgba(2,6,23,.08)}
.panel-card.tight{padding:12px 14px}
.boxed .box-head{display:flex;align-items:center;gap:10px;margin:-14px -14px 10px;padding:14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fff7f7)}
.about-title{margin:0;color:var(--brand);font-weight:1000;letter-spacing:.02em}
.lead-strong{font-weight:800;color:#0f172a}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info-box{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.tagline{font-weight:900;color:#c1121f;margin:0 0 8px}
.tick{margin:8px 0 10px;padding-left:18px;display:grid;gap:6px}
.tick li::marker{color:#c1121f}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.kpi-card{border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center;padding:12px;box-shadow:0 10px 26px rgba(2,6,23,.06)}
.kpi-num{font-size:34px;font-weight:1000;color:#c1121f}
.kpi-sub{color:#64748b}
.edge-nav{position:fixed;top:50%;transform:translateY(-50%);width:58px;height:58px;border-radius:18px;border:0;background:#0b0e12;box-shadow:0 18px 42px rgba(2,6,23,.35),inset 0 0 0 2px #151a22;cursor:pointer;z-index:9}
.edge-nav.prev{left:8px}.edge-nav.next{right:8px}
.edge-nav::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;background:#fff;mask:no-repeat center/contain}
.edge-nav.prev::after{transform:translate(-50%,-50%);mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')}
.edge-nav.next::after{transform:translate(-50%,-50%);mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')}
.stage-dots{position:absolute;left:0;right:0;bottom:calc(var(--slogan-h) + 6px);display:flex;gap:8px;justify-content:center}
.dot{width:10px;height:10px;border-radius:999px;border:0;background:#cbd5e1;cursor:pointer}
.dot.is-active{background:var(--brand)}
.slogan-fixed{position:absolute;left:0;right:0;bottom:0;z-index:1}
.slogan-card{position:relative;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;text-align:center;overflow:hidden;box-shadow:0 14px 60px rgba(2,6,23,.10)}
.slogan-line{font-weight:1000;letter-spacing:.02em;font-size:clamp(18px,2.2vw,26px);background:linear-gradient(90deg,#8e0c15,#c1121f,#ff6b79);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent}

/* UI blocks */
.ui-hero{position:relative;margin:10px 0 30px;border-radius:24px;overflow:hidden;border:1px solid var(--glass-brd);box-shadow:0 18px 60px rgba(193,18,31,.12)}
.ui-hero__img{width:100%;height:420px;object-fit:cover;display:block;filter:brightness(.92);transform:scale(1.02);transform-origin:center;transition:transform .8s ease}
.ui-hero:hover .ui-hero__img{transform:scale(1.05)}
.pos-center{object-position:center center}
.ui-hero__inner{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ui-hero__body{backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));background:linear-gradient(to bottom,var(--glass-grad-top),var(--glass-grad-btm));padding:18px 22px;border-radius:16px;border:1px solid var(--glass-brd);pointer-events:auto;text-align:center}
.ui-hero__title{font-family:Georgia,serif;font-weight:1000;font-size:clamp(30px,5.6vw,64px);color:#c1121f;margin:0}
.ui-hero__subtitle{margin:6px 0 12px;font-weight:700;color:#334155}
.ui-hero__cta{display:flex;gap:10px;justify-content:center}
.ui-section{padding:24px 0 50px}
.ui-h2{font-family:Georgia,serif;font-size:clamp(22px,3.2vw,34px);text-align:center;margin:0 0 18px;color:#0f172a;position:relative}
.ui-h2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;width:60px;height:3px;background:#c1121f;border-radius:2px}
.ui-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center;margin-top:24px}
.ui-grid--rev{grid-template-columns:.95fr 1.05fr}
.ui-textcard{background:#fff;border:1px solid #eef2f7;border-radius:18px;padding:20px;box-shadow:0 14px 46px rgba(2,6,23,.06);transition:transform .25s ease, box-shadow .25s ease}
.ui-textcard:hover{transform:translateY(-2px);box-shadow:0 18px 60px rgba(2,6,23,.08)}
.ui-textcard h3{margin:0 0 10px;color:#c1121f}
.ui-photo{border-radius:18px;overflow:hidden;box-shadow:0 14px 46px rgba(193,18,31,.14)}
.ui-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ui-badge{padding:6px 12px;background:#fff;border:1px solid #ffd6db;color:#c1121f;border-radius:999px;font-weight:900;box-shadow:0 2px 10px rgba(193,18,31,.08)}
.ui-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:18px}
.ui-gallery img{width:100%;border-radius:16px;box-shadow:0 10px 28px rgba(2,6,23,.08)}

/* Sign-up stripe */
.signup-stripe{display:grid;gap:12px;margin-top:22px}
.signup-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;box-shadow:0 10px 26px rgba(2,6,23,.06)}
.signup-card h3{margin:0;color:#c1121f}
.signup-card p{margin:4px 0 0;color:#475569}

/* Dịch vụ cards */
.services { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 10px; }
.svc-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px 18px; border-radius: 18px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: transform .15s, box-shadow .2s; box-shadow: 0 4px 18px rgba(2,6,23,.06); font-family: "Times New Roman", Times, serif; }
.svc-card:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px rgba(2,6,23,.10); border-color: #ffd6db; }
.svc-ico { font-size: 30px; margin-bottom: 4px; }
.svc-title { font-weight: 900; color: var(--brand); font-size: 1.13em; margin-bottom: 2px; }
.svc-sub { color: var(--muted); font-size: 15px; text-align: center; }
@media (min-width: 700px) {
  .services { grid-template-columns: repeat(3,1fr); gap: 18px; max-width: 800px; margin-inline: auto; }
  .svc-card { min-width: 0; min-height: 170px; }
}

/* Jobs & News */
.jobs-intro{color:#475569;margin:0 0 10px}
.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.job-card{display:flex;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 28px rgba(2,6,23,.05);position:relative;overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease,box-shadow .3s ease}
.job-card.on{opacity:1;transform:none}
.job-card::after{content:"";position:absolute;inset:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);opacity:0;pointer-events:none}
.job-card:hover::after{animation:sweep 1.1s ease}
@keyframes sweep{0%{left:-30%;opacity:0}30%{opacity:1}100%{left:130%;opacity:0}}
.job-ico{width:54px;height:54px;border-radius:14px;background:#fff;border:1px solid #ffd6db;display:grid;place-items:center;font-size:22px}
.job-body h3{margin:0 0 8px;color:#c1121f}
.job-bullets{margin:0 0 10px 18px;color:#475569}
.job-acts{display:flex;gap:8px;flex-wrap:wrap}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.news-card{display:block;padding:16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:inherit;text-decoration:none;transition:transform .2s, box-shadow .2s}
.news-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(2,6,23,.08)}
.news-card h3{margin:0 0 6px;font-size:18px;color:#c1121f}
.news-card p{margin:0;color:#64748b}

/* Buttons + Forms */
.btn{margin-top:0;padding:10px 14px;border-radius:12px;border:0;background:var(--brand);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(2,6,23,.08);transition:transform .12s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(2,6,23,.12)}
.btn.primary{background:var(--brand);color:#fff}
.btn.secondary{background:#f1f5f9;color:#0f172a}
.btn.ghost{background:#fff;color:#c1121f;border:1px solid #ffd6db}
.label{display:block;margin-bottom:6px;font-weight:600}
.input,.select,.textarea{width:100%;border:1px solid #e9eef5;border-radius:14px;padding:10px 12px;outline:none;box-shadow:0 4px 12px rgba(2,6,23,.04) inset;transition:border-color .2s, box-shadow .2s}
.input:focus,.select:focus,.textarea:focus{border-color:#ffc9d0;box-shadow:0 0 0 3px rgba(193,18,31,.12)}

/* Modal (base) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.42); z-index:2000}
.modal.is-open{display:flex}
.modal-card{width:min(720px,92vw);background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(2,6,23,.16);overflow:hidden;border:1px solid rgba(2,6,23,.1);transform:translateY(8px) scale(.98);opacity:0;transition:transform .22s ease, opacity .22s ease}
.modal.is-open .modal-card{transform:translateY(0) scale(1);opacity:1}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(2,6,23,.08)}
.modal-title{margin:0;font-size:20px}
.modal-body{padding:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid rgba(2,6,23,.08)}
.form-grid{display:grid;grid-template-columns:1fr;gap:10px}
.form-grid .full{grid-column:1/-1}
.job-info-content h3{margin-top:0}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes zoomBg{from{transform:scale(1.015)}to{transform:scale(1)}}
.animate-in{opacity:0;animation-duration:.5s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-delay:var(--a-delay,0ms)}
.a-fadeIn{animation-name:fadeIn}
.a-fadeUp{animation-name:fadeUp}
.a-rise{animation-name:rise}
.a-pop{animation-name:pop}
.a-zoomBg .ui-hero__img{animation:zoomBg .8s ease both}

/* Footer */
.corp-footer{background:linear-gradient(180deg,#7a0c12,#5a0a0f);color:#fff;margin-top:auto}
.corp-footer .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:36px 16px}
.corp-footer h4{text-transform:uppercase;letter-spacing:.6px;margin:0 0 10px;color:#ffd6db}
.corp-footer a{color:#ffd6db}.corp-footer a:hover{color:#fff}
.social-2{display:flex;gap:12px;align-items:flex-end}
.fb{width:44px;height:44px;border-radius:12px;background:#ffffff12;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none}
.fb::before{content:"";width:20px;height:20px;background:#fff;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M22 12a10 10 0 1 0-11.563 9.874v-6.987H7.898v-2.887h2.54V9.413c0-2.506 1.493-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.242 0-1.63.77-1.63 1.56v1.87h2.773l-.443 2.887h-2.33v6.987A10 10 0  0 0 22 12Z"/></svg>') no-repeat center/contain}
.fb .label{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:11px;opacity:.9;color:#ffd6db;white-space:nowrap}

/* Apply page styles */
#view-apply{padding:24px 0;}
.apply-wrap{max-width:960px;margin:0 auto;padding:0 16px 40px}
.apply-head{background:var(--navy);color:#fff;border-radius:14px 14px 8px 8px;padding:16px}
.apply-head h2{margin:0;font-size:20px;font-weight:900}
.apply-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;color:#dbeafe;font-size:14px}
.apply-kv b{display:block;color:#bfdbfe;font-weight:800}
.apply-card{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(2,6,23,.05);margin:12px 0}
.apply-card .hd{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:800;color:var(--brand)}
.apply-card .bd{padding:14px 16px}
.apply-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:720px){ .apply-row{grid-template-columns:1fr} .apply-kv{grid-template-columns:1fr} }

/* Uploader block */
#view-apply .uploader{border:2px dashed #ffd6db;border-radius:14px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;align-items:stretch}
#view-apply .u-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#view-apply .u-actions .btn.ghost{display:inline-flex;align-items:center;gap:8px}
#view-apply .u-actions .btn.ghost::before{content:"";width:18px;height:18px;background:#0f172a1a;border:1px solid #e9eef5;border-radius:6px;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="black" d="M10 3l4 4h-3v6H9V7H6l4-4z"/></svg>') no-repeat center/14px 14px;}
#ap_cv_name{min-height:18px;color:#16a34a;font-weight:600}
.uploader.ok #ap_cv_name::before{content:"";display:inline-block;width:16px;height:16px;margin-right:6px;background:#16a34a;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="white" d="M8.5 13.2L4.8 9.5l1.4-1.4 2.3 2.3 5.3-5.3 1.4 1.4z"/></svg>') no-repeat center/contain;vertical-align:-3px;}

/* Cover toggle spacing */
#ap_cover_wrap{margin-top:8px}

/* Primary button like screenshot */
#view-apply .btn.primary{background:var(--brand-pink)}
#view-apply .btn.primary:hover{box-shadow:0 12px 28px rgba(255,45,85,.22);transform:translateY(-1px)}

/* ===== Smooth tab transition ===== */
.view{opacity:0;transform:translateY(6px);}
.view.is-visible{opacity:1;transform:none}
.view.is-leaving{animation:viewOut .28s ease both}
.view.is-entering{animation:viewIn .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes viewOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px)}}

/* === RESPONSIVE PATCH: mobile-only, tôn trọng desktop gốc === */
@media (max-width: 950px){
  section,article,div{min-width:0}
  h1,h2,h3,p,a,button{overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
  img,video{max-width:100%;height:auto;display:block}
  body{text-size-adjust:100%}
  .container,.site-header .inner{max-width:100%;padding-inline:16px}
  .logo-rect{height:38px;max-width:60vw}
  .tabs{display:none!important}
  .mobile-primary{display:flex!important;flex-wrap:wrap;gap:8px;justify-content:flex-end}
  .tab.mob{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--brand);font-weight:800}
  .tab.mob[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
  .nav-toggle span{position:relative}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
  .vf-hero .word{font-size:clamp(36px,9vw,72px);line-height:1.06}
  .greet{font-size:clamp(14px,3.8vw,18px)}
  #view-home{position:relative}
  .cta-down{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:48px;height:48px;border-radius:999px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.08)}
  .cta-down::before{content:"";width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin-top:-4px}
  #view-about .container{position:relative}
  .about-page .edge-nav{display:flex!important;gap:8px;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:auto;height:auto;background:transparent;box-shadow:none;border:0}
  .about-page .edge-nav::after{display:none}
  .about-page .edge-nav.prev,.about-page .edge-nav.next{left:auto;right:auto}
  .edge-btn,.about-page .edge-nav{z-index:20}
  .edge-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.08)}
  .edge-btn svg{width:18px;height:18px}
  .grid-2,.ui-grid,.ui-grid--rev,.services,.jobs-grid,.news-grid{display:grid;gap:12px}
  .grid-2,.ui-grid,.ui-grid--rev{grid-template-columns:1fr}
  .services,.jobs-grid,.news-grid{grid-template-columns:1fr}
  .corp-footer .fgrid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;gap:16px;padding-bottom:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .corp-footer .fgrid > *{min-width:220px;scroll-snap-align:start}
}

/* Guard desktop ≥921px */
@media (min-width: 921px){
  .tabs{display:flex!important}
  .mobile-primary{display:none!important}
  .container{max-width:1200px}
  .site-header .inner{max-width:1200px}
  .logo-rect{height:auto;max-width:none}
}

/* ===== MOBILE CANVAS PARITY: Service modal size & typography (scoped) ===== */
#svcPanel .modal-card{ max-width: 370px; width: 96vw; padding: 0; font-family: "Times New Roman", Times, serif; }
#svcPanel .modal-head{ border-bottom: 1px solid var(--line); background: #fff7f7; padding: 14px 18px 10px; }
#svcPanel .modal-title{ font-size: 1.18em; font-weight: 900; color: var(--brand); font-family: "Times New Roman", Times, serif; }
#svcPanel .btn.ghost{ font-family: "Times New Roman", Times, serif; font-size: 1em; background: #fff; color: var(--brand); border: 1px solid #ffd6db; border-radius: 10px; padding: 6px 16px; }
#svcPanel .btn.ghost:hover{ background:#ffd6db; color:#fff; }
#svcPanel .svc-group-title{ font-size: 1.05em; }
#svcPanel .svc-chip .btn{ font-size: 0.98em; padding: 10px 12px; border-radius: 10px; }
#svcPanel .modal-body{ padding: 16px 14px; }
#svcPanel .modal-foot{ padding: 12px 14px; }
@media (max-width: 600px){ #svcPanel .modal-card{ max-width: 99vw; } }

/* === Services v4 (hospitality style) — scoped to #view-dichvu === */
#view-dichvu .panel-flat{padding-top:8px}
#view-dichvu .svc-hero{border:1px solid var(--line); border-radius:18px; overflow:hidden; background: linear-gradient(135deg,#fff7f7 0%,#ffffff 60%); box-shadow:0 14px 46px rgba(193,18,31,.06); margin-bottom:14px}
#view-dichvu .svc-hero__body{padding:18px 16px; text-align:center}
#view-dichvu .svc-hero__title{margin:0; font-family:Georgia,serif; font-weight:1000; font-size:clamp(22px,4.6vw,36px); color:var(--brand)}
#view-dichvu .svc-hero__sub{margin:6px 0 10px; color:#334155; font-weight:700}
#view-dichvu .svc-hero__badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#view-dichvu .svc-badge{padding:6px 12px;background:#fff;border:1px solid #ffd6db;color:#c1121f;border-radius:999px;font-weight:900}
#view-dichvu .svc-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0 14px}
#view-dichvu .svc-chip2{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--brand);font-weight:800;cursor:pointer}
#view-dichvu .svc-chip2:focus,#view-dichvu .svc-chip2:hover{border-color:#ffc9d0; box-shadow:0 4px 16px rgba(2,6,23,.06)}
#view-dichvu .svc-tiles{display:grid; grid-template-columns:1fr; gap:12px}
#view-dichvu .svc-tile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:18px 14px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(2,6,23,.06); transition:transform .15s, box-shadow .2s, border-color .2s; cursor:pointer}
#view-dichvu .svc-tile:focus,#view-dichvu .svc-tile:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 16px 38px rgba(2,6,23,.10); border-color:#ffd6db; outline:none}
#view-dichvu .svc-tile__ico{font-size:30px}
#view-dichvu .svc-tile__title{margin:0;color:var(--brand);font-weight:900;font-size:1.14em}
#view-dichvu .svc-tile__sub{margin:0;color:var(--muted);font-size:15px}
#view-dichvu .svc-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
@media (min-width: 740px){
  #view-dichvu .svc-tiles{grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:0 auto}
  #view-dichvu .svc-tile{min-height:178px}
}

/* ===== CREDIT VIEW (mobile-first, hospitality) ===== */
#view-tindung .cr-wrap{padding:8px}
#view-tindung .cr-hero{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff;box-shadow:0 10px 28px rgba(2,6,23,.06);margin-bottom:12px;text-align:center}
#view-tindung .cr-hero__title{margin:0;color:var(--brand);font-weight:900;font-size:clamp(20px,4.5vw,32px)}
#view-tindung .cr-hero__sub{margin:6px 0 10px;color:#334155;font-weight:700}
#view-tindung .cr-seg{display:inline-flex;gap:8px;background:#fff;border:1px solid var(--line);padding:4px;border-radius:999px}
#view-tindung .cr-seg__btn{padding:8px 14px;border-radius:999px;border:0;background:transparent;color:var(--ink);font-weight:800;cursor:pointer}
#view-tindung .cr-seg__btn.is-active{background:var(--brand);color:#fff}
#view-tindung .cr-panel{display:none}
#view-tindung .cr-panel.is-active{display:block}
#view-tindung .cr-block{margin:14px 0}
#view-tindung .cr-block__hd{margin-bottom:8px}
#view-tindung .cr-block__title{margin:0;color:var(--brand);font-weight:900;font-size:18px}
#view-tindung .cr-block__lead{margin:4px 0 0;color:var(--muted)}
#view-tindung .cr-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 8px 22px rgba(2,6,23,.06)}
#view-tindung .cr-card.sm{padding:12px}
#view-tindung .cr-card__hd{margin:0 0 8px;color:#0f172a;font-weight:900}
#view-tindung .cr-list{margin:8px 0 0 18px}
#view-tindung .cr-list li{margin:4px 0}
#view-tindung .cr-list--bullet{list-style:disc}
#view-tindung .cr-kv{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border:1px dashed #ffd6db;border-radius:10px}
#view-tindung .cr-kv+.cr-kv{margin-top:8px}
#view-tindung .cr-kv span{color:#475569}
#view-tindung .cr-kv b{color:#111827}
#view-tindung .cr-partners{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#view-tindung .cr-pill{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #ffd6db;color:#c1121f;font-weight:800}
#view-tindung .cr-grid2{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
#view-tindung .cr-grid3{display:grid;grid-template-columns:1fr;gap:10px}
#view-tindung .cr-showcase{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:8px}
#view-tindung .cr-showcase__card{background:linear-gradient(135deg,#fff7f7, #ffffff);border:1px solid #ffe2e5;border-radius:14px;padding:12px}
#view-tindung .cr-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#view-tindung .mt16{margin-top:16px}
#view-tindung .cr-acc{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(2,6,23,.05);padding:0;margin-top:10px;overflow:hidden}
#view-tindung .cr-acc+.cr-acc{margin-top:10px}
#view-tindung .cr-acc>summary{list-style:none;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-weight:900;color:var(--ink)}
#view-tindung .cr-acc>summary::-webkit-details-marker{display:none}
#view-tindung .cr-acc[open]>summary{background:#fff7f7;border-bottom:1px solid #ffe2e5}
#view-tindung .cr-acc .cr-list{margin:12px 16px}
#view-tindung .cr-two{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 16px}
#view-tindung .cr-subhd{margin:2px 0 6px;font-weight:900;color:#0f172a}
#view-tindung .cr-link{display:inline-block;margin:0 16px 8px;color:var(--brand);font-weight:800;text-decoration:underline}
#view-tindung .cr-subseg{display:flex;gap:8px;margin:8px 0 12px}
#view-tindung .cr-subseg__btn{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:800;color:var(--ink);cursor:pointer}
#view-tindung .cr-subseg__btn.is-active{border-color:#ffc9d0;background:#fff7f7;color:var(--brand)}
#view-tindung .cr-subpanel{display:none}
#view-tindung .cr-subpanel.is-active{display:block}
@media (min-width: 740px){
  #view-tindung .cr-wrap{padding:12px 8px 20px}
  #view-tindung .cr-grid2{grid-template-columns:1fr 1fr;align-items:start}
  #view-tindung .cr-grid3{grid-template-columns:repeat(3,1fr)}
  #view-tindung .cr-showcase{grid-template-columns:repeat(3,1fr)}
  #view_tindung .cr-two{grid-template-columns:1fr 1fr}
}

/* ===== CREDIT (crx*) ===== */
#view-tindung .wrap{padding:10px}
#view-tindung .crx-hero{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center;box-shadow:0 10px 28px rgba(2,6,23,.06);margin-bottom:12px}
#view-tindung .crx-title{margin:0;color:var(--brand);font-weight:900;font-size:clamp(20px,4.5vw,32px)}
#view_tindung .crx-sub{margin:6px 0 10px;color:#334155}
#view_tindung .crx-seg{display:inline-flex;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#fff}
#view_tindung .crx-seg__btn{padding:8px 14px;border-radius:999px;border:0;background:transparent;font-weight:800;color:#0f172a;cursor:pointer}
#view_tindung .crx-seg__btn.is-active{background:var(--brand);color:#fff}
#view_tindung .crx-panel{display:none}
#view_tindung .crx-panel.is-active{display:block}
#view_tindung .crx-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 8px 24px rgba(2,6,23,.06);margin:12px 0}
#view_tindung .crx-h3{margin:0 0 4px;color:var(--brand);font-weight:900}
#view_tindung .crx-h4{margin:8px 0 6px;font-weight:900;color:#0f172a}
#view_tindung .crx-lead{margin:0 0 10px;color:#475569}
#view_tindung .crx-list{margin:6px 0 10px 18px}
#view_tindung .crx-list--disc{list-style:disc}
#view_tindung .crx-kvgrid{display:grid;grid-template-columns:1fr;gap:8px}
#view_tindung .crx-kv{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border:1px dashed #ffd6db;border-radius:10px}
#view_tindung .crx-pills{display:flex;gap:8px;flex-wrap:wrap}
#view_tindung .crx-pill{padding:6px 10px;border-radius:999px;border:1px solid #ffd6db;background:#fff;color:#c1121f;font-weight:800}
#view_tindung .crx-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#view_tindung .crx-acc{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:8px 0;background:#fff}
#view_tindung .crx-acc>summary{padding:12px 14px;cursor:pointer;display:flex;gap:8px;align-items:center}
#view_tindung .crx-acc[open]>summary{background:#fff7f7;border-bottom:1px solid #ffe2e5}
#view_tindung .crx-cols{display:grid;grid-template-columns:1fr;gap:12px}
#view_tindung .crx-link{color:var(--brand);text-decoration:underline}
#view_tindung .crx-show{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0}
#view_tindung .crx-show__item{border:1px solid #ffe2e5;background:linear-gradient(135deg,#fff7f7,#ffffff);border-radius:14px;padding:12px}
#view_tindung .crx-grid3{display:grid;grid-template-columns:1fr;gap:10px}
#view_tindung .crx-mini{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
#view_tindung .crx-timeline{position:relative}
#view_tindung .crx-step{display:flex;align-items:center;gap:8px;margin:8px 0}
#view_tindung .crx-step b{display:inline-grid;place-content:center;width:24px;height:24px;border-radius:999px;background:var(--brand);color:#fff;font-weight:900}
@media (min-width:740px){
  #view_tindung .wrap{padding:14px 8px 24px}
  #view_tindung .crx-kvgrid{grid-template-columns:repeat(3,1fr)}
  #view_tindung .crx-cols{grid-template-columns:1fr 1fr}
  #view_tindung .crx-show{grid-template-columns:repeat(3,1fr)}
  #view_tindung .crx-grid3{grid-template-columns:repeat(3,1fr)}
}

/* ===== LƯU TRÚ (stx*) ===== */
#view-luutru .wrap{padding:10px}
#view-luutru .stx-hero{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center;box-shadow:0 10px 28px rgba(2,6,23,.06);margin-bottom:12px}
#view-luutru .stx-title{margin:0;color:var(--brand);font-weight:900;font-size:clamp(20px,4.5vw,32px)}
#view-luutru .stx-sub{margin:6px 0 10px;color:#334155;font-weight:700}
#view-luutru .stx-seg{display:inline-flex;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#fff}
#view-luutru .stx-seg__btn{padding:8px 14px;border-radius:999px;border:0;background:transparent;font-weight:800;color:var(--ink);cursor:pointer}
#view-luutru .stx-seg__btn.is-active{background:var(--brand);color:#fff}
#view-luutru .stx-panel{display:none}
#view-luutru .stx-panel.is-active{display:block}
#view-luutru .stx-grid{display:grid;grid-template-columns:1fr;gap:12px}
#view-luutru .stx-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 8px 24px rgba(2,6,23,.06)}
#view-luutru .stx-h3{margin:0 0 6px;color:var(--brand);font-weight:900}
#view_luutru .stx-list{margin:6px 0 10px 18px}
#view_luutru .stx-cta{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:740px){
  #view-luutru .wrap{padding:14px 8px 24px}
  #view-luutru .stx-grid{grid-template-columns:repeat(3,1fr)}
}

/* HOTFIX SERVICES */
#view-dichvu .svc-nav{display:none!important;}
#view-dichvu .svc-acts .svc-act[data-action="apply"]{display:none!important;}
#view-dichvu [data-nav="thongbao"] .svc-act.btn.ghost{display:none!important;}

/* ===== Credit Banking (bk*) ===== */
#view-tindung .bk-hero{padding:28px 8px 16px;text-align:left}
#view-tindung .bk-title{margin:0;font-weight:1000;font-size:clamp(36px,7vw,72px);letter-spacing:-.02em;color:#111}
#view-tindung .bk-sub{margin:6px 0 14px;color:#475569;font-weight:700}
#view-tindung .bk-start{margin-bottom:18px}
#view-tindung .bk-seg{display:inline-flex;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#fff}
#view-tindung .bk-seg__btn{padding:8px 14px;border-radius:999px;border:0;background:transparent;font-weight:800;color:#0f172a;cursor:pointer}
#view-tindung .bk-seg__btn.is-active{background:var(--brand);color:#fff}
#view-tindung .bk-panel{margin-top:8px}
#view-tindung .bk-banner{display:inline-block;padding:12px 16px;background:#ff2d2d;color:#fff;font-weight:900;border-radius:6px;margin:10px 0 18px}
#view-tindung .bk-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;align-items:start}
#view-tindung .bk-h2{margin:0;color:#111;font-size:clamp(20px,3.2vw,34px);font-weight:900;line-height:1.25}
#view-tindung .bk-col .bk-mini{margin:0 0 4px;font-weight:900}
#view-tindung .bk-col p{margin:0 0 12px;color:#475569}
#view-tindung .bk-how{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;margin:26px 0}
#view-tindung .bk-h3{margin:0 0 8px;font-size:22px;font-weight:900}
#view-tindung .bk-how__img{height:280px;border-radius:16px;border:1px solid var(--line);background:#f5f7fb center/cover no-repeat;box-shadow:0 10px 28px rgba(2,6,23,.06);background-image:var(--bk-img)}
#view-tindung .bk-accs{margin-top:10px}
#view-tindung details.bk-acc{border-top:1px solid var(--line);padding:12px 0}
#view-tindung details.bk-acc:first-of-type{border-top:1px solid var(--line)}
#view-tindung details.bk-acc summary{list-style:none;cursor:pointer;font-weight:800;display:flex;justify-content:space-between;align-items:center}
#view-tindung details.bk-acc summary::after{content:"+";font-weight:900}
#view-tindung details.bk-acc[open] summary::after{content:"–"}
#view-tindung .bk-compare{display:inline-block;margin-top:10px;color:#0f172a;text-decoration:underline;font-weight:800}
@media (max-width: 900px){
  #view-tindung .bk-grid{grid-template-columns:1fr;gap:12px}
  #view-tindung .bk-how{grid-template-columns:1fr}
}

/* ===== Additional banking-style tweaks ===== */
#view-tindung .bk-hero{display:flex;align-items:flex-start;gap:28px;padding:36px 28px;border-radius:18px}
#view-tindung .bk-hero .bk-hero__body{flex:1;text-align:left}
#view-tindung .bk-title{font-family: Georgia, serif; font-weight:900; color:var(--ink); margin:0; line-height:0.95; font-size:clamp(36px,10vw,120px);}
#view-tindung .bk-sub{font-size:18px; margin-top:8px; color:var(--muted)}
#view-tindung .bk-banner{display:inline-block;margin-top:20px;padding:14px 22px;border-radius:8px;background:var(--brand);color:#fff;font-weight:900;box-shadow:0 8px 26px rgba(193,18,31,.12)}
#view-tindung .bk-grid{display:grid;gap:20px}
@media(min-width:980px){
  #view-tindung .bk-grid{grid-template-columns:1.4fr 1fr 1fr}
}
#view-tindung .bk-how__img{min-height:220px;background-size:cover;background-position:center;border:1px solid var(--line);box-shadow:0 18px 40px rgba(2,6,23,.08)}
#view-tindung .bk-acc{border-top:1px solid var(--line);padding:0;margin:0}
#view-tindung details.bk-acc{display:block;border-bottom:1px solid var(--line);}
#view_tindung details.bk-acc summary{display:flex;align-items:center;justify-content:space-between;padding:18px 16px;cursor:pointer;font-weight:800}
#view_tindung details.bk-acc[open] summary{background:#fff7f7}
#view_tindung details.bk-acc p{padding:0 16px 18px 16px;margin:0;color:var(--muted)}
.bk-compare-list{margin:18px 0;padding:0}
.bk-compare-list .row{display:flex;align-items:center;gap:12px;padding:12px 8px;border-top:1px solid #eef2f7}
.bk-compare-list .row .label{flex:1;font-weight:800}
.bk-compare-list .row .desc{flex:2;color:var(--muted)}
.bk-compare-list .row .action{width:48px;text-align:center;color:var(--brand);font-weight:900}
#view-tindung .sticky-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:1200;max-width:980px;padding:10px 16px;border-radius:12px;background:linear-gradient(90deg,var(--brand),#ff6b79);box-shadow:0 18px 60px rgba(193,18,31,.18)}
#view-tindung .sticky-cta .btn{background:transparent;border:0;color:#fff;padding:10px 18px;font-weight:900}
#view-tindung .sticky-cta[hidden]{display:none}
#view-tindung .bk-hero.bk-hero--scrolled{padding:16px 18px;border-radius:10px;box-shadow:0 12px 40px rgba(2,6,23,.06)}
#view-tindung .bk-hero.bk-hero--scrolled .bk-title{font-size:clamp(18px,3.2vw,36px);}
@media (max-width:720px){
  #view-tindung .bk-hero{flex-direction:column;padding:18px}
  #view_tindung .bk-title{font-size:clamp(26px,8.2vw,44px);}
  #view_tindung .bk-grid{grid-template-columns:1fr}
}

/* Parity/compat aliases (unscoped bk*) */
.bk-hero{display:flex;align-items:flex-start;gap:28px;padding:28px 18px;border-radius:18px}
.bk-hero .bk-hero__body{flex:1;text-align:left}
.bk-title{margin:0;font-family:Georgia,serif;font-weight:900;color:var(--ink);line-height:.95;font-size:clamp(28px,7vw,96px)}
.bk-sub{margin:8px 0 14px;color:var(--muted);font-weight:700;font-size:18px}
.bk-seg{display:inline-flex;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#fff}
.bk-seg__btn{padding:8px 14px;border-radius:999px;border:0;background:transparent;font-weight:800;color:#0f172a;cursor:pointer}
.bk-seg__btn.is-active{background:var(--brand);color:#fff}
.bk-hero__img{flex:0 0 320px;min-height:220px;border-radius:16px;border:1px solid var(--line);background:#f6f8fb center/cover no-repeat;box-shadow:0 10px 28px rgba(2,6,23,.06)}
.panel{padding:8px 0 22px}
.card{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(2,6,23,.06);padding:14px}
details.acc{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(2,6,23,.06);overflow:hidden}
details.acc+details.acc{margin-top:10px}
details.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;font-weight:900}
details.acc summary::-webkit-details-marker{display:none}
details.acc[open] summary{background:#fff7f7;border-bottom:1px solid #ffe2e5}
.acc-body{padding:10px 16px 14px;color:var(--muted)}
.acc-body ul{margin:6px 0 0 18px}
.sticky-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:1200;display:flex;gap:10px;align-items:center;max-width:980px;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--brand),#ff6b79);color:#fff;box-shadow:0 18px 60px rgba(193,18,31,.18)}
.sticky-cta[hidden]{display:none}

/* ===== LƯU TRÚ v2 (sv2*) ===== */
.sv2.wrap{max-width:1100px;margin:0 auto;padding:16px}
.sv2-hero{position:relative;padding:16px 0 8px}
.sv2-title{font-size:clamp(22px,4vw,36px);font-weight:900;margin:0}
.sv2-sub{color:#555;margin:6px 0 12px}
.sv2-seg{display:flex;gap:8px;flex-wrap:wrap}
.sv2-seg__btn{border:1px solid #ddd;background:#fff;border-radius:999px;padding:8px 14px;font-weight:600}
.sv2-seg__btn.is-active{background:#111;color:#fff;border-color:#111}
.sv2-panel{margin-top:14px}
.sv2-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}
.sv2-hi{background:#fafafa;border:1px solid #eee;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.sv2-hi b{font-weight:800}
.sv2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sv2-card{background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 1px 0 rgba(0,0,0,.04);overflow:hidden;display:flex;flex-direction:column}
.sv2-card--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,38%) 1fr}
.sv2-cover{background:#f2f2f2;height:160px;background-image:var(--img);background-size:cover;background-position:center}
.sv2-card--wide .sv2-cover{height:auto;min-height:220px}
.sv2-body{padding:12px}
.sv2-h3{margin:0 0 8px;font-size:18px;font-weight:800}
.sv2-list{margin:0 0 8px;padding-left:18px;line-height:1.5}
.sv2-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.sv2-price{font-weight:800;color:#c1121f}
.sv2-qa{border:1px solid #eee;border-radius:12px;padding:10px 12px;background:#fff}
.sv2-faq{display:grid;gap:10px;margin-top:14px}
/* Mobile tweaks */
@media (max-width: 900px){
  .sv2-grid{grid-template-columns:1fr 1fr}
  .sv2-card--wide{grid-template-columns:1fr}
  .sv2-card--wide .sv2-cover{min-height:180px}
}
@media (max-width: 640px){
  .sv2.wrap{padding:12px}
  .sv2-highlights{grid-template-columns:1fr}
  .sv2-grid{grid-template-columns:1fr}
  .sv2-meta{flex-direction:column;align-items:flex-start}
  .sv2-seg__btn{padding:8px 12px}
}
/* ==== LƯU TRÚ → Y CHANG TÍN DỤNG (dense, clone crx/bk) ==== */
#view-luutru .stx-hero{
  border:1px solid var(--line); border-radius:16px; padding:16px;
  background:#fff; text-align:center; box-shadow:0 10px 28px rgba(2,6,23,.06); margin-bottom:12px;
}
#view-luutru .stx-title{margin:0;color:var(--brand);font-weight:900;font-size:clamp(20px,4.5vw,32px)}
#view_luutru .stx-sub{margin:6px 0 10px;color:#334155;font-weight:700}

/* Segmented control = crx */
#view-luutru .stx-seg{display:inline-flex;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#fff}
#view-luutru .stx-seg__btn{padding:8px 14px;border-radius:999px;border:0;background:transparent;font-weight:800;color:#0f172a;cursor:pointer}
#view-luutru .stx-seg__btn.is-active{background:var(--brand);color:#fff}

/* Cards = crx-card */
#view-luutru .stx-card,
#view-luutru .sv2-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);overflow:hidden;display:flex;flex-direction:column
}
#view-luutru .stx-card--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,38%) 1fr}
#view-luutru .sv2-card:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(2,6,23,.10);border-color:#ffd6db}
#view-luutru .sv2-card{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 24px rgba(2,6,23,.05); overflow:hidden; display:flex; flex-direction:column}
#view-luutru .sv2-cover{padding-top:60%; border-bottom:1px solid var(--line)}
#view_luutru .sv2-body{padding:12px}
#view_luutru .sv2-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}
#view_luutru .sv2-price{color:var(--brand);font-weight:900}

/* Zigzag locations */
#view-luutru .zig{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0}
#view-luutru .zig .ph{height:200px; border-radius:12px; background:#eaeaea; background-image:var(--img); background-size:cover; background-position:center}
#view-luutru .zig .txt{background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:0 10px 24px rgba(2,6,23,.05)}
#view-luutru .zig:nth-of-type(even){grid-template-columns:1fr 1fr}
@media(max-width:960px){ #view-luutru .zig{grid-template-columns:1fr} }

/* Sticky CTA on mobile */
#stay-sticky{position:fixed; left:0; right:0; bottom:10px; display:none; justify-content:center; z-index:50}
#stay-sticky .bar{background:var(--brand); color:#fff; border-radius:999px; padding:10px 16px; box-shadow:0 12px 24px rgba(211,47,47,.4); font-weight:900}
@media(max-width:768px){ #stay-sticky{display:flex} }


/* KTX enhancements */
#view-luutru .pillStrip{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#view-luutru .pill{border:1px dashed var(--brand); color:var(--brand); padding:6px 10px; border-radius:999px; font-weight:700; background:#fff}

#view-luutru .metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:10px 0}
#view-luutru .metrics .m{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; box-shadow:0 10px 24px rgba(2,6,23,.05)}
#view-luutru .metrics .m b{font-size:18px; color:var(--brand); display:block}

#view-luutru .hl{background:linear-gradient(90deg, rgba(211,47,47,.06), rgba(211,47,47,.02)); border:1px solid var(--line); border-radius:16px; padding:10px}
#view-luutru .hl .hl-inner{display:flex; align-items:center; justify-content:space-between}
#view_luutru .hl .txt b{color:var(--brand); font-size:18px}

#view-luutru .ktx-filter{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
#view-luutru .ktx-filter .chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer}
#view-luutru .ktx-filter .chip.is-on{border-color:var(--brand); color:var(--brand)}

#view-luutru .sv2-cover{position:relative}
#view-luutru .sv2-cover .badge{position:absolute; left:10px; top:10px; background:var(--brand); color:#fff; padding:4px 8px; border-radius:999px; font-weight:900; font-size:12px}

#view-luutru .sv2-faq{display:grid; gap:8px; margin:12px 0}
#view_luutru .sv2-faq details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px}
#view_luutru .sv2-faq summary{cursor:pointer; font-weight:900}
@media(max-width:960px){ #view-luutru .metrics{grid-template-columns:repeat(2,1fr)} }


/* === HERO center overlay + animated watermark === */
#view-luutru .sv2-heroFull .hero-inner{justify-content:center; align-items:center}
#view-luutru .sv2-heroAside{max-width:640px; text-align:center}
#view-luutru .sv2-heroCTAs{display:flex; flex-direction:column; gap:10px; align-items:center}
#view-luutru .sv2-heroAside .sv2-switch{width:min(520px, 90%);}
#view-luutru .sv2-heroBrand .brand-top{margin-inline:auto}

/* Watermark */
#view-luutru .sv2-heroFull .hero-bg{position:relative; overflow:hidden}
#view-luutru .sv2-heroFull .hero-bg::before{
  content:" VIETFORTURE HOME · LƯU TRÚ · KTX · CĂN HỘ DỊCH VỤ · VIETFORTURE HOME · LƯU TRÚ · KTX · CĂN HỘ DỊCH VỤ · VIETFORTURE HOME · LƯU TRÚ · KTX · CĂN HỘ DỊCH VỤ · ";
  position:absolute; inset:auto -200% 20% -200%;
  white-space:nowrap;
  font-family:"Times New Roman", Times, serif;
  font-weight:900;
  font-size:clamp(36px,8vw,96px);
  letter-spacing:2px;
  color:rgba(211,47,47,.12);
  text-transform:uppercase;
  animation:sv2-watermark 24s linear infinite;
}
@keyframes sv2-watermark {
  from { transform:translate(-0%, -50%);}
  to   { transform:translate(-35%, -50%);}
}
@media (max-width:960px){ #view-luutru .sv2-heroGrid{grid-template-columns:1fr} }

/* Brand heading */
#view-luutru .sv2-heroBrand .brand-top{
  font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase;
  background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25);
  text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25);
}
#view-luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view-luutru .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view-luutru .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view-luutru .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutru .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutru .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view-luutru .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view-luutru .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view-luutru .sv2-shelfCard .shelf-img::before, #view-luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view-luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view-luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view-luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutru .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutru .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutru .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutru .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutru .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutru .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutru .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view-luutru .sv2-shelfCard .shelf-img::before, #view-luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutru .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutru .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutru .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutru .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutru .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutru .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutru .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view-luutru .sv2-shelfCard .shelf-img::before, #view-luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutru .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutru .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutru .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutru .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutru .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutru .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutru .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutru .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutru .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutru .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutru .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutru .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutru .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-heroFull .hero-inner{position:absolute; inset:0; display:flex; align-items:center; padding:18px}
#view_luutru .sv2-heroAside{max-width:460px; background:#1e1e1e; color:#fff; border-radius:20px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.18)}
#view_luutru .sv2-heroBrand .brand-top{font-family:"Times New Roman", Times, serif; font-weight:900; letter-spacing:2px; text-transform:uppercase; background:linear-gradient(180deg,#fff 0%,#ffe5e5 40%,#ffd6d6 60%,#ffffff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); text-shadow:0 4px 0 rgba(0,0,0,.08), 0 10px 24px rgba(211,47,47,.25)}
#view_luutru .sv2-heroBrand .brand-sub{color:#f0f0f0}

/* Switch */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch .sv2-seg__btn{border:none; background:transparent; color:#111; font-weight:800; padding:10px 14px; border-radius:999px}
#view_luutra .sv2-switch .sv2-seg__btn.is-active{color:#fff}
#view_luutra .sv2-switch__thumb{position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px); border-radius:999px; background:var(--brand,#d32f2f); transition:transform .25s ease}
#view_luutra .sv2-switch[data-active="apt"] .sv2-switch__thumb{ transform:translateX(100%) }
#view_luutra .sv2-switch[data-active="dorm2"] .sv2-switch__thumb{ transform:translateX(0%) }
#view-luutra .sv2-switch .sv2-seg__btn{position:relative; z-index:1}
#view_luutra .sv2-heroActions{display:flex; gap:10px; margin-top:8px}
#view_luutra .sv2-notify{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brand); color:var(--brand)}

/* Image overlay: logo default then real image on hover */
#view-luutru .sv2-cover, #view-luutru .sv2-shelfCard .shelf-img, #view-luutru .sv2-aptPanel .tiny{position:relative; background:none}
#view-luutru .sv2-cover::before, #view_luutru .sv2-shelfCard .shelf-img::before, #view_luutru .sv2-aptPanel .tiny::before{content:""; position:absolute; inset:0; background:#eee url('dragon-v1.png') center/90px no-repeat; opacity:1; transition:opacity .35s ease}
#view-luutru .sv2-cover::after, #view_luutru .sv2-shelfCard .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease}
#view-luutru .sv2-card:hover .sv2-cover::before, #view_luutru .sv2-shelfCard:hover .shelf-img::before, #view_luutru .sv2-aptPanel .tiny:hover::before{opacity:0}
#view_luutru .sv2-card:hover .sv2-cover::after, #view_luutru .sv2-shelfCard:hover .shelf-img::after, #view_luutru .sv2-aptPanel .tiny:hover::after{opacity:1}

/* ===== HERO FULL ===== */
#view-luutru .sv2-heroFull{position:relative; padding:0; margin-bottom:10px}
#view-luutru .sv2-heroFull .hero-bg{height:420px; width:100%; border-radius:20px; background:#ddd; background-image:var(--img); background-size:cover; background-position:center; box-shadow:0 16px 32px rgba(0,0,0,.12)}
#view-luutru .sv2-hero
#view-luutru .lightbox.is-open{display:flex}


/* ====== KTX layout upgrades ====== */
#view-luutru .ktx-subnav{
  position: sticky; top: 6px; z-index: 5;
  display: flex; gap: 10px; overflow:auto; padding:8px;
  border:1px solid var(--line); border-radius:999px; background:#fff9f9;
  box-shadow:0 10px 24px rgba(211,47,47,.08);
  margin: 12px 0;
}
#view-luutru .ktx-subnav a{
  flex:0 0 auto; padding:8px 14px; border-radius:999px;
  font-weight:800; color:#b71c1c; text-decoration:none; border:1px solid #ffd5d5; background:#fff;
}
#view-luutru .ktx-subnav a:hover{background:#fff2f2}

#sv2-dorm2 [data-reveal], #sv2-apt [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .25s ease, transform .25s ease}
#sv2-dorm2 [data-reveal].is-in, #sv2-apt [data-reveal].is-in{opacity:1; transform:none}

#view-luutru .intro-half,
#view-luutru .roomx,
#view-luutru .zig,
#view-luutru .sv2-boxGrid,
#view-luutru .feat3,
#view-luutru .sv2-priceTable,
#view-luutru .sv2-contact{
  padding: 28px;
  border:1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  margin: 16px 0;
}

#view-luutru h3{font-size: clamp(24px, 3vw, 28px)}
#view-luutru .sv2-secTitle span{font-size: clamp(28px, 4vw, 40px); font-weight: 900}

/* Room grid 3-col desktop */
#view-luutru .roomx .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:960px){#view-luutru .roomx .grid{grid-template-columns:1fr}}

/* Lightbox image caption (optional future) */
#view-luutru .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:120}
#view-luutru .lightbox.is-open{display:flex}

/* Subtle card borders */
#view-luutru .flip-front, #view-luutru .flip-back,
#view-luutru .sv2-table, #view-luutru .sv2-box{border-color:#ececec}


/* Switch animation: color runs to active */
#view-luutru .sv2-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid #ffd5d5; border-radius:999px; padding:4px; box-shadow:0 8px 18px rgba(0,0,0,.08)}
#view-luutru .sv2-switch__thumb{
  position:absolute; inset:4px auto 4px 4px; width:calc(50% - 4px);
  border-radius:999px; background:linear-gradient(90deg, #d32f2f 0%, #ef5350 100%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
#view-luutru .sv2-switch.is-anim .sv2-switch__thumb{
  animation:sv2-sheen .48s ease both;
}
@keyframes sv2-sheen{
  0%{filter:saturate(1);}
  30%{filter:saturate(1.6) brightness(1.1);}
  100%{filter:saturate(1);}
}


/* Section framing */
#view-luutru .intro-half,
#view-luutru .roomx,
#view-luutru .zig,
#view-luutru .sv2-boxGrid,
#view-luutru .feat3,
#view-luutru .sv2-priceTable,
#view-luutru .sv2-contact{
  border:1px solid #ececec;
  box-shadow:
    0 10px 24px rgba(0,0,0,.05),
    inset 0 0 0 1px #ffe5e5;
}
#view-luutru .sv2-secTitle span{border-bottom:4px solid rgba(211,47,47,.2); padding-bottom:6px}


#view-luutru .sv2-heroBrand .brand-top{
  text-transform:uppercase; letter-spacing:.12em; font-weight:900;
  text-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* Switch thumb override */
#view-luutru .sv2-switch .sv2-switch__thumb{
  background:linear-gradient(90deg,#d32f2f 0%, #ef5350 100%) !important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1) !important;
}
#view-luutru .sv2-switch .sv2-switch__thumb::after{
  content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 30%, transparent 60%);
  transform:translateX(-120%); pointer-events:none; border-radius:inherit;
}
#view-luutru .sv2-switch.is-anim .sv2-switch__thumb::after{
  animation:sv2-thumb-sheen .5s ease;
}
@keyframes sv2-thumb-sheen{ to{ transform:translateX(120%);} }

/* Section frames v2: left accent stripe */
#view-luutru .intro-half,
#view-luutru .roomx,
#view-luutru .zig,
#view-luutru .sv2-boxGrid,
#view-luutru .feat3,
#view-luutru .sv2-priceTable,
#view-luutru .sv2-contact{
  position:relative;
  border:1px solid #e9e9e9;
  border-left-width:6px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
#view-luutru .intro-half::before,
#view-luutru .roomx::before,
#view-luutru .zig::before,
#view-luutru .sv2-boxGrid::before,
#view-luutru .feat3::before,
#view-luutru .sv2-priceTable::before,
#view-luutru .sv2-contact::before{
  content:""; position:absolute; left:-6px; top:0; bottom:0; width:6px; border-radius:16px 0 0 16px;
  background:linear-gradient(180deg, #ffb9b9, #ffd9d9);
}


/* Lưu trú hero: force Times for title per brand */
#view-luutru .ui-hero__title{font-family:"Times New Roman", Times, serif !important; letter-spacing:.02em;}

/* Segmented switch with moving thumb (scoped to Lưu trú) */
#view-luutru .sv2-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #ffd6db;border-radius:999px;padding:4px;box-shadow:0 10px 24px rgba(2,6,23,.06);gap:0}
#view-luutru .sv2-switch__thumb{position:absolute;inset:4px auto 4px 4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(90deg,#d32f2f,#ef5350);transform:translateX(0%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
#view-luutru .sv2-switch[data-active="apt"] .sv2-switch__thumb{transform:translateX(100%)}
#view-luutru .sv2-seg__btn{position:relative;z-index:1;padding:10px 16px;font-weight:900;color:#b1121f;border-radius:999px}
#view-luutru .sv2-seg__btn.is-active{color:#fff}

/* CTA spacing on glass card */
#view-luutru .ui-hero__body .btn{min-height:44px}

/* Switch red-follow */
#view-luutru .sv2-seg__btn{color:#c1121f}
#view-luutru .sv2-seg__btn{background:transparent}
#view-luutru .sv2-switch{background:#fff}
/* === Scroll progress bar === */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#c1121f,#ff6b79);z-index:3000;box-shadow:0 2px 6px rgba(193,18,31,.35)}

/* === Parallax hero word === */
.vf-hero .word.parallax{will-change:transform;transition:transform .06s linear}

/* === Ripple for interactive elements === */
.btn,.tab.desk,.tab.mob,.menu-link{position:relative;overflow:hidden}
.btn::after,.tab.desk::after,.tab.mob::after,.menu-link::after{
  content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:6px;height:6px;border-radius:50%;
  background:rgba(255,214,219,.6);transform:translate(-50%,-50%) scale(0);
  transition:transform .45s ease,opacity .6s ease;opacity:0;pointer-events:none
}
.btn:active::after,.tab.desk:active::after,.tab.mob:active::after,.menu-link:active::after{
  transform:translate(-50%,-50%) scale(18);opacity:1
}

/* === Tilt 3D === */
.tilt{transform-style:preserve-3d;transition:transform .12s ease,box-shadow .18s ease}
.tilt:hover{box-shadow:0 16px 42px rgba(2,6,23,.12)}
.tilt .tilt-pop{transform:translateZ(16px)}

/* === Floating Chatbot === */
.vfchat{position:fixed;right:16px;bottom:16px;z-index:2500}
.vfchat-btn{width:56px;height:56px;border-radius:16px;border:0;background:#c1121f;color:#fff;font-size:22px;box-shadow:0 14px 32px rgba(193,18,31,.35);cursor:pointer}
.vfchat-panel{position:absolute;right:0;bottom:70px;width:min(360px,92vw);height:auto;max-height:min(560px,70vh);background:#fff;border:1px solid #eef2f7;border-radius:18px;box-shadow:0 24px 64px rgba(2,6,23,.22);display:none;overflow:hidden}
.vfchat-panel.is-open{display:flex;flex-direction:column}
.vfchat-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #eef2f7;background:linear-gradient(180deg,#fff,#fff7f7)}
.vfchat-close{border:0;background:#fff;color:#c1121f;border:1px solid #ffd6db;border-radius:10px;padding:4px 10px;cursor:pointer}
.vfchat-body{flex:1;overflow:auto;padding:10px;background:#f8fafc}
.vfchat-form{display:flex;gap:8px;padding:10px;border-top:1px solid #eef2f7;background:#fff}
.vfchat-input{flex:1;border:1px solid #e9eef5;border-radius:12px;padding:10px 12px}
.msg{display:grid;gap:4px;margin:8px 0;max-width:88%}
.msg.you{justify-self:end;text-align:right}
.bubble{display:inline-block;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #e9eef5;box-shadow:0 4px 12px rgba(2,6,23,.04)}
.msg.you .bubble{background:#c1121f;color:#fff;border-color:#c1121f}
.suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.suggest button{border:1px solid #ffd6db;background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;color:#c1121f;cursor:pointer}
/* === VIETBOT Intro === */
.vietbot-intro{position:fixed;inset:0;background:#0b1220cc;display:none;place-items:center;z-index:3001}
.vietbot-intro.is-on{display:grid}
.vietbot-stage{position:relative;width:260px;height:280px}
.vietbot{display:block;width:220px;height:240px;position:absolute;left:50%;transform:translateX(-50%) translateY(0);will-change:transform}
.vietbot-shadow{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:120px;height:18px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.35),rgba(0,0,0,0) 70%);filter:blur(2px);opacity:.6}

/* animations */
@keyframes vbFloatIn{0%{transform:translate(-50%,40px) scale(.8);opacity:0} 100%{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes vbHop{0%{transform:translate(-50%,0)} 40%{transform:translate(-50%,-18px)} 100%{transform:translate(-50%,0)}}
@keyframes vbDock{0%{transform:translate(-50%,0) scale(1)} 100%{transform:translate(calc(50vw - 24px - 16px),calc(50vh - 50px)) scale(.25)}}
@keyframes vbShadowHop{0%{transform:translateX(-50%) scale(1);opacity:.6}40%{transform:translateX(-50%) scale(.85);opacity:.3}100%{transform:translateX(-50%) scale(1);opacity:.6}}

.vb-in{animation:vbFloatIn .5s ease-out both}
.vb-hop{animation:vbHop .6s ease-in-out 3}
.vb-dock{animation:vbDock .7s cubic-bezier(.2,.8,.2,1) forwards}
.vb-shadow-hop{animation:vbShadowHop .6s ease-in-out 3}

/* Chat button icon idle */
#vfChatBtn .vb-mini{width:24px;height:24px;display:inline-block;vertical-align:middle}
@keyframes vbBtnPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
#vfChatBtn.has-vietbot{animation:vbBtnPulse 2.6s ease-in-out infinite}
/* VIETBOT toast góc phải, không che chữ */
.vietbot-intro{position:fixed;right:16px;bottom:86px;display:none;z-index:3001;pointer-events:none}
.vietbot-intro.is-on{display:block}
.vietbot-stage{position:relative;width:300px;height:260px}
.vietbot{position:absolute;right:0;bottom:0;width:200px;height:220px;transform:translate(0,0)}
.vietbot-shadow{position:absolute;right:22px;bottom:8px;width:120px;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.35),rgba(0,0,0,0) 70%);filter:blur(2px);opacity:.6}

/* Greeting bubble luôn thấy rõ */
.vietbot-say{position:absolute;right:80px;bottom:190px;max-width:240px;background:#fff;color:#c1121f;
  border:2px solid #ffc2ca;border-radius:14px;padding:8px 12px;font-weight:800;
  box-shadow:0 12px 32px rgba(193,18,31,.18)}
.vietbot-say::after{content:"";position:absolute;right:14px;top:100%;border:10px solid transparent;border-top-color:#fff}

/* mắt nháy + đầu gật khi hop */
.vb-eye{transform-origin:center;animation:vbBlink 5s linear infinite}
@keyframes vbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
svg#vietbotSVG #vbHead{transform-origin:110px 95px}
.vb-hop svg#vietbotSVG #vbHead{animation:vbHeadBob .6s ease-in-out 3}
@keyframes vbHeadBob{0%{transform:rotate(0)}25%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}

/* tay vẫy lên trên, ưu tiên cao */
svg#vietbotSVG #vbHand{transform-origin:184px 152px}
.vb-wave svg#vietbotSVG #vbHand{animation:vbWaveUp .9s ease-in-out 3}
@keyframes vbWaveUp{
  0%{transform:rotate(-50deg)}
  25%{transform:rotate(-30deg)}
  50%{transform:rotate(-70deg)}
  75%{transform:rotate(-28deg)}
  100%{transform:rotate(-50deg)}
}

/* intro motions */
@keyframes vbFloatIn{0%{transform:translate(0,20px) scale(.92);opacity:0}100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes vbHop{0%{transform:translate(0,0)}40%{transform:translate(0,-16px)}100%{transform:translate(0,0)}}
@keyframes vbShadowHop{0%{transform:scale(1);opacity:.6}40%{transform:scale(.85);opacity:.3}100%{transform:scale(1);opacity:.6}}
.vb-in{animation:vbFloatIn .45s ease-out both}
.vb-hop{animation:vbHop .55s ease-in-out 3}
.vb-shadow-hop{animation:vbShadowHop .55s ease-in-out 3}

/* chat button pulse vẫn dùng lớp cũ */
#vfChatBtn.has-vietbot{animation:vbBtnPulse 2.6s ease-in-out infinite}
/* VIETBOT: đảm bảo lớp áp trên chính SVG */
#vietbotSVG{transform-origin:center center; will-change:transform}

/* Vẫy tay: sửa selector để áp khi .vb-wave nằm trên chính #vietbotSVG */
#vietbotSVG.vb-wave #vbHand{animation:vbWaveUp .9s ease-in-out 3}

/* Chào: bóng nói nổi trên mọi thứ, không “tụt” xuống */
.vietbot-say{z-index:2}

/* Toast không tạo khoảng trắng vì là fixed và pointer-events none */
.vietbot-intro{position:fixed; right:16px; bottom:86px; pointer-events:none; z-index:3001}

/* Dock mượt hơn một chút */
@keyframes vbDockEase{0%{transform:translate(0,0) scale(1)}
60%{transform:translate(var(--dx,0),var(--dy,0)) scale(.6)}
100%{transform:translate(var(--dx,0),var(--dy,0)) scale(.25)}}
/* === VIETBOT: overlay tối + căn giữa + không cắt tay === */
.vietbot-intro{position:fixed;inset:0;display:none;place-items:center;z-index:4000}
.vietbot-intro.is-on{display:grid}
.vietbot-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter:saturate(90%) blur(2px)}
.vietbot-stage{position:relative;width:360px;height:340px;overflow:visible;pointer-events:none}
#vietbotSVG{overflow:visible;transform-origin:center center;will-change:transform}
.vietbot{width:240px;height:260px}
.vietbot-shadow{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:150px;height:22px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.30),rgba(0,0,0,0) 70%);filter:blur(2px);opacity:.6}
.vietbot-say{position:absolute;left:50%;top:12%;transform:translate(-50%,0);
  max-width:320px;background:#fff;color:#c1121f;font-weight:800;border:2px solid #ffc2ca;border-radius:14px;padding:10px 14px;
  box-shadow:0 16px 40px rgba(193,18,31,.18);z-index:2;transition:opacity .25s ease,transform .25s ease}
.vietbot-say.hide{opacity:0;transform:translate(-50%,-8px)}

/* mắt + đầu */
.vb-eye{transform-origin:center;animation:vbBlink 5s linear infinite}
@keyframes vbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
#vbHead{transform-origin:110px 95px}
.vb-hop #vbHead{animation:vbHeadBob .6s ease-in-out 3}
@keyframes vbHeadBob{0%{transform:rotate(0)}25%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}

/* tay vẫy LÊN TRÊN */
#vbHand{transform-origin:184px 152px}
#vietbotSVG.vb-wave #vbHand{animation:vbWaveUp .9s ease-in-out 3}
@keyframes vbWaveUp{
  0%{transform:rotate(-50deg)}
  25%{transform:rotate(-28deg)}
  50%{transform:rotate(-72deg)}
  75%{transform:rotate(-28deg)}
  100%{transform:rotate(-50deg)}
}

/* intro motions */
@keyframes vbFloatIn{0%{transform:translateY(22px) scale(.92);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes vbHop{0%{transform:translateY(0)}40%{transform:translateY(-18px)}100%{transform:translateY(0)}}
@keyframes vbShadowHop{0%{transform:scale(1);opacity:.6}40%{transform:scale(.85);opacity:.3}100%{transform:scale(1);opacity:.6}}
.vb-in{animation:vbFloatIn .50s ease-out both}
.vb-hop{animation:vbHop .55s ease-in-out 3}
.vb-shadow-hop{animation:vbShadowHop .55s ease-in-out 3}

/* dock fallback (nếu thiếu WAAPI) */
@keyframes vbDockEase{
  0%{transform:translate(0,0) scale(1)}
  60%{transform:translate(var(--dx,0),var(--dy,0)) scale(.6)}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(.25)}
}
/* VIETBOT v10: overlay tối, khung chào rõ, tay không bị che */
.vietbot-intro{position:fixed;inset:0;display:none;place-items:center;z-index:4000}
.vietbot-intro.is-on{display:grid}
.vietbot-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.62);backdrop-filter:saturate(90%) blur(2px)}
.vietbot-stage{position:relative;width:400px;height:380px;overflow:visible;pointer-events:none}
#vietbotSVG{overflow:visible;transform-origin:center center;will-change:transform}
.vietbot{width:260px;height:280px}
.vietbot-shadow{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:160px;height:24px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.30),rgba(0,0,0,0) 70%);filter:blur(2px);opacity:.6}

/* Bubble chào: luôn rõ, căn giữa; ẩn mượt khi dock */
.vietbot-say{position:absolute;left:50%;top:10%;transform:translate(-50%,0);
  max-width:340px;background:#fff;color:#7a0e14;font-weight:900;letter-spacing:.4px;text-transform:uppercase;
  border:2px solid #ffc2ca;border-radius:16px;padding:12px 16px;
  box-shadow:0 18px 46px rgba(193,18,31,.22);z-index:5;mix-blend-mode:normal}
.vietbot-say::after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
  border:10px solid transparent;border-top-color:#fff}
.vietbot-say.hide{opacity:0;transform:translate(-50%,-8px);transition:opacity .28s ease, transform .28s ease}

/* Mắt nháy + đầu gật khi nhảy */
.vb-eye{transform-origin:center;animation:vbBlink 5s linear infinite}
@keyframes vbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
#vbHead{transform-origin:120px 98px}
.vb-hop #vbHead{animation:vbHeadBob .6s ease-in-out 3}
@keyframes vbHeadBob{0%{transform:rotate(0)}25%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}

/* Tay vẫy LÊN TRÊN */
#vbHand{transform-origin:192px 164px}
#vietbotSVG.vb-wave #vbHand{animation:vbWaveUp .9s ease-in-out 3}
@keyframes vbWaveUp{
  0%{transform:rotate(-50deg)}
  25%{transform:rotate(-28deg)}
  50%{transform:rotate(-75deg)}
  75%{transform:rotate(-28deg)}
  100%{transform:rotate(-50deg)}
}

/* Antenna bounce */
#vbAnt{transform-origin:0 -10px}
.vb-hop #vbAnt{animation:vbAnt .6s ease-in-out 3}
@keyframes vbAnt{0%{transform:translateY(0)}40%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* Intro motions */
@keyframes vbFloatIn{0%{transform:translateY(24px) scale(.92);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes vbHop{0%{transform:translateY(0)}40%{transform:translateY(-20px)}100%{transform:translateY(0)}}
@keyframes vbShadowHop{0%{transform:scale(1);opacity:.6}40%{transform:scale(.85);opacity:.3}100%{transform:scale(1);opacity:.6}}
.vb-in{animation:vbFloatIn .52s ease-out both}
.vb-hop{animation:vbHop .58s ease-in-out 3}
.vb-shadow-hop{animation:vbShadowHop .58s ease-in-out 3}

/* Dock fallback (nếu thiếu WAAPI) */
@keyframes vbDockEase{
  0%{transform:translate(0,0) scale(1)}
  60%{transform:translate(var(--dx,0),var(--dy,0)) scale(.62)}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(.25)}
}
/* === Tùy chỉnh kích thước khung chào === */
:root{
  --vb-bubble-w: 560px;   /* chiều rộng tối đa */
  --vb-bubble-fs: 14px;   /* cỡ chữ */
  --vb-bubble-lh: 3;   /* line-height */
  --vb-bubble-py: 2px;   /* padding dọc */
  --vb-bubble-px: 10px;   /* padding ngang */
  --vb-bubble-radius: 18px; /* bo góc */
  --vb-bubble-tail: 10px; /* kích thước “đuôi” */
}
.vietbot-say{
  max-width: var(--vb-bubble-w);
  font-size: var(--vb-bubble-fs);
  line-height: var(--vb-bubble-lh);
  padding: var(--vb-bubble-py) var(--vb-bubble-px);
  border-radius: var(--vb-bubble-radius);
}
.vietbot-say::after{
  border-width: var(--vb-bubble-tail);
}
/* FOUC guard */
.vietbot-intro[hidden]{display:none!important}

/* Tay ở trạng thái nghỉ = 0deg để không lộ khi load */
#vbHand{transform-origin:192px 164px; transform:rotate(0deg)}
#vietbotSVG.vb-wave #vbHand{animation:vbWaveUp .9s ease-in-out 3}

/* Hiệu ứng đặc sắc: halo + pháo sáng khi vẫy tay */
.vb-halo{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:280px;height:280px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,154,166,.35), rgba(255,154,166,0) 70%);filter:blur(6px);opacity:.0;pointer-events:none}
.vb-halo.on{animation:vbHalo 1100ms ease-out both}
@keyframes vbHalo{0%{opacity:.0;transform:translate(-50%,-50%) scale(.8)}30%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}

.vb-spark{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%, #fff 0 30%, #ff9aa6 45%, rgba(193,18,31,.0) 70%);
  box-shadow:0 0 10px rgba(255,154,166,.8);opacity:0;animation:vbSpark 700ms ease-out forwards}
@keyframes vbSpark{
  0%{opacity:.0;transform:translate(0,0) scale(.6)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(var(--sx,0), var(--sy,-80px)) scale(.9)}
}

/* Bubble chữ to hơn và không chèn robot */
.vietbot-say{z-index:6; mix-blend-mode:normal}
/* === Greeting Style A override === */
.vietbot-say{
  text-transform:none;       /* bỏ UPPERCASE */
  letter-spacing:.2px;
  color:#c1121f;             /* đỏ thương hiệu */
  font-weight:800;
}
/* ===== VIETBOT v12 ===== */
.vietbot-intro[hidden]{display:none!important}
.vietbot-intro{position:fixed;inset:0;display:none;place-items:center;z-index:4000}
.vietbot-intro.is-on{display:grid}
.vietbot-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter:saturate(90%) blur(2px)}
.vietbot-stage{position:relative;width:400px;height:380px;overflow:visible;pointer-events:none}
#vietbotSVG{overflow:visible;transform-origin:center center;will-change:transform}
.vietbot{width:260px;height:280px}
.vietbot-shadow{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:160px;height:24px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.30),rgba(0,0,0,0) 70%);filter:blur(2px);opacity:.6}
.vietbot-say{position:absolute;left:50%;top:10%;transform:translate(-50%,0);
  max-width:340px;background:#fff;color:#c1121f;font-weight:800;border:2px solid #ffc2ca;border-radius:16px;padding:12px 16px;
  box-shadow:0 18px 46px rgba(193,18,31,.22);z-index:5;transition:opacity .28s ease,transform .28s ease}
.vietbot-say.hide{opacity:0;transform:translate(-50%,-8px)}
.vb-skip{pointer-events:auto;margin-left:10px;border:1px dashed #ffc2ca;background:#fff;color:#c1121f;border-radius:999px;padding:4px 8px;font-size:12px}

/* mắt + đầu + anten */
.vb-eye{transform-origin:center;animation:vbBlink 5s linear infinite}
@keyframes vbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
#vbHead{transform-origin:120px 98px}
.vb-hop #vbHead{animation:vbHeadBob .58s ease-in-out 2}
@keyframes vbHeadBob{0%{transform:rotate(0)}25%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
#vbAnt{transform-origin:0 -10px}
.vb-beat #vbAnt{animation:vbBeat .9s ease-in-out 2}
@keyframes vbBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* tay vẫy 2 nhịp hướng LÊN */
#vbHand{transform-origin:192px 164px;transform:rotate(0deg)}
#vietbotSVG.vb-wave #vbHand{animation:vbWaveUp .9s ease-in-out 2}
@keyframes vbWaveUp{
  0%{transform:rotate(-45deg)}
  25%{transform:rotate(-25deg)}
  50%{transform:rotate(-78deg)}
  75%{transform:rotate(-25deg)}
  100%{transform:rotate(-45deg)}
}

/* Intro motions */
@keyframes vbFloatIn{0%{transform:translateY(24px) scale(.92);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes vbHop{0%{transform:translateY(0)}40%{transform:translateY(-20px)}100%{transform:translateY(0)}}
@keyframes vbShadowHop{0%{transform:scale(1);opacity:.6}40%{transform:scale(.85);opacity:.3}100%{transform:scale(1);opacity:.6}}
.vb-in{animation:vbFloatIn 520ms ease-out both}
.vb-hop{animation:vbHop 580ms ease-in-out 2}
.vb-shadow-hop{animation:vbShadowHop 580ms ease-in-out 2}

/* Dock fallback + bounce nhẹ */
@keyframes vbDockEase{
  0%{transform:translate(0,0) scale(1)}
  65%{transform:translate(var(--dx,0),var(--dy,0)) scale(.62)}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(.25)}
}

/* Halo + pháo sáng (8 tia) */
.vb-halo{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:300px;height:300px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,154,166,.35), rgba(255,154,166,0) 70%);filter:blur(6px);opacity:0;pointer-events:none}
.vb-halo.on{animation:vbHalo 1100ms ease-out both}
@keyframes vbHalo{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}30%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
.vb-spark{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%, #fff 0 30%, #ff9aa6 45%, rgba(193,18,31,0) 70%);box-shadow:0 0 10px rgba(255,154,166,.8);
  opacity:0;animation:vbSpark 700ms ease-out forwards}
@keyframes vbSpark{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(var(--sx,0), var(--sy,-80px)) scale(.9)}}

/* Quick chips + typing */
.chat-quickchips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chat-quickchips .chip{border:1px solid #ffd6db;background:#fff;color:#c1121f;border-radius:999px;padding:6px 10px;font-size:12px}
.typing{display:inline-flex;gap:4px;align-items:center;background:#fff;border:1px solid #e9eef5;border-radius:12px;padding:8px 10px}
.typing .dot{width:6px;height:6px;border-radius:50%;background:#cbd5e1;animation:blink 1s infinite}
.typing .dot:nth-child(2){animation-delay:.15s}.typing .dot:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}

/* Dark mode tinh gọn */
@media (prefers-color-scheme: dark){
  .vietbot-backdrop{background:rgba(2,6,23,.6);backdrop-filter:saturate(80%) blur(2px)}
  .vietbot-say{background:#0b1220;color:#ffd6db;border-color:#52232a}
}



/* ===== Credit v16 (from base): layout fix, title 2.0, hero, cards, FAQ/Calc/Contact, animations ===== */
#view-tindung{--line:#e5e7eb}
#view-tindung .cr-titleblock{display:grid;gap:6px;justify-items:center;margin:6px 0 8px}
#view-tindung .bk-title{
  margin:0; font-size:clamp(44px,7.4vw,78px); line-height:1.02; font-weight:1000; text-align:center;
  background:linear-gradient(92deg,#c1121f 0%, #7a0f15 50%, #c1121f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.55px;
  position:relative; isolation:isolate;
}
#view-tindung .bk-title::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-120%); filter:blur(6px); mix-blend-mode:overlay; pointer-events:none;
  animation:titleShine 5s ease-in-out 1s infinite;
}
@keyframes titleShine{ 60%{ transform:translateX(140%)} 100%{ transform:translateX(140%)} }
#view-tindung .bk-kicker{margin:0;color:#334155;font-weight:800;letter-spacing:.2px}
#view-tindung .cr-hero{margin:10px 0 12px}
#view-tindung .cr-hero__stage{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 48px rgba(2,6,23,.08);aspect-ratio:16/9;background:#f3f5ff}
#view-tindung .cr-hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;will-change:opacity}
#view-tindung .cr-hero .slide.is-active{opacity:1}
#view-tindung .cr-hero img{width:100%;height:100%;object-fit:cover}
#view-tindung .cr-hero__dots{display:flex;gap:8px;justify-content:center;margin-top:8px}
#view-tindung .cr-hero__dots .dot{width:10px;height:10px;border-radius:999px;border:1px solid #c1121f;background:#fff;opacity:.6;cursor:pointer}
#view-tindung .cr-hero__dots .dot.is-active{background:#c1121f;opacity:1}
#view-tindung .cc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:12px 0;align-items:stretch}
@media (max-width:980px){#view-tindung .cc-grid{grid-template-columns:1fr}}
#view-tindung .ccard{position:relative;border-radius:18px;padding:1px;display:flex}
#view-tindung .ccard__inner{display:grid;grid-template-columns:minmax(280px,1fr) 1.3fr;border-radius:16px;overflow:hidden;flex:1;min-height:260px;background:linear-gradient(180deg,#ffffff,#f7faff);box-shadow:0 18px 48px rgba(2,6,23,.08)}
@media (max-width:980px){#view-tindung .ccard__inner{grid-template-columns:1fr;min-height:unset}}
#view-tindung .cc-media{position:relative;background:#f3f5ff;min-height:220px}
#view-tindung .cc-media::before{content:"";position:absolute;inset:0;background:var(--img,linear-gradient(135deg,#eef2ff,#e9eefc));background-size:cover;background-position:center;filter:saturate(1.06);transform:scale(1.02);transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .7s; will-change:transform,filter}
#view-tindung .ccard:hover .cc-media::before{transform:scale(1.06);filter:saturate(1.2)}
#view-tindung .cc-media::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 20% 10%, rgba(193,18,31,.10), transparent)}
#view-tindung .cc-body{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:220px}
#view-tindung .cc-title{margin:0;font-weight:1000;color:#0f172a;font-size:clamp(18px,2.2vw,22px)}
#view-tindung .cc-sub{color:#334155;margin:0;line-height:1.5}
#view-tindung .cc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:980px){#view-tindung .cc-list{grid-template-columns:1fr}}
#view-tindung .cc-li{border:1px dashed var(--line);border-radius:12px;background:#fff;padding:10px 12px;font-weight:700;color:#111827;box-shadow:0 10px 26px rgba(2,6,23,.06);transition:transform .2s ease, box-shadow .2s ease;word-break:break-word}
#view-tindung .cc-li:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(2,6,23,.12)}
#view-tindung .cc-cta{display:flex;gap:8px;margin-top:auto}
#view-tindung .btn{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;cursor:pointer;font-weight:900;will-change:transform}
#view-tindung .btn.primary{background:#c1121f;color:#fff;border-color:#b20f1c}
#view-tindung .btn.ghost{background:#fff;color:#0f172a}
#view-tindung .ccard::before{content:"";position:absolute;inset:0;border-radius:18px;background:conic-gradient(from 0deg, rgba(193,18,31,.35), rgba(193,18,31,.05), rgba(193,18,31,.35));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;pointer-events:none}
#view-tindung .cr-faq, #view-tindung .cr-calc, #view-tindung .cr-contact{margin:14px 0;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(2,6,23,.08);padding:12px}
#view-tindung .cr-faq__title, #view-tindung .cr-calc__title, #view-tindung .cr-contact__title{margin:0 0 8px;font-weight:1000;color:#0f172a}
#view-tindung details.qa{border:1px dashed var(--line);border-radius:12px;padding:8px 10px;margin:6px 0;background:linear-gradient(180deg,#ffffff,#f7faff)}
#view-tindung details.qa>summary{cursor:pointer;font-weight:900;display:flex;align-items:center;justify-content:space-between}
#view-tindung details.qa>summary::after{content:"▾";transition:transform .25s ease}
#view-tindung details.qa[open]>summary::after{transform:rotate(180deg)}
#view-tindung .cr-calc .calc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:980px){#view-tindung .cr-calc .calc-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#view-tindung .cr-calc .calc-row{grid-template-columns:1fr}}
#view-tindung .input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px}
#view-tindung .calc-out{margin-top:8px;font-weight:800;color:#0f172a}
#view-tindung .contact-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:980px){#view-tindung .contact-form{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#view-tindung .contact-form{grid-template-columns:1fr}}
#view-tindung .contact-note{color:#334155;margin-top:6px}
/* Animations */
@media (prefers-reduced-motion:no-preference){
  #view-tindung .anim{opacity:0;transform:translateY(10px)}
  #view-tindung .anim.in{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
}



/* ===== Credit v17: title boost, slogan box, directional fades, calc redesign ===== */
#view-tindung .bk-title{
  font-size:clamp(48px,8vw,88px);
  letter-spacing:.6px;
  background-size:200% 100%;
  animation:titleWave 8s linear infinite;
}
@keyframes titleWave{ to { background-position:200% 0; } }

/* Directional fade in */
#view-tindung .fi-left{transform:translateX(-18px); opacity:0}
#view-tindung .fi-right{transform:translateX(18px); opacity:0}
#view-tindung .fi-up{transform:translateY(14px); opacity:0}
#view-tindung .fi-left.in, #view-tindung .fi-right.in, #view-tindung .fi-up.in{
  transform:none; opacity:1; transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}

/* Bottom slogan */
#view-tindung .credit-slogan{margin:18px 0;border-radius:18px; padding:1px;
  background:conic-gradient(from 0deg, rgba(193,18,31,.35), rgba(193,18,31,.05), rgba(193,18,31,.35));
}
#view-tindung .credit-slogan__inner{border-radius:16px; background:#fff; padding:16px; box-shadow:0 18px 48px rgba(2,6,23,.08)}
#view-tindung .credit-slogan__title{margin:0; font-weight:1000; font-size:20px; color:#0f172a}
#view-tindung .credit-slogan__sub{margin:4px 0 10px; color:#334155; font-weight:800}
#view-tindung .credit-slogan__seg{display:flex; gap:8px; margin:6px 0 10px}
#view-tindung .credit-slogan .seg-btn{border:1px solid var(--line); border-radius:999px; padding:8px 12px; background:#fff; font-weight:900; cursor:pointer}
#view-tindung .credit-slogan__rows{display:grid; gap:10px}
#view-tindung .credit-slogan .row{border:1px dashed var(--line); border-radius:12px; padding:10px; background:linear-gradient(180deg,#fff,#f7faff)}
#view-tindung .credit-slogan .row-title{margin:0 0 6px; font-weight:1000}
#view-tindung .credit-slogan .chips{display:flex; flex-wrap:wrap; gap:6px}
#view-tindung .credit-slogan .chip{display:inline-flex; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-weight:900; background:#fff}
#view-tindung .credit-slogan .links{display:flex; gap:6px}
#view-tindung .credit-slogan .link-btn{border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; font-weight:900; cursor:pointer}

/* Calculator redesign */
#view-tindung .cr-calc{position:relative; padding:1px; border-radius:18px; background:linear-gradient(120deg, rgba(193,18,31,.4), rgba(193,18,31,.08), rgba(193,18,31,.4))}
#view-tindung .cr-calc > *{position:relative; z-index:1}
#view-tindung .cr-calc::after{content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:conic-gradient(from 0deg, rgba(193,18,31,.35), rgba(193,18,31,.05), rgba(193,18,31,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
#view-tindung .cr-calc__title{margin:10px 10px 8px; font-weight:1000; color:#0f172a}
#view-tindung .cr-calc .calc-row{position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:10px}
@media(max-width:980px){#view-tindung .cr-calc .calc-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#view-tindung .cr-calc .calc-row{grid-template-columns:1fr}}
#view-tindung .cr-calc .input{width:100%; border:1px solid var(--line); border-radius:12px; padding:12px; font-weight:800}
#view-tindung .cr-calc .sliders{grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
@media(max-width:640px){#view-tindung .cr-calc .sliders{grid-template-columns:1fr}}
#view-tindung .cr-calc .slider{appearance:none; width:100%; height:10px; border-radius:999px; background:#eee; outline:none}
#view-tindung .cr-calc .slider::-webkit-slider-thumb{appearance:none; width:20px; height:20px; border-radius:50%; background:#c1121f; box-shadow:0 0 0 4px rgba(193,18,31,.15)}
#view-tindung .cr-calc .btn.primary{transform:translateZ(0); transition:transform .18s ease}
#view-tindung .cr-calc .btn.primary:active{transform:scale(.98)}
#view-tindung .cr-calc .calc-out{padding:10px; font-weight:900; color:#0f172a}
#view-tindung .cr-calc .calc-out.pop{animation:pop .4s ease}
@keyframes pop{ 0%{transform:scale(.98); opacity:.5} 100%{transform:scale(1); opacity:1} }



/* ===== Credit v18: single hero, trust badges, spacing polish ===== */
#view-tindung .cr-hero{margin:10px 0 10px}
#view-tindung .cr-hero__stage{aspect-ratio:21/9;height:auto;border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#f3f5ff;box-shadow:0 18px 48px rgba(2,6,23,.08)}
#view-tindung .cr-hero img{width:100%;height:100%;object-fit:cover}
#view-tindung .cr-trust{margin:16px 0;border-radius:18px;padding:1px;background:conic-gradient(from 0deg, rgba(193,18,31,.3), rgba(193,18,31,.05), rgba(193,18,31,.3))}
#view-tindung .cr-trust__title{margin:8px 12px;font-weight:1000;color:#0f172a}
#view-tindung .cr-trust .trust-grid{margin:0;padding:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-radius:16px;background:#fff}
@media(max-width:980px){#view-tindung .cr-trust .trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#view-tindung .cr-trust .trust-grid{grid-template-columns:1fr}}
#view-tindung .cr-trust .trust-item{list-style:none;border:1px dashed var(--line);border-radius:12px;background:linear-gradient(180deg,#fff,#f7faff);padding:10px;box-shadow:0 10px 26px rgba(2,6,23,.06)}
#view-tindung .cr-trust .trust-item b{display:block}
/* Minor spacing */
#view-tindung .credit-slogan__inner{padding:18px}



/* ===== Credit v19: calculator ring + breakdown, spacing fixes ===== */
#view-tindung .cr-calc{isolation:isolate}
#view-tindung .cr-calc .wrap{display:grid;grid-template-columns:1.4fr .8fr;gap:12px;padding:10px}
@media(max-width:980px){#view-tindung .cr-calc .wrap{grid-template-columns:1fr}}
#view-tindung .cr-calc .panel{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(2,6,23,.06);padding:10px}
#view-tindung .cr-calc .meter{display:grid;place-items:center;padding:10px}
#view-tindung .ring{width:180px;height:180px;border-radius:50%;background:
  conic-gradient(#c1121f var(--p,0%), #e5e7eb var(--p,0%));position:relative}
#view-tindung .ring::after{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff}
#view-tindung .ring-label{position:absolute;inset:0;display:grid;place-items:center;font-weight:1000;color:#0f172a}
#view-tindung .breakdown{display:grid;gap:6px}
#view-tindung .breakdown .line{display:flex;justify-content:space-between;font-weight:800;color:#0f172a}

/* ===== Credit v26: contain hero dots ===== */
.cr-hero__dots,.cr-hero__dots .dot{display:none!important;height:0!important;margin:0!important;padding:0!important}



/* ===== Credit v27: Zigzag cards + image slots ===== */
#view-tindung .cc-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.95}
#view-tindung .ccard.is-alt .cc-media{order:2}
#view-tindung .ccard.is-alt .cc-body{order:1}
#view-tindung .ccard.is-alt .cc-media::after{background:radial-gradient(60% 70% at 80% 10%, rgba(193,18,31,.10), transparent)}
#view-tindung .ccard__inner{position:relative}
#view-tindung .ccard__inner::after{
  content:""; position:absolute; top:-1px; bottom:-1px; width:14px;
  left:calc(50% - 7px); background:repeating-linear-gradient(
    -45deg, rgba(193,18,31,.18) 0 10px, transparent 10px 20px
  ); opacity:.35; filter:blur(.2px); pointer-events:none;
}
@media(max-width:980px){#view-tindung .ccard__inner::after{display:none}}



/* v29 TRUST + SLOGAN */
#view-tindung .wrap{max-width:1200px;margin:0 auto;padding:0 12px}
#view-tindung .cr-trust{margin:24px 0;border-radius:22px;background:linear-gradient(135deg,#ffe4e7,#ffffff);padding:16px 8px;box-shadow:0 20px 40px rgba(2,6,23,.06)}
#view-tindung .cr-trust .cr-title{font-weight:1000;text-align:center;color:#0f172a;margin:0 0 10px}
#view-tindung .cr-trust .cr-title span{color:#c1121f}
#view-tindung .trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
#view-tindung .trust-item{list-style:none;border:1px dashed #e9edf2;border-radius:16px;background:linear-gradient(180deg,#fff,#f7fafc);padding:14px;display:grid;gap:4px;align-content:start;min-height:96px}
#view-tindung .trust-item b{color:#c1121f}
#view-tindung .credit-slogan{margin:16px 0;border-radius:20px;border:1px solid #e9edf2;background:#fff;box-shadow:0 16px 32px rgba(2,6,23,.04)}
#view-tindung .slogan-title{font-weight:1000;color:#c1121f;text-align:center;margin:12px 0 6px}
#view-tindung .slogan-sub{text-align:center;color:#475569;margin:0 0 12px}
#view-tindung .chips .chip{display:inline-block;margin:6px;padding:8px 12px;border:1px solid #e9edf2;border-radius:999px;background:#fff;font-weight:800}
#view-tindung .slogan-rows .srow{padding:12px;border-top:1px dashed #e9edf2}
#view-tindung .slogan-rows .srow:first-child{border-top:0}
#view-tindung .links{display:flex;gap:8px;flex-wrap:wrap}
#view-tindung .link-btn{padding:8px 12px;border:1px solid #ffd6db;color:#c1121f;background:#fff;border-radius:12px;font-weight:800}
/* basic animation */
.anim{opacity:0;transform:translateY(12px);transition:.6s ease}
.anim.is-in{opacity:1;transform:none}
@media(max-width:980px){#view-tindung .trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#view-tindung .trust-grid{grid-template-columns:1fr}}

/* v29 CHATBOT compact + no-gap */
.chatbot-widget,.chatbot{position:fixed;right:16px;bottom:16px;z-index:60}
.chatbot-widget .welcome{max-width:260px;background:#fff;border:1px solid #e9edf2;border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(2,6,23,.12);margin-bottom:8px}
.chatbot-widget .actions{display:flex;gap:8px;flex-wrap:wrap}
.chatbot-widget .actions .btn{padding:8px 12px;border-radius:999px;border:1px solid #e9edf2;background:#fff;font-weight:800}

/* v29 FOOTER socials */
.footer .socials{display:flex;align-items:center;gap:10px}
.footer .socials .zalo{margin-left:auto;display:inline-flex;width:36px;height:36px;border-radius:50%;background:#0068ff;color:#fff;align-items:center;justify-content:center;font-weight:1000;font-family:system-ui, -apple-system, Segoe UI, Roboto}
.footer .socials a,.footer .socials button{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;border:1px solid #e9edf2;background:#fff}



/* v29.1 TRUST + SLOGAN for both segments */
#view-tindung .wrap{max-width:1200px;margin:0 auto;padding:0 12px}
#view-tindung [id^="cr-trust"]{margin:24px 0;border-radius:22px;background:linear-gradient(135deg,#ffe4e7,#ffffff);padding:16px 8px;box-shadow:0 20px 40px rgba(2,6,23,.06)}
#view-tindung .cr-title{font-weight:1000;text-align:center;color:#0f172a;margin:0 0 10px}
#view-tindung .cr-title span{color:#c1121f}
#view-tindung .trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
#view-tindung .trust-item{list-style:none;border:1px dashed #e9edf2;border-radius:16px;background:linear-gradient(180deg,#fff,#f7fafc);padding:14px;display:grid;gap:4px;align-content:start;min-height:96px}
#view-tindung .trust-item b{color:#c1121f}
#view-tindung [id^="credit-slogan"]{margin:16px 0;border-radius:20px;border:1px solid #e9edf2;background:#fff;box-shadow:0 16px 32px rgba(2,6,23,.04)}
#view-tindung .slogan-title{font-weight:1000;color:#c1121f;text-align:center;margin:12px 0 6px}
#view-tindung .slogan-sub{text-align:center;color:#475569;margin:0 0 12px}
#view-tindung .chips .chip{display:inline-block;margin:6px;padding:8px 12px;border:1px solid #e9edf2;border-radius:999px;background:#fff;font-weight:800}
#view-tindung .slogan-rows .srow{padding:12px;border-top:1px dashed #e9edf2}
#view-tindung .slogan-rows .srow:first-child{border-top:0}
#view-tindung .links{display:flex;gap:8px;flex-wrap:wrap}
#view-tindung .link-btn{padding:8px 12px;border:1px solid #ffd6db;color:#c1121f;background:#fff;border-radius:12px;font-weight:800}
/* animations */
.anim{opacity:0;transform:translateY(12px);transition:.6s ease}
.anim.is-in{opacity:1;transform:none}
@media(max-width:980px){#view-tindung .trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#view-tindung .trust-grid{grid-template-columns:1fr}}



/* v29.1 Footer Zalo circle like FB */
.footer .socials{display:flex;align-items:center;gap:10px}
.footer .socials a{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;border:1px solid #e9edf2;background:#fff}
.footer .socials .zalo{margin-left:auto;background:#0068ff;color:#fff;font-weight:1000;font-family:system-ui, -apple-system, Segoe UI, Roboto}



/* v30 trust+slogan both segments + footer + chatbot */
#view-tindung .wrap{max-width:1200px;margin:0 auto;padding:0 12px}
#view-tindung [id^="cr-trust"]{margin:24px 0;border-radius:22px;background:linear-gradient(135deg,#ffe4e7,#ffffff);padding:16px 8px;box-shadow:0 20px 40px rgba(2,6,23,.06)}
#view-tindung .cr-title{font-weight:1000;text-align:center;color:#0f172a;margin:0 0 10px}
#view-tindung .cr-title span{color:#c1121f}
#view-tindung .trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
#view-tindung .trust-item{list-style:none;border:1px dashed #e9edf2;border-radius:16px;background:linear-gradient(180deg,#fff,#f7fafc);padding:14px;display:grid;gap:4px;align-content:start;min-height:96px}
#view-tindung .trust-item b{color:#c1121f}
#view-tindung [id^="credit-slogan"]{margin:16px 0;border-radius:20px;border:1px solid #e9edf2;background:#fff;box-shadow:0 16px 32px rgba(2,6,23,.04)}
#view-tindung .slogan-title{font-weight:1000;color:#c1121f;text-align:center;margin:12px 0 6px}
#view-tindung .slogan-sub{text-align:center;color:#475569;margin:0 0 12px}
#view-tindung .chips .chip{display:inline-block;margin:6px;padding:8px 12px;border:1px solid #e9edf2;border-radius:999px;background:#fff;font-weight:800}
#view-tindung .slogan-rows .srow{padding:12px;border-top:1px dashed #e9edf2}
#view-tindung .slogan-rows .srow:first-child{border-top:0}
#view-tindung .links{display:flex;gap:8px;flex-wrap:wrap}
#view-tindung .link-btn{padding:8px 12px;border:1px solid #ffd6db;color:#c1121f;background:#fff;border-radius:12px;font-weight:800}
.anim{opacity:0;transform:translateY(12px);transition:.6s ease}
.anim.is-in{opacity:1;transform:none}
@media(max-width:980px){#view-tindung .trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#view-tindung .trust-grid{grid-template-columns:1fr}}

/* Footer socials layout + Zalo icon as circle */
.footer .socials,.footer .social-list{display:flex;align-items:center;gap:10px}
.footer .socials a,.footer .social-list a{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;border:1px solid #e9edf2;background:#fff}
.footer .socials .zalo,.footer .social-list .zalo{margin-left:auto;background:#0068ff;color:#fff;font-weight:1000;font-family:system-ui, -apple-system, Segoe UI, Roboto}

/* Chatbot gap killer */
.chatbot-widget{position:fixed;right:16px;bottom:16px;z-index:60}
.chatbot-widget .welcome{max-width:260px;background:#fff;border:1px solid #e9edf2;border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(2,6,23,.12);margin-bottom:8px}
.chatbot-widget .actions{display:flex;gap:8px;flex-wrap:wrap}
.chatbot-widget .actions .btn{padding:8px 12px;border-radius:999px;border:1px solid #e9edf2;background:#fff;font-weight:800}
.chatbot-widget .gap,.chatbot-widget .spacer,.chatbot-widget .empty{display:none!important}


/* ===== FULL CANVAS: MEAL ===== */
#meal-fullpage{position:fixed;inset:0;background:#f8fafc;z-index:9999;overflow:auto;display:block}
#meal-fullpage[hidden]{display:none}
.mealbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef2f7;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;z-index:2}
.mealbar__title{margin:0;font-size:18px;font-weight:900;color:#0f172a}
.mealwrap{max-width:1120px;margin:0 auto;padding:18px}
.meal-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.meal-title{margin:0;color:#0f172a;font-weight:900;font-size:28px}
.meal-sub{color:#334155;margin:6px 0 10px;font-weight:700}
.meal-badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{border:1px solid #ffd6db;color:#c1121f;border-radius:999px;padding:6px 10px;font-weight:800;background:#fff;font-size:12px}
.input{border:1px solid #e5e9f0;border-radius:10px;padding:10px 12px}
.btn{border:1px solid #ffd6db;background:#fff;color:#c1121f;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
.btn.ghost{border-color:#e5e9f0;color:#0f172a}
.card{border:1px solid #e5e9f0;border-radius:18px;padding:16px;background:#fff;margin:16px 0;box-shadow:0 12px 30px rgba(2,6,23,.06)}
.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.summary{display:flex;gap:8px;flex-wrap:wrap}
.summary .pill{border:1px solid #e5e9f0;border-radius:999px;padding:6px 10px;background:#fff;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hidden{display:none}
.card .item{border:1px solid #eef2f7;border-radius:16px;background:#fff;padding:12px;display:grid;gap:8px;box-shadow:0 8px 20px rgba(2,6,23,.06)}
.item h4{margin:0;color:#0f172a}
.price{font-weight:900;color:#c1121f}
.controls{display:flex;gap:8px;align-items:center}
.cart{border:1px dashed #e9edf2;border-radius:14px;padding:12px;background:#fff}
.cart-list{display:grid;gap:6px}
.cart-total{display:flex;justify-content:space-between;font-weight:900}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.req{color:#dc2626}
.invalid{border-color:#dc2626!important}
.hint{display:block;color:#64748b;font-size:12px;margin-top:4px}
.cta{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #e5e9f0;border-radius:16px;padding:12px;background:#fff;box-shadow:0 8px 20px rgba(2,6,23,.06)}
.footnote{margin:24px 0;color:#64748b}
@media(max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:800px){ .grid{grid-template-columns:repeat(2,1fr)} .form-grid{grid-template-columns:1fr} }
@media(max-width:520px){ .grid{grid-template-columns:1fr} }



/* ===== THEME: Red–White polish (scoped to meal fullpage) ===== */
#meal-fullpage{
  --brand-red:#c1121f;
  --brand-red-2:#a50e1a;
  --brand-rose:#ffe5e9;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e9f0;
  --card:#ffffff;
  --bg:#f8fafc;
}
#meal-fullpage .btn{
  border:1px solid var(--brand-red);
  background:#fff;
  color:var(--brand-red);
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  transition:transform .04s ease, background .12s ease, color .12s ease;
}
#meal-fullpage .btn:hover{ background:var(--brand-red); color:#fff; }
#meal-fullpage .btn:active{ transform:translateY(1px); }
#meal-fullpage .btn.ghost{
  border-color:var(--line);
  color:var(--ink);
}
#meal-fullpage .btn.ghost:hover{
  border-color:var(--brand-red);
  box-shadow:0 0 0 3px var(--brand-rose);
  color:var(--brand-red);
  background:#fff;
}

#meal-fullpage .badge{
  border:1px solid var(--brand-red);
  color:var(--brand-red);
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  background:#fff;
  font-size:12px
}

#meal-fullpage .mealbar{ background:#fff; border-bottom:1px solid var(--line); }
#meal-fullpage .mealwrap{ background:var(--bg); }
#meal-fullpage .card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(2,6,23,.06);
}
#meal-fullpage .head h3{ margin:0; color:var(--ink); }
#meal-fullpage .meal-title{ color:var(--ink); }
#meal-fullpage .meal-sub{ color:#334155; }

#meal-fullpage .summary .pill{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
}

#meal-fullpage .item{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:12px;
  display:grid;
  gap:8px;
  box-shadow:0 8px 20px rgba(2,6,23,.06)
}
#meal-fullpage .price{ font-weight:900; color:var(--brand-red); }

#meal-fullpage .input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
#meal-fullpage .input:focus{ outline: none; box-shadow:0 0 0 3px var(--brand-rose); border-color:var(--brand-red); }

#meal-fullpage .cta{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(2,6,23,.06)
}
#meal-fullpage .req{ color:#dc2626 }
#meal-fullpage .invalid{ border-color:#dc2626!important; box-shadow:0 0 0 3px rgba(220,38,38,.15) }

#meal-fullpage .cart{ border:1px dashed #e9edf2; }
#meal-fullpage .cart-total{ font-weight:900 }
#meal-fullpage .footnote{ color:var(--muted); }

/* subtle hover for cards */
#meal-fullpage .item:hover{ transform:translateY(-1px); transition:transform .12s ease; }




/* ===== ANIMATIONS: smooth UI (scoped to #meal-fullpage) ===== */
#meal-fullpage.anim-enter{ animation: fadeIn .35s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

#meal-fullpage .io{ opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }
#meal-fullpage .io.in{ opacity:1; transform:none; }

#meal-fullpage .fade-img{ opacity:0; transition: opacity .4s ease; }
#meal-fullpage .fade-img.img-in{ opacity:1; }

/* micro-interactions */
#meal-fullpage .btn{ transition:transform .06s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
#meal-fullpage .btn:hover{ box-shadow:0 8px 18px rgba(193,18,31,.12); }
#meal-fullpage .btn:active{ transform:translateY(1px) scale(.995); }

#meal-fullpage .item:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(2,6,23,.10); transition:transform .15s ease, box-shadow .15s ease; }

/* section headers slight pop */
#meal-fullpage .card.io.in .head h3{ animation: pop .25s ease both; }
@keyframes pop{ from{transform:scale(.98); opacity:.8} to{transform:none; opacity:1} }




/* === Redesigned Title: Bữa Ăn KTX + Đặt suất ăn (red-white) === */
#meal-fullpage .hero-red{
  background: radial-gradient(1200px 400px at 10% -20%, rgba(193,18,31,.10), transparent 60%),
              linear-gradient(180deg, #fff 0%, #fff 60%, #fff 100%);
  position: relative;
  overflow: hidden;
}
#meal-fullpage .hero-red::after{
  content:'';
  position:absolute; right:-120px; top:-80px;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(193,18,31,.12), transparent 60%);
  filter: blur(6px);
  pointer-events:none;
}
#meal-fullpage .eyebrow{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--brand-red);
  color:var(--brand-red);
  font-weight:800;
  font-size:12px;
  background:#fff;
  box-shadow:0 6px 18px rgba(193,18,31,.08);
}
#meal-fullpage .hero-title{
  margin:10px 0 6px;
  font-size:40px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--ink);
}
@media(max-width:720px){
  #meal-fullpage .hero-title{ font-size:32px; }
}
#meal-fullpage .hero-sub{
  margin:0 0 12px;
  color:#334155;
  font-weight:600;
}
#meal-fullpage .meal-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
}
#meal-fullpage .hero-left{ display:grid; gap:8px }
#meal-fullpage .hero-right .tools{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end }
#meal-fullpage .hero-right .btn{ border-color:var(--brand-red); }

/* Divider accent under title */
#meal-fullpage .hero-title::after{
  content:''; display:block; margin-top:8px;
  width:88px; height:4px; border-radius:3px;
  background: var(--brand-red);
  box-shadow: 0 6px 18px rgba(193,18,31,.25);
}

/* Improve sticky header title visuals */
#meal-fullpage .mealbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(2,6,23,.04);
}
#meal-fullpage .mealbar__title{
  letter-spacing:.3px;
  color:var(--ink);
}


#view-dichvu article[data-nav="thongbao"]{display:block!important}

/* Meals FAB v2 */
.meal-fab{position:fixed;right:16px;bottom:110px;width:56px;height:56px;border-radius:50%;
  border:0;background:#c1121f;color:#fff;font-size:26px;display:grid;place-items:center;
  box-shadow:0 14px 34px rgba(193,18,31,.28);z-index:5000;cursor:pointer;pointer-events:auto}
.meal-fab:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(193,18,31,.32)}
.meal-fab:active{transform:translateY(0)}

#meal-fullpage{position:fixed;inset:0;z-index:2147483647;background:#f8fafc}
#meal-fullpage[hidden]{display:none}

/* Zalo icon synced with Facebook */
.zalo{width:44px;height:44px;border-radius:12px;background:#ffffff12;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none}
.zalo svg{width:20px;height:20px;display:block}
.zalo .label{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:11px;opacity:.9;color:#ffd6db;white-space:nowrap}

/* Zalo icon synced with Facebook */
.zalo{width:44px;height:44px;border-radius:12px;background:#ffffff12;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none}
.zalo svg{width:20px;height:20px;display:block}
.zalo .label{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:11px;opacity:.9;color:#ffd6db;white-space:nowrap}


/* Badges for Lưu trú after removing prices */
.sv2-badge{
  display:inline-block;
  padding:.25rem .5rem;
  border:1px solid var(--line, #eef2f7);
  border-radius:999px;
  font-size:.875rem;
  background:#fff;
}
.sv2-meta{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

/* Override chat body flex to reduce whitespace */
.vfchat-body{flex:unset;max-height:min(440px,60vh);}

/* Nút thông báo thay cho 'Bữa ăn' ở Dịch vụ */
.svc-notify{display:inline-flex;align-items:center;gap:6px;border:1px dashed #c1121f;background:#fffbea;color:#7c2d12;
  padding:8px 12px;border-radius:12px;cursor:pointer;box-shadow:0 2px 8px rgba(2,6,23,.06);}
.svc-notify .icon{font-size:18px;line-height:1;}
.svc-notify:active{transform:translateY(1px);}

.svc-act h3 .icon{margin-right:6px}