/* ITVmax v2 — design system (2026-10). Light, monochrome; the logo's RGB subpixels are the only colour signature.
   Fonts: Geist (UI + display), Geist Mono (labels, figures), Newsreader italic (one accent phrase per heading). */
/* Be Vietnam Pro tự host (Google Fonts, giấy phép OFL). Font dự phòng "BVP Fallback" là Arial chỉnh kích thước
   cho khớp Be Vietnam Pro, để chữ không xô lệch (CLS) lúc font thật tải xong. */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-400-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-500-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-600-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"BVP Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Roboto");size-adjust:107%;ascent-override:93.5%;descent-override:24.3%;line-gap-override:0%}
@font-face{font-family:"BVP Fallback";font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold");size-adjust:103.7%;ascent-override:96.4%;descent-override:25%;line-gap-override:0%}
:root{
  --paper:#FAFAF8; --paper-2:#F1F1EE; --white:#FFFFFF;
  --ink:#0B0C0F; --ink-2:#15171C; --ink-3:#2A2D35;
  --text:#0B0C0F; --muted:#5E5F66; --rule:#E3E2DE; --rule-2:#D3D2CD;
  --brand:#0072BB; --brand-dk:#005A94; --rgb-r:#F21828; --rgb-g:#1E9B3C; --rgb-b:#0072BB; --cyan:#09B5CD;
  --ok:#14692D; --ok-bg:#E6F4EA;
  /* Be Vietnam Pro: font do người Việt thiết kế, dấu tiếng Việt cân đối. Nhãn và số liệu dùng chung font (--f-mono giữ tên cũ
     cho các rule hiện có); chỉ log kỹ thuật/đồng hồ TV dùng font mono thật (--f-code). */
  --f-sans:"Be Vietnam Pro","BVP Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Be Vietnam Pro","BVP Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-code:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --f-serif:var(--f-sans);
  --w:1200px; --gut:clamp(16px,4vw,40px);
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --nav-h:64px;
}

/* ---------- base (scoped so legacy page CSS can coexist) ---------- */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body.v2{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.v2.v2-page *,body.v2 .x-chrome *{box-sizing:border-box}
:where(body.v2) img{max-width:100%;height:auto}
body.v2 :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.x-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px}
.x-skip:focus{left:8px}
.x-w{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
.x-mono{font-family:var(--f-mono)}
.x-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 14.5px/1 var(--f-sans);letter-spacing:-.005em;text-decoration:none;border-radius:var(--r-sm);padding:12px 18px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.x-btn--ink{background:var(--ink);color:#fff!important}
.x-btn--ink:hover{background:var(--ink-3)}
.x-btn--line{background:var(--white);color:var(--text)!important;border-color:var(--rule-2)}
.x-btn--line:hover{border-color:var(--text)}
.x-btn--white{background:#fff;color:var(--ink)!important}
.x-btn--ghost{color:#fff!important;border-color:#3A3D46}
.x-btn--ghost:hover{border-color:#fff}
.x-btn--sm{padding:9px 14px;font-size:13.5px}

/* ---------- RGB signature ---------- */
.x-sub{display:inline-flex;gap:2px;vertical-align:middle}
.x-sub i{width:4px;height:12px;border-radius:1px;display:block}
.x-sub i:nth-child(1){background:var(--rgb-r)}.x-sub i:nth-child(2){background:var(--rgb-g)}.x-sub i:nth-child(3){background:var(--rgb-b)}
.x-rgbline{display:flex;height:2px}.x-rgbline i{flex:1}
.x-rgbline i:nth-child(1){background:var(--rgb-r)}.x-rgbline i:nth-child(2){background:var(--rgb-g)}.x-rgbline i:nth-child(3){background:var(--rgb-b)}

/* ---------- announcement ---------- */
.x-chrome{font-family:var(--f-sans);line-height:1.5}
.x-chrome a{text-decoration:none}
.x-ann{background:var(--ink);color:#C9CAD0;font-size:13px}
.x-ann .x-w{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.x-ann a{color:#fff}
.x-ann a:hover{text-decoration:underline}
.x-ann b{font:500 10.5px var(--f-mono);color:var(--ink);background:#fff;border-radius:999px;padding:2px 8px;margin-right:8px;letter-spacing:.05em}
.x-ann .x-ann-r{display:flex;align-items:center;gap:14px;white-space:nowrap}
.x-ann .x-ann-r a{color:#C9CAD0}
.x-lang{display:inline-flex;gap:2px;border:1px solid #2C2F37;border-radius:999px;padding:2px}
.x-lang a,.x-lang span{font:500 11px var(--f-mono);color:#A0A1A8!important;padding:3px 9px;border-radius:999px;text-decoration:none!important}
.x-lang [aria-current="true"]{background:#fff;color:var(--ink)!important}

/* ---------- nav ---------- */
.x-nav{position:sticky;top:0;z-index:50;background:rgba(250,250,248,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--rule)}
.x-nav .x-w{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
.x-logo{display:block;flex:none}
.x-logo img{height:38px;width:auto;display:block}
.x-menu{display:flex;align-items:center;gap:4px;flex:1;margin:0;padding:0;list-style:none}
.x-menu>li{position:relative}
.x-menu>li>a,.x-menu>li>button{display:flex;align-items:center;gap:6px;font:500 14px var(--f-sans);color:#3B3C42;background:none;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}
.x-menu>li>a:hover,.x-menu>li>button:hover,.x-menu>li.is-open>button{color:var(--text);background:var(--paper-2)}
.x-menu>li>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6}
.x-drop{position:absolute;left:-12px;top:calc(100% + 10px);min-width:520px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:0 24px 60px -24px rgba(11,12,15,.28);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.x-drop--1{min-width:300px;grid-template-columns:1fr}
.x-menu>li.is-open .x-drop,.x-menu>li:focus-within .x-drop{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (min-width:1025px){.x-menu>li:hover .x-drop{opacity:1;visibility:visible;transform:none}}
.x-drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.x-drop a{display:block;padding:10px 12px;border-radius:8px;color:var(--text)}
.x-drop a:hover{background:var(--paper-2)}
.x-drop a b{display:block;font:500 14px/1.35 var(--f-sans)}
.x-drop a small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.x-drop .x-drop-h{grid-column:1/-1;font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.x-nav-cta{display:flex;align-items:center;gap:10px}
.x-burger{display:none;width:40px;height:40px;border:1px solid var(--rule-2);border-radius:8px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.x-burger span{display:block;width:16px;height:1.5px;background:var(--text);position:relative}
.x-burger span::before,.x-burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--text)}
.x-burger span::before{top:-5px}.x-burger span::after{top:5px}

@media (max-width:1024px){
  .x-burger{display:inline-flex}
  .x-menu{position:fixed;left:0;right:0;top:calc(var(--nav-h) + 36px);bottom:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 40px;overflow:auto;display:none;border-top:1px solid var(--rule)}
  .x-nav.is-open .x-menu{display:flex}
  .x-menu>li{border-bottom:1px solid var(--rule)}
  .x-menu>li>a,.x-menu>li>button{width:100%;justify-content:space-between;padding:16px 4px;font-size:16px}
  .x-drop{position:static;min-width:0;box-shadow:none;border:0;padding:0 0 12px;display:none;opacity:1;visibility:visible;transform:none;grid-template-columns:1fr}
  .x-menu>li.is-open .x-drop{display:grid}
  .x-nav-cta .x-btn{padding:9px 12px;font-size:13px}
}
@media (max-width:560px){.x-ann .x-ann-msg{display:none}.x-ann .x-w{justify-content:flex-end}.x-logo img{height:32px}}

/* ---------- footer ---------- */
.x-foot{background:var(--paper);border-top:1px solid var(--rule);color:var(--muted);font-size:14px;padding-block:56px 28px;margin-top:clamp(56px,8vw,104px)}
.x-foot-g{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.x-foot img.x-foot-logo{height:42px;width:auto;display:block;margin-bottom:14px}
.x-foot h2{font:500 13px var(--f-sans);color:var(--text);margin:0 0 12px}
.x-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.x-foot a{color:var(--muted)}
.x-foot a:hover{color:var(--text)}
.x-foot p{margin:0 0 12px;max-width:34em}
.x-foot .x-addr{display:grid;gap:10px;margin-top:16px;font-size:13.5px}
.x-foot .x-addr b{color:var(--text);font-weight:500}
.x-ask{margin-top:18px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font:500 12px var(--f-mono)}
.x-ask a{border:1px solid var(--rule);border-radius:999px;padding:4px 10px;color:var(--text)!important;background:#fff}
.x-ask a:hover{border-color:var(--text)}
.x-foot-b{border-top:1px solid var(--rule);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px}
.x-foot-b .x-badges{display:flex;gap:14px;align-items:center}
.x-foot-b .x-badges img{height:34px;width:auto}
@media (max-width:960px){.x-foot-g{grid-template-columns:1fr 1fr}.x-foot-g>div:first-child{grid-column:1/-1}}

/* ---------- contact dock ---------- */
.x-dock{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;font-family:var(--f-sans)}

/* ================= page sections (v2 pages) ================= */
.v2-page main{display:block}
.x-eb{font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:8px;margin:0}
.x-h1{font:600 clamp(36px,5.6vw,66px)/1.14 var(--f-sans);letter-spacing:-.025em;margin:22px 0 20px;max-width:14em;text-wrap:balance}
.x-h2{font:600 clamp(26px,3.2vw,40px)/1.18 var(--f-sans);letter-spacing:-.02em;margin:12px 0 14px;max-width:17em;text-wrap:balance}
.x-h3{font:600 clamp(20px,2vw,24px)/1.25 var(--f-sans);letter-spacing:-.015em;margin:0 0 8px}
.x-h1 em,.x-h2 em,.x-h3 em{font:inherit;font-style:normal;letter-spacing:-.01em}
.x-lead{font-size:clamp(16px,1.5vw,18.5px);color:var(--muted);max-width:36em;margin:0 0 30px;line-height:1.55}
.x-p{color:var(--muted);max-width:38em;margin:0 0 36px;font-size:16px}
.x-ctas{display:flex;gap:10px;flex-wrap:wrap}
.x-pill{display:inline-flex;align-items:center;gap:10px;font:500 12px var(--f-mono);color:#45464C;border:1px solid var(--rule);background:#fff;border-radius:999px;padding:5px 12px 5px 8px;letter-spacing:.02em}
.x-sec{padding-block:clamp(56px,8vw,104px) 0}
.x-hero{padding-block:clamp(36px,5vw,72px) clamp(28px,4vw,44px)}
.x-hero--split .x-w{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.x-hero--split .x-h1{font-size:clamp(34px,4.8vw,60px)}
.x-media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);background:var(--paper-2)}
.x-media img{display:block;width:100%;height:auto}

/* stage (dark product showcase) */
.x-stage{position:relative;background:var(--ink);border-radius:var(--r-lg);overflow:hidden;padding:clamp(20px,4vw,56px) clamp(14px,4vw,56px) clamp(18px,3vw,32px);isolation:isolate;color:#fff}
.x-stage::before{content:"";position:absolute;inset:-20% -10% 30% -10%;z-index:-1;background:radial-gradient(30% 45% at 32% 55%,rgba(242,24,40,.30),transparent 70%),radial-gradient(30% 45% at 50% 45%,rgba(30,155,60,.26),transparent 70%),radial-gradient(30% 45% at 68% 55%,rgba(0,114,187,.42),transparent 70%);filter:blur(30px);animation:x-breathe 9s ease-in-out infinite alternate}
@keyframes x-breathe{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}

/* metrics */
.x-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}
.x-metrics>div{padding:26px 22px;border-left:1px solid var(--rule);min-width:0}
.x-metrics>div:first-child{border-left:0}
.x-metrics b{display:block;font:600 clamp(28px,3.4vw,40px)/1 var(--f-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.x-metrics span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)}

/* cards & grids */
.x-grid{display:grid;gap:12px}
.x-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.x-card{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden;color:var(--text);text-decoration:none}
a.x-card:hover{border-color:var(--text)}
.x-card h3,.x-card h4{margin:0;font:600 17px/1.3 var(--f-sans);letter-spacing:-.012em}
.x-card p{margin:0;color:var(--muted);font-size:14.5px}
.x-card .x-more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:500}
.x-card--img{padding:0}
.x-card--img img{aspect-ratio:2/1;object-fit:cover;width:100%;display:block;background:var(--paper-2)}
.x-card--img .x-card-b{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.x-cells{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.x-cells>*{background:#fff;padding:22px;min-width:0}
.x-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.x-step{border-top:1px solid var(--text);padding-top:14px;min-width:0}
.x-step .n{font:500 12px var(--f-mono);color:var(--muted)}
.x-step h3{font:600 17px var(--f-sans);margin:8px 0 6px;letter-spacing:-.01em}
.x-step p{margin:0;color:var(--muted);font-size:14.5px}

/* split feature rows */
.x-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.x-row--rev>:first-child{order:2}

/* marquee */
.x-marq{padding-block:28px 8px;overflow:hidden}
.x-marq p{text-align:center;font:500 11.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.x-marq-mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.x-track{display:flex;gap:56px;width:max-content;animation:x-scroll 50s linear infinite;align-items:center}
.x-track img{height:52px;width:auto;filter:grayscale(1) contrast(1.1);opacity:.8;transition:opacity .2s,filter .2s}
.x-track img:hover{filter:none;opacity:1}
@keyframes x-scroll{to{transform:translateX(-50%)}}

/* CTA band + form */
.x-cta{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.x-cta::before{content:"";position:absolute;width:60%;height:120%;right:-20%;top:-10%;z-index:-1;background:radial-gradient(closest-side,rgba(0,114,187,.45),transparent);filter:blur(20px)}
.x-cta h2{font:600 clamp(28px,3.4vw,42px)/1.1 var(--f-sans);letter-spacing:-.028em;margin:0 0 12px;text-wrap:balance;color:#fff}
.x-cta h2 em{font:inherit;font-style:normal}
.x-cta p{margin:0;color:#A9AAB1}
.x-form{background:#fff;color:var(--text);border-radius:14px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.x-form label{font-size:12.5px;font-weight:500;display:grid;gap:5px;min-width:0;color:#45464C}
.x-form input,.x-form select,.x-form textarea{font:15px var(--f-sans);border:1px solid var(--rule-2);border-radius:8px;padding:10px 11px;width:100%;background:#fff;color:var(--text)}
.x-form input:focus,.x-form select:focus,.x-form textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:transparent}
.x-form .x-full{grid-column:1/-1}
.x-form .x-note{grid-column:1/-1;font-size:12.5px;color:var(--muted);margin:0}
.x-alert{border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:12px}
.x-alert--ok{background:var(--ok-bg);color:var(--ok)}
.x-alert--err{background:#FDECEE;color:#A1122B}

/* breadcrumbs */
.x-crumbs{font-size:13px;color:var(--muted);padding-top:20px}
.x-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.x-crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule-2)}
.x-crumbs a{color:var(--muted);text-decoration:none}
.x-crumbs a:hover{color:var(--text)}

/* prose (blog body + long pages) */
.x-prose{font-size:17px;line-height:1.75;color:#24252B;max-width:720px;overflow-wrap:break-word}
.x-prose>*:first-child{margin-top:0}
.x-prose h2{font:600 clamp(24px,2.4vw,30px)/1.25 var(--f-sans);letter-spacing:-.02em;color:var(--text);margin:2em 0 .6em}
.x-prose h3{font:600 21px/1.3 var(--f-sans);letter-spacing:-.012em;color:var(--text);margin:1.7em 0 .5em}
.x-prose h4{font:600 18px/1.35 var(--f-sans);margin:1.5em 0 .4em}
.x-prose p{margin:0 0 1.1em}
.x-prose a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.x-prose a:hover{color:var(--brand-dk)}
.x-prose ul,.x-prose ol{padding-left:1.3em;margin:0 0 1.2em}
.x-prose li{margin:.35em 0}
.x-prose li::marker{color:var(--muted)}
.x-prose img{border-radius:12px;margin:1.2em 0;display:block;height:auto}
.x-prose figure{margin:1.4em 0}
.x-prose figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}
.x-prose blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:2px solid var(--text);font:inherit;font-style:normal;color:var(--text)}
.x-prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.x-prose code{font:14px var(--f-code);background:var(--paper-2);padding:2px 5px;border-radius:4px}
.x-prose pre{font:13.5px/1.6 var(--f-code);background:var(--ink);color:#E7E7EA;padding:16px;border-radius:10px;overflow-x:auto}
.x-prose pre code{background:none;padding:0;color:inherit}
.x-prose table{width:100%;border-collapse:collapse;font-size:15px;margin:1.4em 0;display:block;overflow-x:auto}
.x-prose th,.x-prose td{border-bottom:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top}
.x-prose th{font:500 12.5px var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--paper-2)}
.x-prose [class*="translate-x"],.x-prose [class*="w-[100cqw]"]{transform:none!important;width:auto!important;left:auto!important;position:static!important}
.x-prose .sticky,.x-prose [class*="pointer-events-none"]{position:static!important}
.x-prose button{display:none}

/* article layout */
.x-art-head{padding-block:28px 28px}
.x-art-head .x-h1{font-size:clamp(30px,4.4vw,52px);max-width:22em;margin:16px 0 18px}
.x-art-meta{display:flex;gap:16px;flex-wrap:wrap;font:13px var(--f-mono);color:var(--muted)}
.x-art-cover{border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);aspect-ratio:1420/700}
.x-art-cover img{width:100%;height:100%;object-fit:cover;display:block}
.x-art{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,72px);padding-top:clamp(28px,4vw,48px);align-items:start}
.x-toc{position:sticky;top:calc(var(--nav-h) + 24px);font-size:13.5px;max-height:calc(100vh - var(--nav-h) - 48px);overflow:auto}
.x-toc h2{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.x-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.x-toc li a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted);text-decoration:none;line-height:1.4}
.x-toc li.is-sub a{padding-left:26px;font-size:13px}
.x-toc li a:hover{color:var(--text)}
.x-toc li.active a{color:var(--text);border-left-color:var(--text)}
.x-toc .x-toc-cta{margin-top:20px;border:1px solid var(--rule);border-radius:12px;padding:14px;background:#fff}
.x-toc .x-toc-cta b{display:block;font-weight:600;margin-bottom:4px;color:var(--text)}
.x-box{margin:32px 0;padding:22px 24px;border:1px solid var(--rule);border-radius:14px;background:#fff;max-width:720px}
.x-box h2,.x-box h3{font:600 18px/1.3 var(--f-sans);margin:0 0 10px;letter-spacing:-.01em}
.x-box p{margin:0 0 14px;color:var(--muted)}
.x-box ul{margin:0;padding-left:18px;line-height:2}
.x-box a{color:var(--brand)}
.x-box--brand{background:var(--ink);border-color:var(--ink);color:#fff}
.x-box--brand p{color:#B4B5BC}
.x-box--brand a:not(.x-btn){color:#fff}
.x-share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:28px 0;font-size:13px;color:var(--muted)}
.x-share a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--rule);border-radius:999px;color:var(--text);background:#fff}
.x-share a:hover{border-color:var(--text)}
.x-share svg{width:16px;height:16px}
.x-author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;border-top:1px solid var(--rule);padding-top:24px;margin-top:32px;max-width:720px;font-size:14.5px;color:var(--muted)}
.x-author img{width:48px;height:48px;object-fit:contain;border-radius:10px;border:1px solid var(--rule);background:#fff;padding:4px}
.x-author h2{font:600 15px var(--f-sans);color:var(--text);margin:0 0 4px}
.x-author p{margin:0 0 8px}
.x-author a{color:var(--brand)}

/* post cards */
.x-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.x-posts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.x-post{display:flex;flex-direction:column;gap:10px;min-width:0}
.x-post .x-post-img{display:block;border-radius:14px;overflow:hidden;background:var(--paper-2);aspect-ratio:1420/700;border:1px solid var(--rule)}
.x-post .x-post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.x-post:hover .x-post-img img{transform:scale(1.025)}
.x-post .x-post-meta{font:12px var(--f-mono);color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.x-post h3,.x-post h2{font:600 17px/1.35 var(--f-sans);letter-spacing:-.012em;margin:0}
.x-post h3 a,.x-post h2 a{color:var(--text);text-decoration:none}
.x-post h3 a:hover,.x-post h2 a:hover{color:var(--brand)}
.x-post p{margin:0;color:var(--muted);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.x-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.x-chips a,.x-chips span{display:inline-block;font:500 12.5px var(--f-sans);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;color:var(--text);text-decoration:none;background:#fff}
.x-chips a:hover{border-color:var(--text)}
.x-chips a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* pagination */
.x-pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:48px;list-style:none;padding:0}
.x-pager a,.x-pager span{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--rule);border-radius:8px;font:500 14px var(--f-mono);color:var(--text);text-decoration:none;background:#fff}
.x-pager a:hover{border-color:var(--text)}
.x-pager [aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.x-pager .is-disabled{opacity:.4}

/* FAQ */
.x-faq{border-top:1px solid var(--rule);max-width:860px}
.x-faq details{border-bottom:1px solid var(--rule)}
.x-faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font:500 17px/1.4 var(--f-sans);position:relative}
.x-faq summary::-webkit-details-marker{display:none}
.x-faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 22px var(--f-mono);color:var(--muted)}
.x-faq details[open] summary::after{content:"–"}
.x-faq details>div{padding:0 0 18px;color:var(--muted);max-width:720px}

/* table (pricing etc.) */
.x-table{width:100%;border-collapse:collapse;font-size:15px}
.x-table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:14px;background:#fff}
.x-table th,.x-table td{padding:14px 16px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.x-table th{font:500 12px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--paper-2)}
.x-table tr:last-child td{border-bottom:0}

/* reveal */
}
@media (prefers-reduced-motion:reduce){.x-track,.x-stage::before{animation:none}*{scroll-behavior:auto!important}}

/* responsive */
@media (max-width:1024px){
  .x-art{grid-template-columns:minmax(0,1fr)}
  .x-toc{position:static;max-height:none;border:1px solid var(--rule);border-radius:12px;padding:14px;background:#fff}
  .x-toc .x-toc-cta{display:none}
  .x-posts--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .x-hero--split .x-w,.x-row,.x-cta{grid-template-columns:minmax(0,1fr)}
  .x-row--rev>:first-child{order:0}
  .x-grid--3,.x-grid--4,.x-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-metrics>div:nth-child(3){border-left:0}
  .x-metrics>div:nth-child(n+3){border-top:1px solid var(--rule)}
  .x-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .x-grid--2,.x-grid--3,.x-grid--4,.x-steps,.x-posts,.x-posts--4{grid-template-columns:minmax(0,1fr)}
  .x-form{grid-template-columns:minmax(0,1fr)}
  .x-prose{font-size:16.5px}
}

/* ---------- TV demo ---------- */
.x-tv-grid{display:grid;justify-items:center;position:relative}
.x-tv-wrap{width:min(100%,860px);position:relative}
.x-bezel{background:#050608;border-radius:12px;padding:8px;box-shadow:0 0 0 1px #262A33,0 50px 90px -40px rgba(0,0,0,.9)}
.x-screen{aspect-ratio:16/9;max-width:100%;border-radius:5px;overflow:hidden;position:relative;color:#fff;container-type:inline-size;background:linear-gradient(180deg,rgba(5,8,18,.05) 0%,rgba(5,8,18,.55) 62%,rgba(5,8,18,.92) 100%),radial-gradient(80% 70% at 72% 18%,#F0B27A 0%,#B66A4E 22%,#3D4A7A 55%,#0D1430 100%)}
.x-layer{position:absolute;inset:0;transition:opacity .5s}
.x-layer[aria-hidden="true"]{opacity:0;pointer-events:none}
.x-screen .s-top{position:absolute;inset:3.6cqw 4.2cqw auto 4.2cqw;display:flex;justify-content:space-between;align-items:flex-start;z-index:1}
.x-screen .s-hotel{font:600 1.9cqw var(--f-sans);letter-spacing:.28em;text-transform:uppercase}
.x-screen .s-hotel small{display:block;font:400 1.25cqw var(--f-mono);letter-spacing:.06em;opacity:.7;margin-top:.5cqw;text-transform:none}
.x-screen .s-clock{text-align:right;font-family:var(--f-code)}
.x-screen .s-clock b{display:block;font-size:3.4cqw;font-weight:400;line-height:1}
.x-screen .s-clock span{font-size:1.3cqw;opacity:.75}
.x-screen .s-greet{position:absolute;left:4.2cqw;top:31%;right:40%}
.x-screen .s-greet--narrow{right:46%}
.x-screen .hi{font:500 5.2cqw/1.12 var(--f-sans);letter-spacing:-.02em}
.x-screen .hi em{font:inherit;font-style:normal}
.x-screen .meta{font:400 1.6cqw var(--f-mono);opacity:.8;margin-top:1.2cqw}
.x-screen .tiles{position:absolute;left:4.2cqw;right:4.2cqw;bottom:3.8cqw;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1cqw}
.x-screen .tile{background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.9cqw;padding:1.3cqw 1.1cqw;font-size:1.5cqw;font-weight:500;border:.15cqw solid rgba(255,255,255,.08);min-width:0}
.x-screen .tile i{display:block;font:400 1.1cqw var(--f-mono);font-style:normal;opacity:.6;margin-bottom:1.5cqw}
.x-screen .tile.on{background:#fff;color:var(--ink);transform:translateY(-.7cqw)}
.x-screen .order{position:absolute;right:4.2cqw;top:22%;width:38%;background:rgba(255,255,255,.96);color:var(--ink);border-radius:1.2cqw;padding:2cqw;font-size:1.45cqw}
.x-screen .order-h{margin:0 0 1.2cqw;font:600 1.8cqw var(--f-sans)}
.x-screen .order .row{display:flex;justify-content:space-between;padding:.7cqw 0;border-bottom:.1cqw solid #E7E6E2;font-family:var(--f-mono);margin:0}
.x-screen .order .tot{font-weight:500;border:0}
.x-screen .order .go{margin-top:1.2cqw;background:var(--ink);color:#fff;border-radius:.8cqw;padding:1cqw;text-align:center;font-weight:500}
.x-screen .bye{position:absolute;left:4.2cqw;top:30%;right:4.2cqw}
.x-screen .bye .hi{font-size:4.6cqw}
.x-screen .qr{position:absolute;right:0;top:0;width:13cqw;aspect-ratio:1;max-width:100%;background:conic-gradient(from 90deg at 30% 30%,#fff 25%,transparent 0) 0 0/2cqw 2cqw,#0B0C0F;border:1cqw solid #fff;border-radius:.6cqw}
.x-console{position:absolute;right:-3%;bottom:-30%;width:min(42%,330px);background:#fff;color:var(--text);border-radius:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);font-size:12.5px;overflow:hidden}
.x-console-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--rule);font:500 11px var(--f-mono);color:var(--muted)}
.x-console-h b{color:var(--text);font:600 12.5px var(--f-sans)}
.x-console ul{list-style:none;margin:0;padding:6px 0}
.x-console li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;padding:6px 12px;align-items:center}
.x-console .rm{font:500 11.5px var(--f-mono)}
.x-console .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-console .st{font:500 10.5px var(--f-mono);border-radius:999px;padding:2px 7px}
.x-console .st.in{background:#E6F4EA;color:#14692D}.x-console .st.out{background:#F1F1EE;color:#63646B}.x-console .st.svc{background:#E3F0F9;color:#005A94}
.x-journey{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:190px}
.x-journey button{font:500 13px var(--f-sans);color:#9C9DA4;background:transparent;border:1px solid transparent;border-radius:999px;padding:8px 14px;cursor:pointer;display:flex;gap:8px;align-items:center}
.x-journey button span{font:400 11px var(--f-mono);opacity:.7}
.x-journey button[aria-pressed="true"]{color:#fff;border-color:#33363F;background:#16181D}
.x-journey-cap{text-align:center;color:#8E8F96;font-size:13.5px;margin:10px auto 0;max-width:46em;min-height:2.6em}
@media (max-width:960px){.x-console{position:relative;right:auto;bottom:auto;width:100%;margin-top:16px}.x-journey{margin-top:24px}}

/* bento mini-UIs */
.x-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.x-bento .c-a{grid-column:span 4}.x-bento .c-b,.x-bento .c-c,.x-bento .c-d,.x-bento .c-e{grid-column:span 2}
.x-ui{margin-top:auto;padding-top:16px}
.x-log{background:var(--ink);color:#C7C8CE;border-radius:10px;padding:14px;font:12px/1.75 var(--f-code);overflow-x:auto;white-space:nowrap}
.x-log .t{color:#8E9098}.x-log .ok{color:#5BD07A}.x-log .k{color:#7CC4F2}
.x-greets{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.x-greets li{border:1px solid var(--rule);border-radius:8px;padding:8px 10px;font-size:14px;display:flex;justify-content:space-between;gap:8px;transition:border-color .3s}
.x-greets li span{font:500 11px var(--f-mono);color:var(--muted)}
.x-greets li.on{border-color:var(--text)}
.x-epg{display:grid;gap:4px;font-size:13px}
.x-epg div{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:7px 9px;border-radius:7px;background:var(--paper-2)}
.x-epg b{font:500 12px var(--f-mono)}
.x-epg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-epg small{font:11px var(--f-mono);color:var(--muted)}
.x-epg .on{background:var(--ink);color:#fff}.x-epg .on small{color:#A0A1A8}
.x-msg{border:1px solid var(--rule);border-radius:10px;padding:12px;font-size:13px;display:grid;gap:8px}
.x-msg .to{display:flex;gap:6px;flex-wrap:wrap}
.x-msg .to span{font:500 11px var(--f-mono);border:1px solid var(--rule);border-radius:999px;padding:2px 8px}
.x-msg .to span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.x-msg .send{justify-self:end;font:500 12px var(--f-sans);background:var(--brand);color:#fff;border-radius:6px;padding:5px 10px}
.x-menu-ui{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.x-menu-ui div{border-radius:9px;background:var(--paper-2);padding:10px;font-size:13px;display:grid;gap:2px}
.x-menu-ui i{display:block;height:44px;border-radius:6px;background:linear-gradient(135deg,#E8B07D,#9C5B45)}
.x-menu-ui div:nth-child(2) i{background:linear-gradient(135deg,#A8C9A0,#3E6E4C)}
.x-menu-ui b{font-weight:500}
.x-menu-ui small{font:11.5px var(--f-mono);color:var(--muted)}
@media (max-width:960px){.x-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.x-bento .c-a{grid-column:span 2}.x-bento .c-b,.x-bento .c-c,.x-bento .c-d,.x-bento .c-e{grid-column:span 1}}
@media (max-width:600px){.x-bento{grid-template-columns:minmax(0,1fr)}.x-bento>*{grid-column:span 1!important}}

/* homepage bits */
.x-marq-h{text-align:center;font:500 12px var(--f-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;padding-inline:var(--gut)}
.x-onestop{max-width:46em;margin:28px 0 0;color:var(--muted);font-size:16px}
.x-onestop a,.x-lead a,.x-p a,a.x-link{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.x-cell-t{display:block;font:600 15.5px var(--f-sans);letter-spacing:-.01em}
.x-cell-s{display:block;font:11.5px var(--f-mono);color:var(--muted);margin-top:4px}
.x-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.x-sec-head .x-h2{margin-bottom:0}
.x-prose li>p{margin:0}.x-prose li>p+p{margin-top:.5em}

/* blog index */
.x-post-cat{color:var(--brand)!important;text-decoration:none;font-weight:500}
.x-feature{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);margin-top:20px;align-items:start}
.x-post--lead h3{font-size:clamp(22px,2.4vw,28px);line-height:1.25;letter-spacing:-.02em}
.x-feature-list{list-style:none;margin:0;padding:0;counter-reset:f;border-top:1px solid var(--rule)}
.x-feature-list li{counter-increment:f;display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.x-feature-list li::before{content:counter(f,decimal-leading-zero);font:500 12px var(--f-mono);color:var(--muted);grid-row:span 2;padding-top:2px}
.x-feature-list .x-post-cat{font:500 11.5px var(--f-mono)}
.x-feature-list h3{margin:0;font:500 15.5px/1.4 var(--f-sans)}
.x-feature-list h3 a{color:var(--text);text-decoration:none}
.x-feature-list h3 a:hover{color:var(--brand)}
.x-cat-sec{padding-top:clamp(40px,6vw,72px)}
.x-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.x-cat-more{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.x-cat-more li{border-bottom:1px solid var(--rule)}
.x-cat-more a{display:block;padding:11px 0;font-size:14.5px;line-height:1.4;color:var(--text);text-decoration:none}
.x-cat-more a:hover{color:var(--brand)}
@media (max-width:960px){.x-feature{grid-template-columns:minmax(0,1fr)}.x-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.x-cat-grid{grid-template-columns:minmax(0,1fr)}}

/* service pages */
.x-num{display:block;font:600 clamp(28px,3.4vw,40px)/1 var(--f-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.x-num-l{display:block;margin:8px 0 0!important;font:400 13.5px var(--f-sans);color:var(--muted)}
.x-cell-p{margin:6px 0 0;color:var(--muted);font-size:14.5px}
h3.x-cell-t{margin:0}
.x-faq-q{display:inline;font:inherit;margin:0}
.x-shot{margin:0}
.x-shot-tv{background:#050608;border-radius:12px;padding:6px;box-shadow:0 0 0 1px #262A33,0 30px 60px -30px rgba(0,0,0,.5)}
.x-shot-tv img{display:block;width:100%;height:auto;border-radius:6px}
.x-shot figcaption{margin-top:12px;font-size:14.5px}
.x-shot figcaption span{color:var(--muted)}

/* ---------- legacy DB content (.x-lc): HTML lưu trong DB dùng class Bootstrap cũ ---------- */
.x-lc{color:#24252B}
.x-lc section{padding-block:clamp(40px,6vw,72px) 0}
.x-lc .container{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
.x-lc .row{display:flex;flex-wrap:wrap;margin-inline:-12px;row-gap:20px}
.x-lc .row>*{padding-inline:12px;flex:0 0 100%;max-width:100%;min-width:0}
@media (min-width:768px){
  .x-lc .col-md-3{flex-basis:25%;max-width:25%}.x-lc .col-md-4{flex-basis:33.333%;max-width:33.333%}.x-lc .col-md-5{flex-basis:41.666%;max-width:41.666%}
  .x-lc .col-md-6{flex-basis:50%;max-width:50%}.x-lc .col-md-7{flex-basis:58.333%;max-width:58.333%}.x-lc .col-md-8{flex-basis:66.666%;max-width:66.666%}
  .x-lc .col-md-10{flex-basis:83.333%;max-width:83.333%}.x-lc .col-md-12{flex-basis:100%;max-width:100%}
}
@media (min-width:992px){.x-lc .col-lg-3{flex-basis:25%;max-width:25%}.x-lc .col-lg-4{flex-basis:33.333%;max-width:33.333%}.x-lc .col-lg-6{flex-basis:50%;max-width:50%}}
.x-lc .mx-auto{margin-inline:auto}.x-lc .text-center{text-align:center}.x-lc .justify-content-between{justify-content:space-between}.x-lc .justify-content-center{justify-content:center}
.x-lc .text-justify{text-align:left}
.x-lc img,.x-lc .img-fluid{max-width:100%;height:auto;border-radius:12px}
.x-lc h2{font:600 clamp(26px,3vw,38px)/1.15 var(--f-sans);letter-spacing:-.025em;color:var(--text);margin:0 0 14px;text-wrap:balance}
.x-lc h3,.x-lc .h3{font:600 19px/1.3 var(--f-sans);letter-spacing:-.012em;color:var(--text);margin:1.2em 0 .5em}
.x-lc h4{font:600 17px/1.35 var(--f-sans);margin:1em 0 .4em}
.x-lc p{margin:0 0 1em;line-height:1.7;max-width:72ch}
.x-lc .text-center p,.x-lc .text-center h2{margin-inline:auto}
.x-lc p[style*="pre-wrap"]{white-space:normal!important}
.x-lc ul,.x-lc ol{padding-left:1.3em;line-height:1.7;max-width:72ch}
.x-lc a{color:var(--brand)}
.x-lc .card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:20px;height:100%}
.x-lc .card h3{margin-top:0}
.x-lc .key-feature-nav-link{border-top:1px solid var(--rule);padding:16px 0}
.x-lc .key-feature-nav-link h3{margin-top:0}
.x-lc .swiper-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;transform:none!important}
.x-lc .swiper-slide{width:auto!important;opacity:1!important;transform:none!important}
.x-lc .swiper-notification,.x-lc .swiper-pagination,.x-lc .swiper-button-next,.x-lc .swiper-button-prev{display:none}
.x-lc table{width:100%;border-collapse:collapse;font-size:15px;margin:1.2em 0;display:block;overflow-x:auto}
.x-lc th,.x-lc td{border-bottom:1px solid var(--rule);padding:10px 12px;text-align:left}
.x-lc .section-heading,.x-lc .why,.x-lc .pckl-blog{background:none}
.x-lc section[style]{background:none!important;border:0!important}
.x-lc>:not(section),.x-lc section>:not(.container){max-width:var(--w);margin-inline:auto;padding-inline:var(--gut);box-sizing:border-box}
.x-lc>h2:first-child,.x-lc>:not(section):first-child{padding-top:clamp(40px,6vw,72px)}
.x-card-h{margin:0;font:600 17px/1.3 var(--f-sans);letter-spacing:-.012em}
.x-formwrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:start}
.x-formwrap .x-form{border:1px solid var(--rule)}
.x-formwrap .x-p a{color:var(--brand)}
.x-list{margin:4px 0 0;padding-left:1.2em;color:var(--muted);line-height:1.8;font-size:15px}
.x-olist{margin:24px 0 0;padding-left:1.3em;line-height:2;max-width:60em}
.x-table a{color:var(--brand)}
@media (max-width:960px){.x-formwrap{grid-template-columns:minmax(0,1fr)}}
.x-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
.x-tier{position:relative;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.x-tier.is-hl{border-color:var(--ink);box-shadow:0 20px 40px -24px rgba(11,12,15,.35)}
.x-tier h3{margin:0;font:600 17px var(--f-sans)}
.x-tier-rooms{font:500 13px var(--f-mono);color:var(--brand)}
.x-tier p{margin:0;color:var(--muted);font-size:14.5px;flex:1;min-height:3em}
.x-tier-price{font:600 15px var(--f-sans);margin:10px 0 12px}
.x-tier-tag{position:absolute;top:-10px;right:16px;font:500 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:999px;padding:3px 9px}
@media (max-width:960px){.x-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.x-tiers{grid-template-columns:minmax(0,1fr)}}
.x-badgerow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.x-badgerow img{height:39px;width:auto}
.x-pillar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,56px);padding-block:40px;border-top:1px solid var(--rule)}
.x-pillar:first-child{margin-top:40px}
.x-pillar>h2{font:600 clamp(22px,2.4vw,30px)/1.2 var(--f-sans);letter-spacing:-.02em;margin:0}
.x-pillar h3{font:500 18px/1.4 var(--f-sans);margin:0 0 10px}
.x-sm-h{font:600 15px var(--f-sans)!important;margin:0 0 6px!important}
.x-card p{margin:0}
@media (max-width:760px){.x-pillar{grid-template-columns:minmax(0,1fr)}}
.x-big{display:block;font:500 clamp(20px,2vw,24px) var(--f-mono);letter-spacing:-.02em;color:var(--text);text-decoration:none;margin:6px 0}
.x-big:hover{color:var(--brand)}
.x-404-screen{width:min(100%,420px);aspect-ratio:16/9;border-radius:10px;background:repeating-linear-gradient(90deg,#F21828 0 14.28%,#F2C118 0 28.56%,#18C1F2 0 42.84%,#1E9B3C 0 57.12%,#B518F2 0 71.4%,#F21828 0 85.68%,#0072BB 0 100%);box-shadow:0 0 0 8px #050608;display:grid;place-content:center;text-align:center;color:#fff;margin-bottom:36px;max-width:100%}
.x-404-screen span{font:600 64px/1 var(--f-mono);text-shadow:0 2px 0 #000}
.x-404-screen small{font:500 12px var(--f-mono);letter-spacing:.2em;background:#000;padding:2px 8px;margin-top:6px}

/* products */
.x-prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.x-prod{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:14px;color:var(--text);text-decoration:none;min-width:0}
.x-prod:hover{border-color:var(--text)}
.x-prod-img{display:block;aspect-ratio:500/256;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.x-prod-img img{width:100%;height:100%;object-fit:contain;display:block}
.x-prod h3{margin:0;font:500 15px/1.35 var(--f-sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.x-prod-price{font:500 12.5px var(--f-mono);color:var(--brand)}
.x-prod-tag{position:absolute;top:10px;left:10px;z-index:1;font:500 10.5px var(--f-mono);background:var(--rgb-r);color:#fff;border-radius:999px;padding:2px 8px}
.x-pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);padding-top:28px;align-items:start}
.x-gallery-main{border:1px solid var(--rule);border-radius:16px;background:#fff;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.x-gallery-main img{max-width:100%;max-height:100%;object-fit:contain}
.x-gallery-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.x-gallery-thumbs button{width:64px;height:64px;padding:4px;border:1px solid var(--rule);border-radius:8px;background:#fff;cursor:pointer}
.x-gallery-thumbs button[aria-pressed="true"]{border-color:var(--text)}
.x-gallery-thumbs img{width:100%;height:100%;object-fit:contain}
.x-pd-feat{color:#34353B;line-height:1.75;font-size:15.5px}
.x-collapse{max-height:420px;overflow:hidden;position:relative;margin-bottom:16px}
.x-collapse::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,var(--paper))}
.x-collapse.is-open{max-height:none}
.x-collapse.is-open::after{display:none}
@media (max-width:960px){.x-prods{grid-template-columns:repeat(2,minmax(0,1fr))}.x-pd{grid-template-columns:minmax(0,1fr)}}
.x-prose [style*="line-height"],.x-lc [style*="line-height"]{line-height:inherit!important}
.x-cta-h{font:600 clamp(24px,2.8vw,34px)/1.15 var(--f-sans);letter-spacing:-.025em;margin:0;color:#fff;text-wrap:balance}
@media (max-width:1024px){.x-toc ul{max-height:220px;overflow:auto}}

/* ---------- chat "Hỏi ITVmax" ---------- */
.x-dock-btn{display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:12px 16px;font:500 14px var(--f-sans);cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
.x-dock-btn svg{width:16px;height:16px}
.x-chat{position:absolute;right:0;bottom:calc(100% + 10px);width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 120px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 30px 70px -24px rgba(11,12,15,.4);overflow:hidden;color:var(--text);font-family:var(--f-sans)}
.x-chat[hidden]{display:none}
.x-chat-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.x-chat-h b{display:block;font:600 15px var(--f-sans)}
.x-chat-h small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.x-chat-x{border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.x-chat-log{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.55}
.x-msg-b,.x-msg-u{max-width:92%;padding:10px 12px;border-radius:12px;overflow-wrap:anywhere}
.x-msg-b{background:var(--paper-2);align-self:flex-start;border-top-left-radius:4px}
.x-msg-u{background:var(--ink);color:#fff;align-self:flex-end;border-top-right-radius:4px}
.x-msg-b blockquote{margin:0;padding-left:10px;border-left:2px solid var(--rule-2);color:#34353B}
.x-msg-b .x-src{display:block;margin-top:8px;font-size:12.5px;color:var(--muted)}
.x-msg-b a{color:var(--brand)}
.x-msg-b ul{margin:6px 0 0;padding-left:16px;font-size:13px}
.x-msg-b.is-wait{color:var(--muted)}
.x-chat-sugg{display:flex;flex-wrap:wrap;gap:6px}
.x-chat-sugg button{font:500 12.5px var(--f-sans);border:1px solid var(--rule);background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer;color:var(--text)}
.x-chat-sugg button:hover{border-color:var(--text)}
.x-chat-f{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--rule)}
.x-chat-f input{flex:1;min-width:0;font:15px var(--f-sans);border:1px solid var(--rule-2);border-radius:8px;padding:9px 10px}
.x-chat-f input:focus{outline:2px solid var(--brand);outline-offset:0;border-color:transparent}
.x-chat-c{display:flex;gap:14px;flex-wrap:wrap;padding:8px 16px 12px;font-size:12.5px}
.x-chat-c a{color:var(--muted);text-decoration:none}
.x-chat-c a:hover{color:var(--text)}
@media (max-width:560px){.x-chat{position:fixed;left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom,0px));width:auto}}

/* nhấn một cụm trong tiêu đề hero bằng màu thương hiệu thay cho chữ nghiêng */
.x-h1 em{color:var(--brand);font-style:normal}
.x-screen .hi em{font-style:normal;font-weight:600}
.x-prose blockquote{font:500 19px/1.6 var(--f-sans)}
.x-metrics--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .x-metrics--3{grid-template-columns:minmax(0,1fr)}
  .x-metrics--3>div{border-left:0;border-top:1px solid var(--rule);padding:18px 4px}
  .x-metrics--3>div:first-child{border-top:0}
  .x-steps--3{grid-template-columns:minmax(0,1fr)}
  .x-chips--scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .x-chips--scroll::-webkit-scrollbar{display:none}
  .x-chips--scroll li{flex:none}
}