@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);

  /* --- 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-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: bốn tầng. 1320px đo trên nvidia.com. --- */
  --vt-shell:1320px;
  --vt-wide:1320px;
  --vt-content:760px;
  --vt-narrow:560px;
  --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;

  /* --- 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-menu-w:220px;      /* bề ngang tối thiểu của menu con */

  /* --- 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: bốn tỉ lệ, không tuỳ tiện --- */
  --vt-ratio-share:1200/630;
  --vt-ratio-card:4/3;
  --vt-ratio-product:1/1;
  --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;

  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-brand-fg:var(--vt-brand-hi);
  --vt-accent-fg:color-mix(in oklab,var(--vt-accent) 70%,#fff);
  --vt-btn-bg:var(--vt-brand-hi);
  --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-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;
}


@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}
  button{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-lo)}

  :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--content{max-width:calc(var(--vt-content) + 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}


  /* --- 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);
    height:var(--vt-icon);
    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)}


  /* Menu con trên máy tính. Mega menu tràn ngang vào ở đợt B2. */
  .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);
  }


  /* ============================================================
     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--ghost{
    background:transparent;
    color:var(--vt-ink);
    border:1px solid var(--vt-line);
  }
  .vt-btn--ghost:hover{color:var(--vt-ink);border-color:var(--vt-ink-2)}

  .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)}
  .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-fg);
  }

  .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}
  .vt-page-sub{margin-top:var(--vt-s-3);color:var(--vt-ink-2)}


  /* --- Danh sách tạm (thay bằng lưới thẻ thật ở giai đoạn C) --- */
  .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-brand-fg);
    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-7);
    margin-top:var(--vt-s-8);
    justify-items:center;
    text-align:center;
  }

  .vt-sub{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--vt-s-4);
  }
  .vt-sub__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--vt-tap);
    height:var(--vt-tap);
    border:2px solid var(--vt-brand-fg);
    color:var(--vt-brand-fg);
  }
  .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)}

  .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)}
  .vt-social__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--vt-s-2)}
  .vt-social__list a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--vt-tap);
    height:var(--vt-tap);
    color:var(--vt-ink);
    transition:color var(--vt-dur) var(--vt-ease);
  }
  .vt-social__list a:hover{color:var(--vt-brand-fg)}

  /* Logo mạng xã hội là hình TÔ ĐẶC, ngược với icon giao diện vốn là nét vẽ. */
  .vt-social__list svg{
    width:var(--vt-icon);
    height:var(--vt-icon);
    fill:currentColor;
    stroke:none;
  }


  /* --- Khối dưới --- */
  .vt-flogo{display:flex;justify-content:center;margin-bottom:var(--vt-s-4)}
  .vt-flogo a{text-decoration:none;color:inherit;font-weight:700}
  .vt-flogo img{height:var(--vt-logo-h);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-3);
    color:var(--vt-line);
  }
  .vt-legal a{
    min-height:var(--vt-tap);
    font-size:var(--vt-fs-small);
    font-weight:400;
    color:var(--vt-ink-2);
    white-space:normal;
  }
  .vt-legal a:hover{color:var(--vt-brand-fg)}

  .vt-copy{
    margin-top:var(--vt-s-2);
    text-align:center;
    font-size:var(--vt-fs-small);
    color:var(--vt-ink-2);
  }
}


@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;
  }
  .vt-hide{display:none!important}
}


/* ============================================================
   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-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}

  .vt-drawer{display:none!important}

  /* Chân trang: ba cột, mọi thứ về căn trái, liên kết xếp dọc lại. */
  .vt-footer__cols{grid-template-columns:repeat(3,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-legal .vt-menu{justify-content:flex-start}
  .vt-copy{text-align:left}
}

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