/* vesinhnha24h — stylesheet dùng chung cho toàn bộ trang
   Kiểu riêng của từng khối nằm ở layout.css, nạp trước tệp này.
   File này chứa: reset, font, keyframes, hiệu ứng reveal, hover, và toàn bộ media query. */

/* ---------- 1. Reset & nền tảng ---------- */
body{margin:0;background:#ffffff;font-family:'Rubik',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#0b7d38;text-decoration:none}
/* Mọi hiệu ứng :hover đặt trong (hover:hover). Trên màn cảm ứng, chạm một lần là
   :hover giữ nguyên tới khi chạm chỗ khác: nút đậm màu, thẻ nhấc lên và đứng luôn.
   Vệt màu mặc định khi chạm cũng tắt vì design.js nghe sự kiện bấm trên toàn trang,
   nên trình duyệt coi khối nào cũng bấm được và tô cả khối. */
html{-webkit-tap-highlight-color:transparent}
/* :where() đưa độ ưu tiên về mức thẻ a: màu chữ riêng của từng khối trong layout.css vẫn giữ khi rê chuột. */
@media (hover:hover){a:where(:hover){color:#0e4a3b}}
/* Chữ tô xanh trên nền xanh đậm giữ sắc sáng #13a84b: sắc #119341 chỉ tăng tương phản trên nền sáng, trên nền #0e4a3b nó làm tụt còn 2,56, dưới mức 3 của chữ lớn. */
.vsn-neo-toi span.vsn-neo-nhan{color:#13a84b}
@keyframes vsn-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes vsn-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes vsn-kb{from{transform:scale(1.02)}to{transform:scale(1.13)}}
@keyframes vsn-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.82}}
@keyframes vsn-spin{to{transform:rotate(360deg)}}
@keyframes vsn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
[data-ph="light"]::placeholder{color:rgba(255,255,255,.62);opacity:1}
[data-ph="dark"]::placeholder{color:#98a3ab;opacity:1}
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,.7,.2,1),transform .8s cubic-bezier(.22,.7,.2,1)}
[data-rv][data-in]{opacity:1;transform:none}
[data-hero-in]{animation:vsn-up .95s cubic-bezier(.22,.7,.2,1) both}
[data-kb]{animation:vsn-kb 24s ease-in-out infinite alternate}
[data-pulse]{animation:vsn-pulse 3.4s ease-in-out infinite}
[data-spin]{animation:vsn-spin 30s linear infinite}
[data-float]{animation:vsn-float 6s ease-in-out infinite}
[data-zoom] .imgph{transition:transform .7s cubic-bezier(.22,.7,.2,1)}
@media (hover:hover){[data-zoom]:hover .imgph{transform:scale(1.07)}}
[data-nudge]{transition:transform .28s ease}
@media (hover:hover){a:hover [data-nudge],button:hover [data-nudge]{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1!important;transform:none!important}[data-kb],[data-pulse],[data-spin],[data-float],[data-hero-in]{animation:none!important}}
/* :where() đưa độ ưu tiên về 0: nút bo tròn giữ nguyên bo góc riêng khi được chọn bằng bàn phím. */
:where(:focus-visible){outline:3px solid #8ee063;outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){[data-marq]{animation:none!important}}
input,textarea,select,button{font-family:inherit}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}

/* ---------- 2. Chỗ giữ ảnh (thay bằng <img> khi code) ---------- */
.imgph{width:100%;height:100%;min-height:inherit;background:#e6eae6;display:grid;place-items:center;padding:16px;text-align:center}
.imgph>span{font-size:13px;line-height:1.45;color:#7d8a80;max-width:26ch}
.imgph--circle{border-radius:50%}
.imgph--mini>span{display:none}
/* Hai panel ảnh cạnh cột chữ chỉ đặt min-height, không đặt height. Thẻ ảnh
   mang height:100%, mà phần trăm chiều cao đo theo chiều cao AUTO của
   hộp thì tính ra auto, nên ảnh tự quyết chiều cao theo tỷ lệ gốc rồi kéo dài
   cả ô lưới: ở 1920px khối "Sạch bóng" dài hơn thiết kế 227px.
   Khung giữ chỗ .imgph ở trên phủ kín hộp nhờ min-height:inherit, nên cho ảnh
   phủ kín là trả lại đúng hành vi mà bản thiết kế đã được đối chiếu. */
[data-r~="apptR"]>img,[data-r~="bleed"]>img{position:absolute;inset:0;
  width:100%;height:100%!important;object-fit:cover}

/* ---------- 3. Hover / focus ---------- */
@media (hover:hover){
.x0:hover{color:#8ee063 !important}
.x1:hover{background:rgba(255,255,255,.2)}
.x2:hover{background:#0a6b30;color:#fff}
.x3:hover{background:rgba(255,255,255,.12);color:#fff}
.x4:hover{transform:translateY(-6px) !important}
.x5:hover{background:#0f1d29;color:#fff}
.x6:hover{background:#a3ec7e;color:#0e4a3b}
.x7:hover{background:rgba(255,255,255,.12)}
.x8:hover{background:#0a6b30}
.x9:hover{color:#0b7d38}
.x10:hover{background:#119341;border-color:#119341;color:#fff}
.x11:hover{color:#2fc65f}
.x12:hover{background:rgba(255,255,255,.22);color:#fff}
.x13:hover{color:#0b7d38}
.x14:hover{background:#f3f6f2;color:#17293a}
.x15:hover{border-color:#0b7d38 !important}
.x16:hover{background:#f1f1f1 !important}
.x17:hover{border-color:#119341;color:#0b7d38}
.x18:hover{background:#f1f1f1;color:#17293a}
.x19:hover{background:#e3e6e3 !important;color:#17293a !important}
.x20:hover{background:rgba(255,255,255,.14);color:#fff}
.x21:hover{background:#fbfbfa !important;color:#0b7d38 !important}
.x22:hover{background:#fbfbfa !important;color:#17293a !important}
}

/* ---------- 3b. Thanh điều hướng trên desktop ----------
   Trước đây chỉ mục đang mở mới có padding-bottom 4px và viền dưới 2px, nên
   hộp của nó cao hơn các mục khác 6px. Hàng menu căn giữa theo chiều dọc, nên
   cái hộp cao hơn ấy kéo chữ của chính nó lên 2px so với hàng, nhìn như bị
   nhấc lên. Cho mọi mục cùng padding và cùng viền trong suốt, mục đang mở chỉ
   đổi MÀU viền chứ không đổi kích thước hộp; class của nó trong layout.css
   có độ ưu tiên cao hơn luật này nên màu xanh giữ nguyên.
   line-height cố định để chữ có dấu và chữ không dấu cho ra hộp bằng nhau.
   margin-bottom âm đúng bằng phần padding cộng viền, để gạch chân treo ra
   ngoài mà không tính vào chiều cao hộp. Nhờ vậy hàng căn giữa theo DÒNG CHỮ
   chứ không theo chữ-cộng-gạch, chữ mới thẳng hàng với logo bên trái. */
[data-r~="nav"]>a{padding-bottom:4px;border-bottom:2px solid transparent;line-height:1.35;
  margin-bottom:-6px}

/* ---------- 4. Responsive ----------
   desktop  : >= 1180px  (bố cục gốc 1440px, container 1240px)
   tablet   : 760 - 1179px
   phone    : < 760px                                            */
@media (max-width:1179.98px){
  [data-r~="nav"],[data-mode="fluid"] [data-r~="hdr-phone"],[data-mode="fluid"] [data-r~="search"]{display:none!important}
  [data-r~="hdrcta"]{display:none!important}
  [data-r~="burger"]{display:grid!important}
  [data-r~="callbar"]{display:flex!important}
  /* minmax(0,1fr) thay vì 1fr: cột 1fr giãn theo nội dung rộng nhất bên trong, một bảng rộng trong bài làm cả bài giãn theo rồi bị khung ngoài cắt mất chữ */
  [data-r~="grid2"],[data-mode="fluid"] [data-r~="cols"]{grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  [data-r~="stair"]{margin-top:0!important}
  [data-r~="h1"]{font-size:38px!important}
  [data-r~="h2"]{font-size:29px!important}
  [data-r~="pad"]{padding-top:56px!important;padding-bottom:56px!important}
  [data-r~="container"]{padding-left:20px!important;padding-right:20px!important}
  [data-r~="apptL"]{border-radius:20px 20px 0 0!important;padding:34px 22px!important}
  [data-r~="apptR"]{border-radius:0 0 20px 20px!important;min-height:300px!important}
  [data-r~="hero"]{min-height:560px!important}
  [data-r~="bleed"]{min-height:300px!important}
  [data-r~="marq"]{font-size:40px!important}
  [data-r~="storypad"]{padding:56px 20px!important}
  [data-r~="storyscrim"]{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 58%,rgba(255,255,255,.35) 100%)!important}
  [data-r~="testi"]{height:360px!important}
  [data-r~="ratings"]{position:static!important;margin:-46px 16px 0;max-width:none!important}
  footer{padding-bottom:76px}
  [data-r~="wordmark"]{font-size:60px!important}
}
@media (min-width:760px) and (max-width:1179.98px){
  [data-r~="cols"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
  [data-r~="grid2"]{gap:36px!important}
  [data-r~="container"]{padding-left:32px!important;padding-right:32px!important}
  [data-r~="pad"]{padding-top:74px!important;padding-bottom:74px!important}
  [data-r~="h1"]{font-size:54px!important}
  [data-r~="h2"]{font-size:40px!important}
  [data-r~="hero"]{min-height:640px!important}
  [data-r~="bleed"]{min-height:420px!important}
  [data-r~="apptR"]{min-height:440px!important}
  [data-r~="apptL"]{padding:44px 38px!important}
  [data-r~="testi"]{height:440px!important}
  [data-r~="marq"]{font-size:64px!important}
  [data-r~="storypad"]{padding:74px 32px!important}
  [data-r~="wordmark"]{font-size:104px!important}
}

/* ---------- 5. Nội dung soạn trong trình sửa bài (Gutenberg) ---------- */
.vsn-prose{font-size:17px;line-height:1.85;color:#3c4a53}
.vsn-prose>*:first-child{margin-top:0}
.vsn-prose p{margin:0 0 20px}
.vsn-prose h2{margin:44px 0 16px;font-family:'Be Vietnam Pro','Rubik',sans-serif;font-weight:800;font-size:28px;line-height:1.2;letter-spacing:-.03em;color:#17293a}
.vsn-prose h3{margin:34px 0 14px;font-family:'Be Vietnam Pro','Rubik',sans-serif;font-weight:800;font-size:22px;line-height:1.25;letter-spacing:-.025em;color:#17293a}
.vsn-prose h4{margin:28px 0 12px;font-family:'Be Vietnam Pro','Rubik',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;color:#17293a}
.vsn-prose ul,.vsn-prose ol{margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:11px}
.vsn-prose li{line-height:1.8}
.vsn-prose li::marker{color:#0b7d38}
.vsn-prose a{color:#0b7d38;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.vsn-prose a:hover{color:#0e4a3b}}
.vsn-prose strong{color:#17293a;font-weight:600}
.vsn-prose blockquote{margin:36px 0;padding:28px 30px;background:#f1f6f1;border-radius:20px;border-left:4px solid #119341}
.vsn-prose blockquote p{margin:0;font-size:17px;line-height:1.8;color:#17293a}
.vsn-prose blockquote cite{display:block;margin-top:12px;font-size:15px;font-style:normal;color:#5b676e}
.vsn-prose figure{margin:32px 0}
.vsn-prose img{border-radius:16px;display:block;height:auto}
.vsn-prose figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:#5b676e;text-align:center}
.vsn-prose .wp-block-table{overflow-x:auto}
/* Bảng tràn khung: làm mờ mép phía còn nội dung. design.js chỉ gắn data-tran khi bảng rộng hơn khung. */
.vsn-prose .wp-block-table[data-tran="phai"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.vsn-prose .wp-block-table[data-tran="trai"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 56px),transparent)}
.vsn-prose .wp-block-table[data-tran="hai"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.vsn-prose table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid #e6e7e4;border-radius:16px;overflow:hidden}
.vsn-prose th{background:#0e4a3b;color:#fff;font-family:'Be Vietnam Pro','Rubik',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:16px 18px}
.vsn-prose td{padding:15px 18px;border-top:1px solid #eceeeb;color:#3c4a53;line-height:1.6}
.vsn-prose tr:nth-child(even) td{background:#fbfbfa}
.vsn-prose hr{border:none;border-top:1px solid #e6e7e4;margin:44px 0}
.vsn-prose code{background:#f1f1f1;border-radius:6px;padding:2px 7px;font-size:15px}
.vsn-prose pre{background:#17293a;color:#f7f7f6;border-radius:16px;padding:22px 24px;overflow-x:auto;font-size:14px;line-height:1.7}
.vsn-prose pre code{background:none;padding:0;color:inherit}
.vsn-prose .wp-block-embed,.vsn-prose iframe{max-width:100%}
@media (max-width:759.98px){
  .vsn-prose{font-size:16px}
  .vsn-prose h2{font-size:24px;margin-top:34px}
  .vsn-prose h3{font-size:20px}
}

/* ---------- 6. Bổ sung phần điện thoại bị thiếu trong bản tĩnh ----------
   Bản HTML tĩnh giữ nguyên các token data-r="cols|split|tblhead|celllb" nhưng
   phần khai báo tương ứng lại gắn với thuộc tính data-mode="fluid" của môi trường
   thiết kế, thuộc tính này không có trong HTML. Hậu quả trên máy dưới 760px:
   lưới 3–4 cột không xuống một cột, bảng giá mất nhãn từng ô.
   Giá trị dưới đây lấy đúng từ khối phone của bản thiết kế gốc. */
@media (max-width:759.98px){
  [data-r~="cols"]{grid-template-columns:1fr!important;gap:22px!important}
  [data-r~="split"]{border-left:0!important;border-top:1px solid #e6e7e4}
  [data-r~="tblhead"]{display:none!important}
  [data-r~="celllb"]{display:block!important}
}

/* ---------- 7. Tầng điện thoại (< 760px): bố cục kiểu ứng dụng ----------
   Nhóm thẻ giới thiệu chuyển thành băng chuyền ngang có điểm dừng, nhờ token
   "rail" đặt riêng ở template. Không dùng chung token "cols" vì "cols" còn
   gắn trên hàng bảng giá và trên danh sách chính của các trang lưu trữ —
   hai chỗ đó phải giữ xếp dọc.
   Lề âm của băng chuyền phải bằng đúng padding của "container" bên dưới,
   lệch nhau là sinh mép hở hoặc tràn ngang. */
@media (max-width:759.98px){
  /* 7a. Băng chuyền ngang */
  [data-r~="rail"]{
    display:grid!important;
    grid-auto-flow:column;
    grid-auto-columns:84%;
    grid-template-columns:none!important;
    gap:14px!important;
    margin-left:-16px!important;margin-right:-16px!important;
    padding-left:16px!important;padding-right:16px!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:16px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  [data-r~="rail"]::-webkit-scrollbar{display:none}
  /* Bóng đổ của thẻ (0 16px 36px) tỏa xuống khoảng 52px, dài hơn khoảng đệm dưới
     20px của băng chuyền. Băng chuyền phải cắt tràn dọc nên bóng bị chém thẳng
     thành một dải xám có mép, nhìn như section có hai màu nền. Thu bóng lại cho
     tắt hẳn trong khoảng đệm. */
  [data-r~="rail"] .vsn-neo-bong{box-shadow:0 6px 16px rgba(23,41,58,.08)!important}
  [data-r~="rail"]>*{scroll-snap-align:start;min-width:0}
  /* chỉ một thẻ thì không để hở 16% bên phải */
  [data-r~="rail"]:has(>*:only-child){grid-auto-columns:100%!important}

  /* 7a-bis. Phần đầu trang: bỏ khối số điện thoại.
     Bản thiết kế gốc đã định ẩn khối này khi màn hẹp, nhưng câu lệnh bị gắn
     vào thuộc tính data-mode="fluid" của môi trường thiết kế mà HTML không hề
     có, nên nó chưa bao giờ chạy. Hậu quả: cụm bên phải rộng quá khổ, đẩy nút
     mở menu ra ngoài màn — ở 375px nút gần như mất hẳn, ở 320px mất cả nút
     tìm kiếm. Số điện thoại vẫn còn ở thanh "Gọi ngay" ghim đáy nên không
     mất đường liên hệ nào. */
  [data-r~="hdr-phone"]{display:none!important}

  /* Ngôi sao trang trí mang top:130px cố định, tính theo lề trên 96px của
     desktop. Lề trên ở đây chỉ còn 26px nên chữ dồn lên còn ngôi sao đứng
     nguyên, rơi đúng vào giữa đoạn văn. Thu nhỏ và đưa lên góc trên phải,
     nơi dòng nhãn đang căn giữa không chạm tới. */
  [data-spin]{width:46px;height:46px;top:4px!important;right:3%!important}

  /* Ô nhập của bản thiết kế là 15px. Safari trên iOS tự phóng to cả trang khi
     người dùng bấm vào ô có cỡ chữ dưới 16px, sau đó họ phải tự thu nhỏ lại.
     Đặt 16px cho mọi ô nhập ở tầng điện thoại để chặn việc đó. */
  input,textarea,select{font-size:16px!important}

  /* Ba nút chuyển đánh giá rộng 32px, dưới mức chạm 44px, lại chỉ cách nhau
     6px. Nới hộp bấm lên 44px; điểm tròn bên trong vẫn 10px nên hình không
     đổi, chỉ giãn khoảng cách giữa các điểm. */
  [data-act="rev"]{width:44px!important;height:44px!important}
  div:has(>[data-act="rev"]){gap:2px;margin-left:-14px}

  /* 7b. Khoảng trắng và cỡ chữ */
  [data-r~="pad"]{padding-top:26px!important;padding-bottom:26px!important}
  [data-r~="container"]{padding-left:16px!important;padding-right:16px!important}
  [data-r~="h1"]{font-size:30px!important}
  [data-r~="h2"]{font-size:23px!important;line-height:1.14!important}
  [data-r~="cols"],[data-r~="grid2"],[data-r~="rail"]{margin-top:18px!important}
  /* Bang chuyen cat tran doc (bat buoc, vi tran ngang dang la auto). Nhan
     "pho bien nhat" cua the gia nho len 13px khoi vien the va bong do cua the
     do xuong duoi, nen phai chua san lo trong BEN TRONG hop cuon roi keo lui
     bang le am — giu dung khoang cach cu voi khoi ben tren. */
  [data-r~="rail"]{margin-top:2px!important;padding-top:16px!important;
    padding-bottom:20px!important;margin-bottom:-14px}
  [data-r~="cols"]{gap:14px!important}
  /* dai so lieu tin cay: hai cot cho thay het bon o, khong giau sau cu truot */
  [data-r~="stats"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-r~="grid2"]{gap:16px!important}
  [data-r~="storypad"]{padding:26px 16px!important}
  [data-r~="marq"]{font-size:26px!important}
  [data-r~="wordmark"]{font-size:34px!important}

  /* 7c. Chiều cao khung ảnh */
  [data-r~="hero"]{min-height:360px!important}
  [data-r~="bleed"]{min-height:200px!important}
  [data-r~="apptL"]{padding:26px 18px!important}
  [data-r~="testi"]{height:210px!important}
  /* Các khung dưới đây mang chiều cao cố định trong layout.css; class neo
     vsn-neo-hN / vsn-neo-mhN trên thẻ cho biết chiều cao gốc đó. Đổi chiều cao
     gốc thì phải đổi cả class neo, nếu không phần ghi đè rơi mất trong im lặng.
     check_anchors.py đối chiếu class neo với chiều cao thật để bắt việc đó. */
  .vsn-neo-h460{height:250px!important}
  .vsn-neo-h420{height:230px!important}
  .vsn-neo-h400{height:220px!important}
  .vsn-neo-h340{height:200px!important}
  .vsn-neo-mh640:not([data-r~="hero"]){min-height:400px}
  .vsn-neo-mh600:not([data-r~="hero"]){min-height:200px!important}
  .vsn-neo-mh560:not([data-r~="hero"]){min-height:190px!important}
  .vsn-neo-mh380:not([data-r~="hero"]){min-height:240px!important}
  /* Panel ảnh cạnh form cũng mang min-height:560px nên trúng selector
     ngay trên. Nới lại sau đó, nhưng CHỈ khi panel có ảnh thật: 190px thì tấm
     nhãn "Cam kết hài lòng" che gần hết ảnh, 250px mới thấy được mặt người.
     Panel chưa có ảnh thì giữ 190px, không để thừa ô xám. */
  [data-r~="apptR"]:has(img){min-height:250px!important}

  /* Tâm cắt nhích lên 22% vì ở đây khung rất ngang và thấp: cắt giữa thì mất
     đầu người, cắt lệch lên thì giữ được mặt. Giá trị này hợp với ảnh người;
     nếu thay bằng ảnh cảnh vật thì cân nhắc bỏ. Phần cho ảnh phủ kín hộp nằm
     ở mục 2, áp cho mọi khung nhìn. */
  [data-r~="apptR"]>img,[data-r~="bleed"]>img{object-position:center 22%}
  /* 7d. Chân trang: hai cột liên kết cạnh nhau thay vì bốn khối xếp dọc.
     Không hạ padding-bottom của footer: thanh gọi cố định cao 70px đang
     đứng đè lên đó. */
  [data-r~="ftwrap"]{padding-top:28px!important}
  [data-r~="ftgrid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  [data-r~="ftgrid"]>[data-r~="ftfull"]{grid-column:1/-1}
  [data-r~="ftgrid"] nav{gap:11px;font-size:15px}
  [data-r~="ftdiv"]{margin-top:24px!important}

  /* 7e. Ô đăng ký bản tin: nút nằm trong ô nhập.
     Dưới 760px ô nhập đã rộng hết hàng nên nút bị đẩy xuống hàng dưới và dạt
     sang phải (form đang justify-content:flex-end), trông như rời khỏi ô.
     Đặt nút đè vào trong ô, chừa lề phải cho chữ không chạy xuống dưới nút.
     Từ 760px trở lên hai thứ vẫn nằm cùng một hàng nên giữ nguyên. */
  [data-r~="newsform"]{display:block!important;position:relative}
  [data-r~="newsinput"]{width:100%;min-width:0!important;
    padding-right:178px!important}
  [data-r~="newsbtn"]{position:absolute;top:5px;right:5px;
    bottom:5px;padding:0 6px 0 20px!important;gap:9px!important}
}

/* ---------- 9. Màn rất hẹp (< 360px) ----------
   Ở 320px ô nhập chỉ còn 105px cho chữ nên dòng gợi ý "Địa chỉ email.." bị nút
   che mất. Thu nút về đúng hình tròn mũi tên, bỏ nhãn chữ; tên nút vẫn nằm ở
   aria-label nên trình đọc màn hình không mất thông tin. */
@media (max-width:359.98px){
  /* Logo cao 52px làm cụm đầu trang rộng quá khổ ở 320px, đẩy nút mở menu ra
     ngoài màn 18px. Thu logo lại cho vừa; từ 375px trở lên vẫn giữ 52px. */
  header a>img{max-height:40px!important}

  [data-r~="newslabel"]{display:none!important}
  [data-r~="newsinput"]{padding-right:58px!important}
  [data-r~="newsbtn"]{padding:0!important;width:46px!important;justify-content:center!important}
}

/* ---------- 8. Tầng máy tính bảng (760–1179px) ----------
   Trước đây tầng này chỉ là bản desktop bóp lại: lưới cứng hai cột, chữ và
   khoảng trắng gần bằng desktop. Khối này cho nó thang riêng.
   Lưới dùng auto-fit để nhóm ba thẻ nằm đủ một hàng, còn nhóm hai thẻ vẫn
   chia đều hàng thay vì để trống một cột. */
@media (min-width:760px) and (max-width:1179.98px){
  /* Ngôi sao trang trí: cùng lý do như tầng điện thoại, lề trên còn 44px nên
     phải đưa lên góc để không chạm tiêu đề và đoạn văn. */
  [data-spin]{width:62px;height:62px;top:6px!important;right:4%!important}

  [data-r~="cols"]{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:18px!important}
  /* Hàng bảng giá cũng mang token "cols" nhưng là hàng của bảng, phải giữ
     đúng bốn cột cho khớp dòng tiêu đề, chỉ thu hẹp lề ô. Đặt sau rule trên
     vì hai selector cùng độ ưu tiên, thứ tự quyết định. */
  [data-r~="tblrow"]{grid-template-columns:1.2fr 1fr 1fr 1fr!important;gap:0!important}
  [data-r~="tblrow"]>div,[data-r~="tblhead"]>div{padding-left:14px;padding-right:14px}

  [data-r~="pad"]{padding-top:44px!important;padding-bottom:44px!important}
  [data-r~="container"]{padding-left:24px!important;padding-right:24px!important}
  [data-r~="h1"]{font-size:40px!important}
  [data-r~="h2"]{font-size:30px!important;line-height:1.12!important}
  [data-r~="cols"],[data-r~="grid2"]{margin-top:24px!important}
  [data-r~="grid2"]{gap:26px!important}
  [data-r~="storypad"]{padding:44px 24px!important}
  [data-r~="marq"]{font-size:44px!important}
  [data-r~="wordmark"]{font-size:74px!important}

  [data-r~="hero"]{min-height:460px!important}
  [data-r~="bleed"]{min-height:300px!important}
  [data-r~="apptL"]{padding:34px 30px!important}
  [data-r~="apptR"]{min-height:300px!important}
  [data-r~="testi"]{height:330px!important}
  .vsn-neo-h460{height:320px!important}
  .vsn-neo-h420{height:300px!important}
  .vsn-neo-h400{height:280px!important}
  .vsn-neo-h340{height:240px!important}
  .vsn-neo-mh640:not([data-r~="hero"]){min-height:460px}
  .vsn-neo-mh600:not([data-r~="hero"]){min-height:300px!important}
  .vsn-neo-mh560:not([data-r~="hero"]){min-height:300px!important}
  .vsn-neo-mh380:not([data-r~="hero"]){min-height:300px!important}

  /* Cùng lý do như ở tầng điện thoại: khung ngang và thấp nên nhích tâm cắt. */
  [data-r~="apptR"]>img,[data-r~="bleed"]>img{object-position:center 22%}
  [data-r~="ftwrap"]{padding-top:44px!important}
  [data-r~="ftgrid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important}
  [data-r~="ftdiv"]{margin-top:34px!important}
}

/* ---------- 10. Dàn cảnh khi cuộn ----------
   Ba lớp chuyển động, cả ba chỉ dùng transform / opacity / clip-path nên trình
   duyệt chạy trên card đồ hoạ, không tính lại bố cục: chiều dài trang giữ
   nguyên từng pixel.
   Ai bật chế độ giảm chuyển động sẽ thấy trang đứng yên, khai báo ở cuối mục. */

/* 10a. Khối hiện ra: quãng dài hơn và chậm hơn bản gốc, nhịp chậm dần sâu hơn,
   ảnh vào khung ở cỡ lớn hơn một chút rồi lắng về đúng cỡ. */
[data-rv]{transform:translateY(44px) scale(.988);
  transition:opacity 1.15s cubic-bezier(.16,.84,.26,1),transform 1.15s cubic-bezier(.16,.84,.26,1)}
/* Khối cùng hàng hiện nối tiếp nhau; design.js gắn data-rv-tre theo thứ tự trong hàng. */
[data-rv][data-rv-tre="1"]{transition-delay:95ms}
[data-rv][data-rv-tre="2"]{transition-delay:190ms}
[data-rv][data-rv-tre="3"]{transition-delay:285ms}
[data-rv][data-rv-tre="4"]{transition-delay:380ms}
[data-rv] img,[data-rv] .imgph{transition:transform 1.6s cubic-bezier(.16,.84,.26,1),
  clip-path 1.25s cubic-bezier(.16,.84,.26,1)}
[data-rv]:not([data-in]) img,[data-rv]:not([data-in]) .imgph{transform:scale(1.07)}
[data-hero-in]{animation-duration:1.25s}

/* 10b. Màn kéo: ảnh lộ dần từ dưới lên thay vì mờ dần.
   Lớp vsn-man do design.js gắn cho khối nào thực sự chứa ảnh. */
[data-rv].vsn-man:not([data-in]) img,[data-rv].vsn-man:not([data-in]) .imgph{clip-path:inset(0 0 100% 0)}
[data-rv].vsn-man img,[data-rv].vsn-man .imgph{clip-path:inset(0 0 0 0)}

/* 10c. Tiêu đề trôi lên từ sau một khung che.
   padding-bottom bù lại phần dấu nằm dưới đường chân chữ của tiếng Việt
   (chữ ụ, ọ, ạ), không có thì khung che cắt mất dấu. */
.vsn-che{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.vsn-che>span{display:block;transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.16,.84,.26,1)}
[data-in] .vsn-che>span,.vsn-che.vsn-hien>span{transform:none}

/* 10d. Thị sai: ảnh nền trôi chậm hơn trang. Ảnh được kéo cao hơn khung 24%
   và đẩy lên 12% để khi trôi không hở mép trên hay mép dưới. */
[data-par]{will-change:transform}
/* Phải tự đặt định vị tuyệt đối ở đây: ảnh trong khối đánh giá vốn nằm theo
   dòng, mà top chỉ có tác dụng với phần tử đã định vị. Thiếu dòng này thì ảnh
   đó dính mép trên, trôi xuống là hở một dải trắng. */
[data-par].vsn-par-anh{position:absolute;left:0;right:0;
  height:124%!important;top:-12%}

@media (prefers-reduced-motion:reduce){
  [data-rv] img,[data-rv] .imgph{transform:none!important;clip-path:none!important}
  .vsn-che>span{transform:none!important}
  [data-par]{transform:none!important}
  [data-par].vsn-par-anh{height:100%!important;top:0!important}
}