@layer reset, base, layout, components, utility;

/* ===== TOKEN — nguồn sự thật là src/Tokens.php.
   Khối này là giá trị mặc định; Customizer chỉ in ra thứ khác mặc định.
   Để NGOÀI mọi @layer để thẻ <style id="vt-tokens"> trong <head> ghi đè được. */
:root{
  /* --- Màu: hai màu cơ bản, phần còn lại suy ra --- */
  --vt-brand:#0b6b3a;
  --vt-on-brand:#ffffff;
  --vt-accent:#c8862a;
  --vt-on-accent:#111111;

  --vt-brand-hi:color-mix(in oklab,var(--vt-brand) 62%,#fff);
  --vt-brand-lo:color-mix(in oklab,var(--vt-brand) 86%,#000);
  --vt-brand-soft:color-mix(in srgb,var(--vt-brand) 10%,transparent);

  /* --- Nền và chữ: bộ sáng. Dải tối khai lại ở [data-surface=dark] --- */
  --vt-surface:#ffffff;
  --vt-surface-2:#f4f6f6;
  --vt-ink:#0f1416;
  --vt-ink-2:#5a6568;
  --vt-line:#dfe4e5;
  --vt-accent-fg:var(--vt-accent);
  --vt-brand-fg:var(--vt-brand);

  /* Nền viên chip. Đậm hơn --vt-surface-2 để viên tách hẳn khỏi nền trang như mẫu.
     Khai lại nguyên văn ở hai khối [data-surface]: giá trị var() bên trong một custom
     property được thay tại chính nơi KHAI, nên chỉ để ở :root là viên giữ màu sáng cả
     khi nằm trong dải tối. */
  --vt-chip-bg:color-mix(in srgb,var(--vt-ink) 10%,var(--vt-surface));
  --vt-chip-bg-hi:color-mix(in srgb,var(--vt-brand) 16%,var(--vt-surface));

  /* Màu báo lỗi. Cố định, không cho chỉnh: đỏ là quy ước ai cũng hiểu, để khách đổi
     thành màu khác là mất luôn tín hiệu. */
  --vt-danger:#b32318;

  /* --- Font --- */
  --vt-font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* --- Thang chữ. Bốn mức lớn co giãn, còn lại số cứng. --- */
  --vt-fs-hero:clamp(40px,27.43px + 2.619vw,62px);
  --vt-fs-h1:clamp(32px,18.29px + 2.857vw,56px);
  --vt-fs-h2:clamp(28px,16.57px + 2.381vw,48px);
  --vt-fs-h3:24px;
  --vt-fs-h4:18px;
  --vt-fs-lead:clamp(17px,15.29px + 0.357vw,20px);
  --vt-fs-body:16px;
  --vt-fs-small:14px;
  --vt-fs-eyebrow:13px;
  --vt-fs-menu:15px;
  --vt-fs-btn:15px;

  --vt-fw-hero:600; --vt-fw-h1:600; --vt-fw-h2:600; --vt-fw-h3:600; --vt-fw-h4:600;
  --vt-fw-lead:400; --vt-fw-body:400; --vt-fw-small:400; --vt-fw-eyebrow:600;
  --vt-fw-menu:500; --vt-fw-btn:600;

  --vt-lh-hero:1.1; --vt-lh-h1:1.15; --vt-lh-h2:1.2; --vt-lh-h3:1.35; --vt-lh-h4:1.4;
  --vt-lh-lead:1.5; --vt-lh-body:1.6; --vt-lh-small:1.45; --vt-lh-eyebrow:1.2;
  --vt-lh-menu:1.2; --vt-lh-btn:1.2;
  --vt-lh-read:1.75;      /* bài dài: 16 × 1.75 = 28px, đúng lưới 4px */

  --vt-ls-hero:-0.02em; --vt-ls-h1:-0.02em; --vt-ls-h2:-0.02em; --vt-ls-h3:-0.01em; --vt-ls-h4:0em;
  --vt-ls-lead:0em; --vt-ls-body:0em; --vt-ls-small:0em; --vt-ls-eyebrow:0.08em;
  --vt-ls-menu:0em; --vt-ls-btn:0em;

  /* --- Bề ngang: năm tầng. 1320px đo trên nvidia.com. --- */
  --vt-shell:1320px;
  --vt-wide:1320px;
  --vt-mid:1000px;        /* giữa cột đọc và bề ngang trang: khối FAQ, bảng dài */
  --vt-content:760px;
  --vt-narrow:560px;
  --vt-aside:320px;       /* cột phải trang tin — đo trên blogs.nvidia.com ~300px */
  --vt-card-thumb:270px;  /* ảnh trái của thẻ dạng hàng, cùng số đo */
  --vt-gutter:clamp(16px,4vw,32px);

  /* --- Header và logo --- */
  --vt-header-h:64px;
  --vt-header-h-m:56px;
  --vt-logo-h:36px;
  --vt-logo-h-m:30px;
  --vt-flogo-h:40px;
  --vt-flogo-h-m:32px;

  /* --- Dòng bản quyền: cỡ và màu chỉnh riêng ở Customizer --- */
  --vt-copy-fs:var(--vt-fs-small);
  --vt-copy-color:var(--vt-ink-2);

  /* --- Khoảng cách: thang 8px, số cứng. Chỉ đệm section và đệm trang co giãn. --- */
  --vt-s-1:4px;  --vt-s-2:8px;  --vt-s-3:12px; --vt-s-4:16px;
  --vt-s-5:24px; --vt-s-6:32px; --vt-s-7:48px; --vt-s-8:64px;
  --vt-section:clamp(56px,7vw,96px);

  /* --- Điều khiển: vùng chạm và đệm. Dùng lại ở nút, ô nhập, nút icon, mục menu. --- */
  --vt-tap:44px;          /* ngưỡng chạm tối thiểu — không hạ */
  --vt-tap-lg:48px;       /* hàng menu trong bảng trượt điện thoại */
  --vt-tap-sm:36px;       /* nút nhỏ, chỉ ở nơi chắc chắn không chạm bằng ngón */
  --vt-field-h:48px;      /* cao ô nhập */
  --vt-btn-pad:10px 20px;
  --vt-btn-pad-sm:6px 12px;
  /* Nền nút đi theo dải: xanh đậm trên nền đen là trượt tương phản, dải tối khai lại. */
  --vt-btn-bg:var(--vt-brand);
  --vt-btn-fg:var(--vt-on-brand);
  --vt-field-pad:12px 16px;
  --vt-icon:20px;
  --vt-icon-sm:18px;
  --vt-icon-social:24px;  /* logo thương hiệu cần to hơn icon nét vẽ mới đọc ra */
  --vt-icon-lg:26px;      /* dock nổi: nút không có nhãn nên icon phải gánh hết nghĩa */
  --vt-menu-w:220px;      /* bề ngang tối thiểu của menu con */
  --vt-mega-rail:260px;   /* cột trái của tấm mega */
  --vt-mega-h:340px;      /* cao tối thiểu của tấm — xem chú thích ở mục MEGA MENU */
  --vt-map-h:300px;       /* sàn của bản đồ nhúng khi nó kéo giãn theo cột */

  /* --- Bo góc: gần vuông, ngôn ngữ kỹ thuật --- */
  --vt-r-sm:2px;
  --vt-r:4px;
  --vt-r-lg:6px;
  --vt-r-full:999px;

  /* --- Tỉ lệ ảnh: MỘT tỉ lệ cho mọi ảnh bài và thẻ. Lý do ở DESIGN.md §10 --- */
  --vt-ratio-share:1200/630;
  --vt-ratio-hero:16/9;

  /* --- Chuyển động --- */
  --vt-ease:cubic-bezier(.2,.7,.3,1);
  --vt-dur:200ms;

  /* --- Tầng xếp chồng --- */
  --vt-z-header:8000;
  --vt-z-panel:8100;
  --vt-z-dock:8500;

  color-scheme:light;
}

/* Đảo nền cho một dải bất kỳ. Đây là cơ chế sáng-tối xen kẽ của cả site:
   đặt data-surface="dark" lên section là mọi thứ bên trong tự đổi màu. */
[data-surface="dark"]{
  --vt-surface:#0a0c0d;
  --vt-surface-2:#14181a;
  --vt-ink:#f2f5f5;
  --vt-ink-2:#9aa4a7;
  --vt-line:#252b2e;
  --vt-chip-bg:color-mix(in srgb,var(--vt-ink) 10%,var(--vt-surface));
  --vt-chip-bg-hi:color-mix(in srgb,var(--vt-brand) 16%,var(--vt-surface));
  --vt-brand-fg:var(--vt-brand-hi);
  --vt-accent-fg:color-mix(in oklab,var(--vt-accent) 70%,#fff);
  --vt-danger:#f97066;
  --vt-btn-bg:var(--vt-accent);
  --vt-btn-fg:#0a0c0d;
  background:var(--vt-surface);
  color:var(--vt-ink);
  color-scheme:dark;
}

[data-surface="light"]{
  --vt-surface:#ffffff;
  --vt-surface-2:#f4f6f6;
  --vt-ink:#0f1416;
  --vt-ink-2:#5a6568;
  --vt-line:#dfe4e5;
  --vt-chip-bg:color-mix(in srgb,var(--vt-ink) 10%,var(--vt-surface));
  --vt-chip-bg-hi:color-mix(in srgb,var(--vt-brand) 16%,var(--vt-surface));
  --vt-brand-fg:var(--vt-brand);
  --vt-accent-fg:var(--vt-accent);
  --vt-btn-bg:var(--vt-brand);
  --vt-btn-fg:var(--vt-on-brand);
  background:var(--vt-surface);
  color:var(--vt-ink);
  color-scheme:light;
}
/* Thanh neo SP/DV: nền tối, chữ vàng thương hiệu. Ở đây vì product.css hết trần. */
.vt-anchors[data-surface]{
  --vt-ink-2:var(--vt-accent);
  --vt-ink:var(--vt-accent-fg);
  --vt-brand-fg:var(--vt-accent);
}
/* Breadcrumb trên dải tối: icon, dấu ›, viền bao đều vàng. */
[data-surface="dark"] .vt-crumbs{--vt-brand-fg:var(--vt-accent);--vt-ink-2:var(--vt-accent);--vt-line:var(--vt-accent)}


@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
  ul[class],ol[class]{margin:0;padding:0;list-style:none}
  img,picture,video,canvas,svg{display:block;max-width:100%}
  img{height:auto}
  input,button,textarea,select{font:inherit;color:inherit}
  /* appearance:none: thiếu nó Safari/iOS vẫn tự vẽ nền mờ sau <button>. */
  button{appearance:none;background:none;border:0;cursor:pointer}
  a{color:inherit}
  table{border-collapse:collapse}

  /* BẮT BUỘC. Thuộc tính hidden chỉ đặt display:none ở mức UA, thua mọi rule có
     class — .vt-nav--drawer .sub-menu{display:block} sẽ mở toang mọi nhóm menu.
     !important trong layer THẤP NHẤT thắng cả !important ở layer cao hơn. */
  [hidden]{display:none!important}

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


@layer base{
  body{
    font-family:var(--vt-font);
    font-size:var(--vt-fs-body);
    font-weight:var(--vt-fw-body);
    line-height:var(--vt-lh-body);
    letter-spacing:var(--vt-ls-body);
    background:var(--vt-surface);
    color:var(--vt-ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* H1 tiêu đề trang · H2 ý chính · H3 ý phụ · H4 tiêu đề nhỏ.
     H5–H6 cố tình không tạo bậc mới — cần chữ to mà không phải tiêu đề thì dùng class. */
  h1{font-size:var(--vt-fs-h1);font-weight:var(--vt-fw-h1);line-height:var(--vt-lh-h1);letter-spacing:var(--vt-ls-h1)}
  h2{font-size:var(--vt-fs-h2);font-weight:var(--vt-fw-h2);line-height:var(--vt-lh-h2);letter-spacing:var(--vt-ls-h2)}
  h3{font-size:var(--vt-fs-h3);font-weight:var(--vt-fw-h3);line-height:var(--vt-lh-h3);letter-spacing:var(--vt-ls-h3)}
  h4,h5,h6{font-size:var(--vt-fs-h4);font-weight:var(--vt-fw-h4);line-height:var(--vt-lh-h4);letter-spacing:var(--vt-ls-h4)}

  h1,h2,h3,h4{text-wrap:balance}
  p{text-wrap:pretty}

  a{color:var(--vt-brand-fg);text-decoration-thickness:1px;text-underline-offset:.18em}
  a:hover{color:var(--vt-brand-fg)}

  :focus-visible{
    outline:2px solid var(--vt-brand-fg);
    outline-offset:2px;
    border-radius:var(--vt-r-sm);
  }

  ::selection{background:var(--vt-brand);color:var(--vt-on-brand)}
}


@layer layout{
  .vt-wrap{
    width:100%;
    margin-inline:auto;
    padding-inline:var(--vt-gutter);
  }
  .vt-wrap--shell{max-width:calc(var(--vt-shell) + var(--vt-gutter) * 2)}
  .vt-wrap--wide{max-width:calc(var(--vt-wide) + var(--vt-gutter) * 2)}
  .vt-wrap--mid{max-width:calc(var(--vt-mid) + var(--vt-gutter) * 2)}
  .vt-wrap--narrow{max-width:calc(var(--vt-narrow) + var(--vt-gutter) * 2)}

  .vt-main{
    display:block;
    padding-block:var(--vt-s-7) var(--vt-section);
    min-height:40vh;
  }

  .vt-section{padding-block:var(--vt-section)}
}


@layer components{

  /* --- Bỏ qua tới nội dung --- */
  .vt-skip{
    position:absolute;
    left:var(--vt-s-4);
    top:-100px;
    z-index:10000;
    padding:var(--vt-s-3) var(--vt-s-5);
    background:var(--vt-brand);
    color:var(--vt-on-brand);
    border-radius:var(--vt-r);
    text-decoration:none;
    transition:top var(--vt-dur) var(--vt-ease);
  }
  .vt-skip:focus{top:var(--vt-s-4)}


  /* ===== HEADER — một DOM, hai bố cục, đổi ở đúng MỘT mốc 1024px.
       <1024  grid:  [menu] [  logo  ] [tìm]      ← mặc định, mobile-first
       ≥1024  flex:  [logo][menu chính] … [menu phụ][tìm]
     Năm phần tử là con TRỰC TIẾP của .vt-header__in. Bọc thêm div là vỡ grid. */
  .vt-header{
    position:relative;
    z-index:var(--vt-z-header);
    background:var(--vt-surface);
    color:var(--vt-ink);
    border-bottom:1px solid var(--vt-line);
  }

  .vt-header[data-sticky="always"],
  .vt-header[data-sticky="scrollup"]{position:sticky;top:0}
  .vt-header[data-sticky="scrollup"]{transition:transform var(--vt-dur) var(--vt-ease)}
  .vt-header[data-sticky="scrollup"].is-hidden{transform:translateY(-100%)}

  .vt-header__in{
    display:grid;
    grid-template-columns:var(--vt-tap) 1fr var(--vt-tap);
    align-items:center;
    gap:var(--vt-s-2);
    min-height:var(--vt-header-h-m);
  }
  .vt-header__in > .vt-nav{display:none}
  .vt-brand{justify-self:center}
  .vt-toggle--search{justify-self:end}

  /* Kéo hai nút ra sát mép: ô chạm vẫn đủ 44px, chỉ hộp lấn ra ngoài đệm .vt-wrap.
     Nút có width cố định nên margin âm dịch chỗ, không kéo giãn, track lưới không đổi. */
  .vt-burger{margin-inline-start:calc(var(--vt-s-3) * -1)}
  .vt-toggle--search{margin-inline-end:calc(var(--vt-s-3) * -1)}


  /* --- Logo: chiều cao là token, bề rộng tự tràn theo tỉ lệ ảnh gốc --- */
  .vt-brand{display:flex;align-items:center;min-width:0;min-height:var(--vt-tap)}
  .vt-brand a,
  .vt-brand .custom-logo-link{display:flex;align-items:center;text-decoration:none;color:inherit}
  .vt-brand img,
  .vt-brand .custom-logo{
    height:var(--vt-logo-h-m);
    width:auto;
    max-width:100%;
    object-fit:contain;
  }
  .vt-brand__text{
    font-size:var(--vt-fs-h4);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }


  /* --- Nút icon. Đổi icon theo aria-expanded — không cần một dòng JS nào. --- */
  .vt-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--vt-tap);height:var(--vt-tap);flex-shrink:0;border-radius:var(--vt-r);color:var(--vt-ink);transition:background var(--vt-dur) var(--vt-ease),color var(--vt-dur) var(--vt-ease)}
  .vt-iconbtn:hover{background:var(--vt-surface-2);color:var(--vt-brand-fg)}
  .vt-iconbtn svg{width:var(--vt-icon-lg);height:var(--vt-icon-lg);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  .vt-toggle .vt-i--close{display:none}
  .vt-toggle[aria-expanded="true"] .vt-i--open{display:none}
  .vt-toggle[aria-expanded="true"] .vt-i--close{display:block}
  .vt-toggle[aria-expanded="true"]{background:var(--vt-surface-2)}


  /* --- Menu ngang (chỉ hiện từ 1024px) --- */
  .vt-nav{min-width:0}
  .vt-menu{display:flex;align-items:center;gap:var(--vt-s-5)}
  .vt-menu li{position:relative}

  .vt-menu a{
    display:inline-flex;
    align-items:center;
    min-height:var(--vt-tap);
    font-size:var(--vt-fs-menu);
    font-weight:var(--vt-fw-menu);
    line-height:var(--vt-lh-menu);
    letter-spacing:var(--vt-ls-menu);
    color:var(--vt-ink);
    text-decoration:none;
    white-space:nowrap;
    transition:color var(--vt-dur) var(--vt-ease);
  }
  .vt-menu a:hover{color:var(--vt-brand-fg)}

  /* Vạch mảnh sát đáy header cho mục đang xem. */
  .vt-menu .current-menu-item > a,
  .vt-menu .current-menu-ancestor > a,
  .vt-menu .current_page_item > a{
    color:var(--vt-brand-fg);
    box-shadow:inset 0 -2px 0 0 var(--vt-brand-fg);
  }

  /* Menu phụ: nhỏ hơn và nhạt hơn. Thứ bậc nằm ở cỡ chữ, không ở vị trí. */
  .vt-nav--secondary .vt-menu a{
    font-size:var(--vt-fs-small);
    font-weight:400;
    color:var(--vt-ink-2);
  }
  .vt-nav--secondary .vt-menu a:hover{color:var(--vt-ink)}


  /* ===== MEGA MENU — cột trái danh mục · cột phải lưới. Cờ do Nav::flagMega() gắn.
     Ba điểm dễ sai:
     1. `static` để tấm bám .vt-header, không bám <li> (.vt-menu li là relative).
     2. `display:contents` cho <li> cấp 2 tan ra, nhả <a> và tấm thành hai grid item.
     3. Tấm phải absolute: `grid-row:1/-1` chỉ chạy khi lưới có hàng khai tường minh,
        ở đây hàng là ngầm. Đổi lại, tấm không kéo cao được cột trái → --vt-mega-h
        chặn dưới, cao hơn thì cuộn trong lòng tấm như nvidia.com. */
  .vt-menu > li.vt-has-mega{position:static}

  .vt-mega{
    display:none;
    position:absolute;
    top:100%;
    inset-inline:0;
    z-index:var(--vt-z-panel);
    background:var(--vt-surface);
    border-top:1px solid var(--vt-line);
    border-bottom:1px solid var(--vt-line);
  }
  .vt-menu > li.vt-has-mega:hover > .vt-mega,
  .vt-menu > li.vt-has-mega:focus-within > .vt-mega{display:block}

  .vt-mega__in{
    position:relative;
    display:grid;
    grid-template-columns:var(--vt-mega-rail) 1fr;
    min-height:var(--vt-mega-h);
    padding-block:var(--vt-s-6);
  }
  .vt-mega__cat{display:contents}

  /* Cột trái. Rule nhắm <a> trong tấm PHẢI có `.vt-mega` đứng trước: `.vt-menu a` là
     (0,1,1), thắng `.vt-mega__label` (0,1,0) bất kể viết sau. */
  .vt-mega .vt-mega__label{
    grid-column:1;
    display:flex;
    align-items:center;
    min-height:var(--vt-tap);
    padding-inline:var(--vt-s-4);
    border-inline-start:2px solid transparent;
    font-size:var(--vt-fs-body);
    font-weight:400;
    color:var(--vt-ink-2);
    white-space:normal;
  }
  .vt-mega .vt-mega__cat.is-open > .vt-mega__label{
    border-inline-start-color:var(--vt-brand-fg);
    font-weight:600;
    color:var(--vt-ink);
  }

  /* Cột phải. inset-inline cộng --vt-gutter vì khối bao của phần tử absolute là HỘP
     ĐỆM của .vt-mega__in — thiếu nó thì tấm lệch trái đúng một gutter. */
  .vt-mega__pane{
    display:none;
    position:absolute;
    inset-block:var(--vt-s-6);
    inset-inline:calc(var(--vt-gutter) + var(--vt-mega-rail)) var(--vt-gutter);
    padding-inline-start:var(--vt-s-7);
    border-inline-start:1px solid var(--vt-line);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .vt-mega__cat.is-open > .vt-mega__pane{display:block}

  .vt-mega__ptitle{
    margin-bottom:var(--vt-s-5);
    font-size:var(--vt-fs-h4);
    font-weight:700;
    line-height:var(--vt-lh-h4);
    color:var(--vt-ink);
  }

  .vt-mega__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--vt-s-5) var(--vt-s-6);
    align-content:start;
  }

  .vt-mega .vt-mega__link{
    display:flex;
    flex-direction:column;
    gap:var(--vt-s-1);
    align-items:flex-start;
    min-height:0;          /* huỷ min-height:var(--vt-tap) của .vt-menu a */
    white-space:normal;    /* huỷ nowrap của .vt-menu a — ô có mô tả phải xuống dòng */
  }
  .vt-mega__name{
    display:flex;
    align-items:center;
    gap:var(--vt-s-1);
    font-size:var(--vt-fs-small);
    font-weight:600;
    line-height:var(--vt-lh-small);
    color:var(--vt-ink);
    transition:color var(--vt-dur) var(--vt-ease);
  }
  .vt-mega__link:hover .vt-mega__name{color:var(--vt-brand-fg)}
  .vt-mega__arrow{color:var(--vt-brand-fg);font-weight:700}

  .vt-mega__desc{
    font-size:var(--vt-fs-small);
    font-weight:400;
    line-height:var(--vt-lh-body);
    color:var(--vt-ink-2);
  }


  /* Menu con thường trên máy tính — mục cấp 1 chỉ có con, không có cháu. */
  .vt-nav .sub-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    z-index:var(--vt-z-panel);
    min-width:var(--vt-menu-w);
    padding-block:var(--vt-s-2);
    background:var(--vt-surface);
    border:1px solid var(--vt-line);
    border-radius:var(--vt-r);
  }
  .vt-nav .vt-menu > li:hover > .sub-menu,
  .vt-nav .vt-menu > li:focus-within > .sub-menu{display:block}

  .vt-nav .sub-menu a{
    display:flex;
    width:100%;
    min-height:var(--vt-tap);
    padding-inline:var(--vt-s-4);
    font-size:var(--vt-fs-small);
    font-weight:400;
    white-space:normal;
  }
  .vt-nav .sub-menu a:hover{background:var(--vt-surface-2)}


  /* --- BẢNG TRƯỢT ĐIỆN THOẠI --- */
  .vt-drawer{
    border-top:1px solid var(--vt-line);
    background:var(--vt-surface);
    max-height:calc(100dvh - var(--vt-header-h-m));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .vt-drawer .vt-wrap{padding-block:var(--vt-s-4)}

  .vt-nav--drawer .vt-menu{display:block}

  .vt-m__item{position:relative}

  .vt-m__link{
    display:flex;
    align-items:center;
    width:100%;
    min-height:var(--vt-tap-lg);
    padding-right:var(--vt-tap-lg);
    font-size:var(--vt-fs-h4);
    font-weight:400;
    line-height:var(--vt-lh-h4);
    color:var(--vt-ink);
    text-decoration:none;
    white-space:normal;
  }
  .vt-m__item.is-current > .vt-m__link{color:var(--vt-brand-fg)}

  /* Nút gập TÁCH khỏi thẻ <a>: bấm chữ vẫn đi tới trang cha,
     bấm mũi tên mới mở nhóm. Gộp làm một là mất trang danh mục cha. */
  .vt-m__fold{
    position:absolute;
    top:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--vt-tap-lg);
    height:var(--vt-tap-lg);
    color:var(--vt-ink-2);
  }
  .vt-m__fold svg{
    width:var(--vt-icon);
    height:var(--vt-icon);
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform var(--vt-dur) var(--vt-ease);
  }
  .vt-m__fold[aria-expanded="true"] svg{transform:rotate(180deg)}
  .vt-m__fold[aria-expanded="true"]{color:var(--vt-brand-fg)}

  .vt-nav--drawer .sub-menu{
    display:block;
    position:static;
    min-width:0;
    padding:0 0 var(--vt-s-2);
    border:0;
    border-radius:0;
    background:transparent;
  }
  .vt-nav--drawer .sub-menu .vt-m__link{
    min-height:var(--vt-tap);
    padding-left:var(--vt-s-4);
    font-size:var(--vt-fs-body);
    color:var(--vt-ink-2);
  }
  /* Cấp 3 thụt thêm một bậc. Chọn con của .sub-menu LỒNG trong .sub-menu chứ không
     dùng > liên tiếp: mục cấp 2 không có con vẫn phải giữ nguyên bậc thụt cũ. */
  .vt-nav--drawer .sub-menu .sub-menu .vt-m__link{padding-left:var(--vt-s-6)}


  /* --- TẤM TÌM KIẾM — dùng chung máy tính và điện thoại.
     Nền tối cố định bất kể tông header: ô tìm phải nổi hẳn khỏi trang phía sau. --- */
  .vt-search{border-top:1px solid var(--vt-line)}
  .vt-search__in{padding-block:var(--vt-s-8)}

  .vt-search__title{
    margin-bottom:var(--vt-s-6);
    text-align:center;
    font-size:var(--vt-fs-h2);
  }

  .vt-search input[type="search"]{
    min-height:calc(var(--vt-field-h) + var(--vt-s-2));
    background:transparent;
    border-color:var(--vt-ink-2);
  }

  .vt-chips__fold{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--vt-s-2);
    width:100%;
    min-height:var(--vt-tap);
    margin-top:var(--vt-s-5);
    font-size:var(--vt-fs-small);
    font-weight:600;
    color:var(--vt-ink);
  }
  .vt-chips__fold svg{
    width:var(--vt-icon-sm);
    height:var(--vt-icon-sm);
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform var(--vt-dur) var(--vt-ease);
  }
  .vt-chips__fold[aria-expanded="true"] svg{transform:rotate(180deg)}

  .vt-chips .vt-menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--vt-s-2);
    margin-top:var(--vt-s-4);
  }
  .vt-chips a{
    min-height:var(--vt-tap);
    padding-inline:var(--vt-s-4);
    border:1px solid var(--vt-line);
    border-radius:var(--vt-r-full);
    font-size:var(--vt-fs-small);
    font-weight:600;
    color:var(--vt-ink);
    white-space:normal;
  }
  .vt-chips a:hover{border-color:var(--vt-brand-fg);color:var(--vt-brand-fg)}

  /* --- Nút --- */
  .vt-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--vt-s-2);
    min-height:var(--vt-tap);
    padding:var(--vt-btn-pad);
    border-radius:var(--vt-r);
    background:var(--vt-btn-bg);
    color:var(--vt-btn-fg);
    font-size:var(--vt-fs-btn);
    font-weight:var(--vt-fw-btn);
    line-height:var(--vt-lh-btn);
    letter-spacing:var(--vt-ls-btn);
    text-decoration:none;
    transition:transform var(--vt-dur) var(--vt-ease),opacity var(--vt-dur) var(--vt-ease);
  }
  .vt-btn:hover{transform:translateY(-1px);opacity:.92;color:var(--vt-btn-fg)}
  .vt-btn:disabled,.vt-btn[aria-disabled="true"]{opacity:.4;transform:none;pointer-events:none}

  .vt-btn--sm{min-height:var(--vt-tap-sm);padding:var(--vt-btn-pad-sm);font-size:var(--vt-fs-small);border-radius:var(--vt-r-sm)}

  /* Ô icon: nét vẽ trong ô bo góc nền nhạt. Điều khiển dùng chung — mắt tìm HÌNH trước
     rồi mới đọc chữ, nên hàng có icon quét dọc nhanh hơn cột nhãn toàn chữ. */
  .vt-ichip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--vt-tap);
    height:var(--vt-tap);
    flex-shrink:0;
    border-radius:var(--vt-r);
    background:var(--vt-brand-soft);
    color:var(--vt-brand-fg);
  }
  .vt-ichip svg{
    width:var(--vt-icon);
    height:var(--vt-icon);
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* Nút chép — điều khiển DÙNG CHUNG, ở main.css vì hành vi nằm ở site.js. Giữ --vt-tap
     chứ không --vt-tap-sm: bấm trượt sang dòng bên là chép nhầm số tài khoản. */
  .vt-copybtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--vt-tap);
    height:var(--vt-tap);
    flex-shrink:0;
    margin-block:calc(var(--vt-s-2) * -1);
    border-radius:var(--vt-r);
    color:var(--vt-ink-2);
    transition:color var(--vt-dur) var(--vt-ease);
  }
  .vt-copybtn:hover{background:var(--vt-chip-bg);color:var(--vt-ink)}

  /* Viên báo "đã chép", site.js bật rồi tự tắt. GIỮA đáy màn chứ không góc trái —
     chỗ đó của dock (§5). pointer-events:none để không chắn nút phía dưới. */
  /* ĐIỆN THOẠI: thanh tràn hết bề ngang đáy màn — câu báo dài 36 ký tự, viên bo tròn ở
     giữa màn 390px sẽ xuống hai dòng. Từ 640px mới thu về viên. */
  .vt-toast{
    position:fixed;
    inset-inline:0;
    bottom:0;
    z-index:var(--vt-z-dock);
    padding:var(--vt-s-3) var(--vt-s-4);
    background:var(--vt-brand);
    color:var(--vt-on-brand);
    font-size:var(--vt-fs-small);
    font-weight:600;
    text-align:center;
    pointer-events:none;
    opacity:0;
    transition:opacity var(--vt-dur) var(--vt-ease);
  }
  .vt-toast.is-on{opacity:1}

  @media (min-width:640px){
    .vt-toast{
      inset-inline:50% auto;
      bottom:var(--vt-s-6);
      translate:-50% 0;
      padding-inline:var(--vt-s-5);
      border-radius:var(--vt-r-full);
    }
  }
  .vt-copybtn svg{
    width:var(--vt-icon-sm);
    height:var(--vt-icon-sm);
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .vt-btn svg{width:var(--vt-icon-sm);height:var(--vt-icon-sm);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

  .vt-searchform{display:flex;gap:var(--vt-s-2)}
  .vt-searchform input[type="search"]{flex:1;min-width:0}
  .vt-searchform .vt-btn{flex-shrink:0}


  /* --- Ô nhập --- */
  input[type="text"],input[type="search"],input[type="email"],input[type="tel"],
  input[type="url"],input[type="number"],input[type="password"],textarea,select{
    width:100%;
    min-height:var(--vt-field-h);
    padding:var(--vt-field-pad);
    background:var(--vt-surface);
    color:var(--vt-ink);
    border:1px solid var(--vt-line);
    border-radius:var(--vt-r);
    transition:border-color var(--vt-dur) var(--vt-ease);
  }
  textarea{min-height:calc(var(--vt-field-h) * 2.5)}
  input:focus,textarea:focus,select:focus{border-color:var(--vt-brand-fg);outline-offset:0}
  ::placeholder{color:var(--vt-ink-2);opacity:1}


  /* --- Nhãn trên tiêu đề --- */
  .vt-eyebrow{
    display:block;
    font-size:var(--vt-fs-eyebrow);
    font-weight:var(--vt-fw-eyebrow);
    line-height:var(--vt-lh-eyebrow);
    letter-spacing:var(--vt-ls-eyebrow);
    text-transform:uppercase;
    color:var(--vt-accent);
  }

  .vt-lead{
    font-size:var(--vt-fs-lead);
    font-weight:var(--vt-fw-lead);
    line-height:var(--vt-lh-lead);
    color:var(--vt-ink-2);
  }


  /* --- Tiêu đề trang --- */
  .vt-page-head{margin-bottom:var(--vt-s-7)}
  .vt-page-title{margin:0}


  /* --- Danh sách đơn giản: index.php và search.php --- */
  .vt-list{display:grid;gap:var(--vt-s-6)}
  .vt-card__title{font-size:var(--vt-fs-h3);margin-bottom:var(--vt-s-2)}
  .vt-card__title a{color:var(--vt-ink);text-decoration:none}
  .vt-card__title a:hover{color:var(--vt-brand-fg)}
  .vt-card__desc{color:var(--vt-ink-2)}

  .vt-pager{margin-top:var(--vt-s-7)}
  .vt-pager .nav-links{display:flex;flex-wrap:wrap;gap:var(--vt-s-2)}
  .vt-pager .page-numbers{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:var(--vt-tap);min-height:var(--vt-tap);padding:0 var(--vt-s-3);
    border:1px solid var(--vt-line);border-radius:var(--vt-r);
    text-decoration:none;color:var(--vt-ink);
  }
  .vt-pager .page-numbers.current{background:var(--vt-btn-bg);color:var(--vt-btn-fg);border-color:var(--vt-btn-bg)}

  .vt-empty{text-align:center;padding-block:var(--vt-s-8)}
  .vt-empty p{color:var(--vt-ink-2);margin-block:var(--vt-s-4)}


  /* ===== CHÂN TRANG — hai khối
       trên (nền tối):   3 cột menu · hàng đăng ký nhận tin | theo dõi
       dưới (nền sáng):  logo · menu pháp lý · bản quyền
     Mặc định là bố cục điện thoại: mọi thứ một cột, căn giữa. */
  .vt-footer__top{padding-block:var(--vt-s-8)}
  .vt-footer__bottom{padding-block:var(--vt-s-6)}

  .vt-footer__cols{display:grid;grid-template-columns:1fr;gap:var(--vt-s-7)}

  .vt-fcol__title{
    margin-bottom:var(--vt-s-3);
    padding-bottom:var(--vt-s-3);
    border-bottom:1px solid var(--vt-line);
    font-size:var(--vt-fs-h4);
    font-weight:600;
    text-align:center;
  }

  /* Điện thoại: liên kết chảy ngang rồi xuống dòng — cột dọc trên màn hẹp
     đẩy khối đăng ký xuống quá xa, phải cuộn mãi mới thấy. */
  .vt-fcol__nav .vt-menu{
    display:flex;
    flex-wrap:wrap;
    gap:0 var(--vt-s-5);
  }
  .vt-fcol__nav a{
    min-height:var(--vt-tap);
    font-size:var(--vt-fs-body);
    font-weight:400;
    color:var(--vt-accent);
    white-space:normal;
  }
  .vt-fcol__nav a:hover{color:var(--vt-ink)}


  /* --- Hàng đăng ký nhận tin và theo dõi --- */
  .vt-footer__row{
    display:grid;
    gap:var(--vt-s-6);
    margin-top:var(--vt-s-7);
    justify-items:center;
    text-align:center;
  }

  /* Khe hẹp hơn ba cột menu phía trên: icon, dòng mời và ô nhập là MỘT cụm, tách xa
     nhau thì đọc thành ba thứ rời rạc. */
  .vt-sub{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--vt-s-3);
  }
  .vt-sub__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--vt-tap);
    height:var(--vt-tap);
    border:2px solid var(--vt-accent);
    color:var(--vt-accent);
  }
  .vt-sub__icon svg{
    width:var(--vt-icon);
    height:var(--vt-icon);
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .vt-sub__text{font-size:var(--vt-fs-body)}

  /* Ô email + nút trên MỘT hàng, câu báo xuống dòng riêng nhờ flex-basis 100%.
     Hai chỗ dễ sai:
     - Form phải `flex:1 1 auto` + `width:100%` mới ăn hết chỗ trống của .vt-sub ở khổ
       ngang, và tràn hết bề ngang ở khổ dọc.
     - Ô nhập phải `flex:1 1 0`, KHÔNG phải auto: main.css cho input `width:100%`, mà
       basis auto lấy đúng con số đó làm cơ sở → nút bị đẩy xuống dòng dưới. */
  .vt-sub__form{
    display:flex;
    flex-wrap:wrap;
    gap:var(--vt-s-2);
    flex:1 1 auto;
    width:100%;
    min-width:0;
  }

  /* Nền trong suốt + viền sáng: ô nhập nằm trên dải TỐI, mà --vt-line ở dải tối gần
     như trùng nền. Cùng cách .vt-search đang làm cho ô tìm kiếm. */
  .vt-sub__form input[type="email"]{
    flex:1 1 0;
    min-width:0;
    background:transparent;
    border-color:var(--vt-accent);
  }

  /* Khai lại viền lúc có tiêu điểm. Rule trên là (0,2,1), thắng `input:focus` (0,1,1)
     của main.css — không khai thì ô mất hẳn dấu hiệu đang gõ. */
  .vt-sub__form input[type="email"]:focus{border-color:var(--vt-accent-fg)}

  .vt-sub__form.is-sending{opacity:.6;pointer-events:none}
  /* Ô đồng ý xuống dòng riêng. Vùng chạm là CẢ NHÃN chứ không riêng ô vuông — ô vuông
     16px không đạt ngưỡng, mà nhãn thì bấm đâu cũng tích được. */
  .vt-sub__consent{
    display:flex;
    flex-basis:100%;
    align-items:flex-start;
    gap:var(--vt-s-2);
    min-height:var(--vt-tap);
    padding-top:var(--vt-s-2);
    font-size:var(--vt-fs-small);
    line-height:var(--vt-lh-body);
    color:var(--vt-ink-2);
    cursor:pointer;
  }
  .vt-sub__consent input{
    width:var(--vt-s-4);
    height:var(--vt-s-4);
    flex-shrink:0;
    margin-top:var(--vt-s-1);
    accent-color:var(--vt-brand);
  }

  .vt-sub__msg{flex-basis:100%;font-size:var(--vt-fs-small);text-align:center}
  .vt-sub__msg:empty{display:none}
  .vt-sub__msg.is-bad{color:var(--vt-danger)}
  .vt-sub__msg.is-ok{color:var(--vt-brand-fg)}

  .vt-social{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--vt-s-3);
  }
  .vt-social__label{font-size:var(--vt-fs-small);color:var(--vt-ink-2)}
  /* Khe thị giác giữa hai logo = 2 × đệm trong = 16px, khớp 15px đo trên nvidia.com.
     Đệm gánh luôn vai trò vùng chạm ngang, nên list không cần gap. */
  .vt-social__list{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
  .vt-social__list a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:var(--vt-tap);
    padding-inline:var(--vt-s-2);
    color:var(--vt-ink);
    transition:color var(--vt-dur) var(--vt-ease);
  }
  .vt-social__list a:hover{color:var(--vt-brand-fg)}

  /* Hình TÔ ĐẶC, ngược với icon giao diện vốn là nét vẽ.
     Cao cố định, RỘNG TỰ TRÀN theo viewBox riêng của từng logo — ép vào ô vuông là
     chữ hẹp bơi giữa khoảng trống, khe giữa các icon trông so le. */
  .vt-social__list svg{
    height:var(--vt-icon-social);
    width:auto;
    fill:currentColor;
    stroke:none;
  }


  /* --- Khối dưới --- */
  /* Logo chân trang có chiều cao RIÊNG, không dùng --vt-logo-h của header. */
  .vt-flogo{display:flex;justify-content:center;margin-bottom:var(--vt-s-4)}
  .vt-flogo a{display:flex;align-items:center;text-decoration:none;color:inherit}
  .vt-flogo__text{font-size:var(--vt-fs-h4);font-weight:700;letter-spacing:-.01em}
  .vt-flogo img,
  .vt-flogo .custom-logo{
    height:var(--vt-flogo-h-m);
    width:auto;
    max-width:100%;
    object-fit:contain;
  }

  .vt-legal .vt-menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
  }
  .vt-legal li{display:flex;align-items:center}
  .vt-legal li + li::before{
    content:"|";
    margin-inline:var(--vt-s-2);
    color:var(--vt-line);
  }

  /* Hộp dòng 44px trên điện thoại để còn chạm được — hàng này xuống 2–3 dòng ở màn hẹp.
     Máy tính hạ về 24px đúng số đo nvidia.com; §8 đã miễn ngưỡng chạm cho liên kết chữ. */
  .vt-legal a{
    min-height:var(--vt-tap);
    font-size:var(--vt-fs-body);
    font-weight:400;
    color:var(--vt-ink-2);
    white-space:normal;
  }
  .vt-legal a:hover{color:var(--vt-brand-fg)}

  /* pre-line giữ ký tự xuống dòng người dùng gõ ở Customizer mà không cần chèn <br>,
     nên chuỗi vẫn đi qua esc_html() nguyên vẹn. Khoảng trắng thừa vẫn được gộp. */
  .vt-copy{
    margin-top:var(--vt-s-1);
    text-align:center;
    font-size:var(--vt-copy-fs);
    color:var(--vt-copy-color);
    white-space:pre-line;
  }


  /* --- DOCK NỔI. Cụm liên hệ + về đầu trang ở góc PHẢI, mọi trang mọi khổ màn; cụm
     mục lục ở góc TRÁI, chỉ dưới 1024px. Nút ở GÓC nên không cần padding-bottom. --- */
  .vt-dock{
    position:fixed;
    right:var(--vt-s-3);
    bottom:var(--vt-s-6);
    z-index:var(--vt-z-dock);
    display:flex;
    flex-direction:column;
    gap:var(--vt-s-2);
  }

  .vt-dock--toc{left:0;right:auto}

  .vt-dock__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--vt-tap);
    height:var(--vt-tap);
    border:1px solid currentColor;
    border-radius:var(--vt-r-full);
    background:var(--vt-surface);
    color:var(--vt-brand-fg);
  }

  /* Dính mép trái nên bỏ bo góc bên đó. Tô ACCENT — cụm phải đã là brand, hai cụm cùng
     màu ở hai góc đáy thì mắt đọc thành một nhóm. Token gốc như ba nút dưới đây. */
  .vt-dock--toc .vt-dock__btn{border-left:0;border-radius:0 var(--vt-r) var(--vt-r) 0;border-color:var(--vt-accent);background:var(--vt-accent);color:var(--vt-on-accent)}

  /* Ba nút liên hệ tô đặc: chúng là lời mời, không phải điều khiển phụ. */
  .vt-dock__btn--zalo,
  .vt-dock__btn--messenger,
  .vt-dock__btn--call{
    border-color:var(--vt-brand);
    background:var(--vt-brand);
    color:var(--vt-on-brand);
  }

  /* Rung ngắt quãng: 88% chu kỳ đứng yên. Rung liên tục thì người ta học cách lờ nó đi.
     Layer reset tự tắt khi máy bật "giảm chuyển động". */
  .vt-dock__btn--call{animation:vt-ring 3s var(--vt-ease) infinite}

  @keyframes vt-ring{
    0%,88%,100%{rotate:0deg}
    90%,94%{rotate:-12deg}
    92%,96%{rotate:12deg}
  }
  .vt-dock__btn svg{
    width:var(--vt-icon-lg);
    height:var(--vt-icon-lg);
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  /* Chevron vẽ hướng xuống; nút về đầu trang xoay ngược lại. */
  .vt-dock__btn[data-top] svg{rotate:180deg}

  /* --- Tấm mục lục: ghim đáy màn, cao đúng bằng nội dung ---
     display CHỈ đặt trong [open]: khai flex ở rule gốc là đè mất display:none của
     trình duyệt cho dialog đang đóng, tấm sẽ hiện thường trực. */
  .vt-sheet{
    position:fixed;
    inset:auto 0 0;
    width:100%;
    max-width:none;
    max-height:80dvh;
    margin:0;
    padding:0;
    border:0;
    border-top:3px solid var(--vt-brand-fg);
    border-radius:var(--vt-r-lg) var(--vt-r-lg) 0 0;
    background:var(--vt-surface);
    color:var(--vt-ink);
  }
  .vt-sheet[open]{display:flex;flex-direction:column}
  .vt-sheet::backdrop{background:rgb(0 0 0 / .55)}

  /* Hàng đầu không cuộn theo — con của flex dọc, phần cuộn là .vt-sheet__body. */
  .vt-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--vt-s-3);flex-shrink:0;padding:var(--vt-s-3) var(--vt-s-2) 0 var(--vt-s-5)}
  .vt-sheet__title{padding-top:var(--vt-s-3);font-size:var(--vt-fs-h4);font-weight:700;line-height:var(--vt-lh-h4)}
  .vt-sheet__x{display:inline-flex;flex-shrink:0;padding:var(--vt-s-3);color:var(--vt-ink-2)}
  .vt-sheet__x svg{width:var(--vt-icon-sm);height:var(--vt-icon-sm);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

  /* Đệm ngang nhỏ: .vt-toc__item a đã tự thụt 24px, cộng thêm đệm của tấm nữa là mục
     lùi gần nửa màn hình. */
  .vt-sheet__body{overflow-y:auto;overscroll-behavior:contain;padding:0 var(--vt-s-2) var(--vt-s-5)}

  @media (min-width:1024px){
    /* CHỈ cụm mục lục biến mất — máy tính đã có mục lục cột trái. Cụm liên hệ ở lại. */
    .vt-dock--toc{display:none}
  }
}


@layer utility{
  .vt-sr{
    position:absolute!important;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0;
  }
}


/* ===== BREAKPOINT

   Header: đúng MỘT mốc — 1024px. Máy tính bảng dùng chung bố cục điện thoại,
   không có cấp thứ ba. Bố cục điện thoại là mặc định; khối dưới đây là phần
   ghi đè cho máy tính.

   Nội dung: 640 · 1024 · 1280 cho lưới thẻ. */

@media (min-width:1024px){

  .vt-header__in{
    display:flex;
    gap:var(--vt-s-5);
    min-height:var(--vt-header-h);
  }
  .vt-iconbtn svg{width:var(--vt-icon);height:var(--vt-icon)}
  .vt-header__in > .vt-nav{display:block}
  .vt-brand img,
  .vt-brand .custom-logo{height:var(--vt-logo-h)}
  .vt-burger{display:none}

  .vt-nav--primary{margin-inline-start:var(--vt-s-3)}

  /* Đẩy cụm phải sát mép. Có menu phụ thì nó nhận margin auto; không có thì
     nút tìm nhận. THỨ TỰ BA RULE NÀY KHÔNG ĐƯỢC ĐỔI — rule ba phải đứng sau
     rule một mới thắng được nó. */
  .vt-header__in > .vt-toggle--search{margin-inline-start:auto}
  .vt-header__in > .vt-nav--secondary{margin-inline-start:auto}
  .vt-header__in > .vt-nav--secondary ~ .vt-toggle--search{margin-inline-start:0}

  /* Trả lại đệm: lấn mép chỉ đúng cho bố cục điện thoại. */
  .vt-header__in > .vt-toggle--search{margin-inline-end:0}

  .vt-drawer{display:none!important}

  /* Chân trang: mỗi menu một cột (3–4, tự đếm), căn trái, liên kết xếp dọc. */
  .vt-footer__cols{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--vt-s-6)}
  .vt-fcol__title{text-align:left}
  .vt-fcol__nav .vt-menu{display:grid;gap:0}

  .vt-footer__row{
    grid-template-columns:1fr auto;
    align-items:center;
    justify-items:start;
    text-align:left;
  }
  .vt-sub{flex-direction:row}
  .vt-social{flex-direction:row;justify-self:end}

  .vt-flogo{justify-content:flex-start}
  .vt-flogo img,
  .vt-flogo .custom-logo{height:var(--vt-flogo-h)}
  .vt-legal .vt-menu{justify-content:flex-start}
  .vt-legal a{min-height:var(--vt-s-5)}
  .vt-copy{text-align:left}
}

@media (min-width:640px) and (max-width:1023px){
  .vt-footer__cols{grid-template-columns:repeat(2,1fr)}
}