/* ============================================================
   CSS TRANG CHỦ — chỉ nạp ở front-page.
   Điều kiện nạp ở src/Assets.php::needsHome().

   Bọc @layer components để nối vào layer đã khai trong main.css.
   Rule nhắm thẻ trần nằm ở khối cuối file, ngoài mọi layer (§2.3).
   ============================================================ */

@layer components{

  /* ============================================================
     KHỐI 1 — HERO CAROUSEL
     Cuộn bằng scroll-snap của trình duyệt. Vuốt trên điện thoại và lăn ngang
     trên máy tính chạy sẵn; hàng nút ở đáy chỉ là tăng cường.
     ============================================================ */
  .vt-hero{position:relative;overflow:hidden}

  .vt-hero__track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .vt-hero__track::-webkit-scrollbar{display:none}

  .vt-hero__slide{
    position:relative;
    flex:0 0 100%;
    scroll-snap-align:center;
    display:flex;
    align-items:center;
    min-height:clamp(420px,58vh,640px);
    isolation:isolate;
  }

  .vt-hero__bg{
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Lớp phủ dốc từ trái: ảnh hero sáng tối tuỳ tấm, không có lớp này thì chữ
     trắng trên ảnh sáng không đọc được. */
  .vt-hero__slide::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--vt-surface) 92%,transparent) 0%,
      color-mix(in srgb,var(--vt-surface) 60%,transparent) 45%,
      transparent 85%);
  }

  .vt-hero__in{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--vt-s-4);
    padding-block:var(--vt-s-8);
  }

  .vt-hero__title{
    max-width:var(--vt-content);
    font-size:var(--vt-fs-hero);
    font-weight:700;
    line-height:var(--vt-lh-hero);
    letter-spacing:var(--vt-ls-hero);
    text-wrap:pretty;
  }
  .vt-hero__title a{color:inherit;text-decoration:none}

  .vt-hero__deck{
    max-width:var(--vt-content);
    font-size:var(--vt-fs-lead);
    line-height:var(--vt-lh-lead);
    color:var(--vt-ink-2);
    white-space:pre-line;
  }

  /* --- Hàng nút chuyển: vừa là bộ chuyển vừa là mục lục ---
     ĐIỆN THOẠI chỉ còn vạch phân đoạn như nvidia.com: hai nhãn chữ tràn khỏi màn 390px,
     mà cuộn ngang một BỘ CHUYỂN thì không ai đoán ra là cuộn được. */
  .vt-hero__pager{display:flex;gap:var(--vt-s-2)}
  .vt-hero__pager > *{flex:1 1 0}
  .vt-hero__tag,
  .vt-hero__name{display:none}

  .vt-hero__tab{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--vt-s-2);
    width:100%;
    min-height:var(--vt-tap);
    border-top:3px solid var(--vt-line);
    text-align:left;
    color:var(--vt-ink-2);
    transition:color var(--vt-dur) var(--vt-ease);
  }
  .vt-hero__tab:hover{color:var(--vt-ink)}
  .vt-hero__tab[aria-current]{color:var(--vt-ink)}

  /* Vạch chạy trái→phải đúng bằng thời lượng chờ, kiểu nvidia.com. Transition chỉ khai
     ở nhánh ĐANG hiện nên rời slide là về 0 tức thì; tắt tự chuyển thì --vt-hero-dur
     rỗng, vạch lên đầy ngay. */
  .vt-hero__tab::before{content:"";position:absolute;top:-3px;left:0;width:0;height:3px;background:var(--vt-brand-fg)}
  .vt-hero__tab[aria-current]::before{width:100%;transition:width var(--vt-hero-dur,0ms) linear}

  .vt-hero__tag{
    font-size:calc(var(--vt-fs-eyebrow) - 1px);
    font-weight:var(--vt-fw-eyebrow);
    line-height:var(--vt-lh-eyebrow);
    letter-spacing:var(--vt-ls-eyebrow);
    text-transform:uppercase;
    color:var(--vt-ink-2);
  }
  .vt-hero__name{
    font-size:var(--vt-fs-small);
    font-weight:600;
    line-height:var(--vt-lh-body);
  }

  /* ============================================================
     KỆ CUỘN NGANG — dùng ở khối sản phẩm và khối tin
     ============================================================ */
  .vt-shelf__head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--vt-s-4);
  }
  .vt-shelf__head .vt-block__title{margin-bottom:0}

  .vt-shelf__nav{display:flex;gap:var(--vt-s-2)}
  .vt-shelf__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--vt-tap);
    height:var(--vt-tap);
    border-radius:var(--vt-r);
    background:var(--vt-btn-bg);
    color:var(--vt-btn-fg);
    transition:opacity var(--vt-dur) var(--vt-ease);
  }
  .vt-shelf__btn:hover{opacity:.88}
  .vt-shelf__btn:disabled{opacity:.3;pointer-events:none}
  .vt-shelf__btn svg{
    width:var(--vt-icon);
    height:var(--vt-icon);
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .vt-shelf__btn[data-shelf="prev"] svg{rotate:90deg}
  .vt-shelf__btn[data-shelf="next"] svg{rotate:-90deg}

  .vt-shelf__body{margin-top:var(--vt-s-6)}

  .vt-shelf__track{
    display:flex;
    gap:var(--vt-s-6);
    overflow-x:auto;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;

  }
  .vt-shelf__track::-webkit-scrollbar{display:none}

  .vt-shelf__item{
    flex:0 0 78%;
    scroll-snap-align:start;
    display:flex;
  }
  .vt-shelf__item > *{width:100%}

  .vt-shelf__intro{
    margin-bottom:var(--vt-s-6);
    max-width:var(--vt-content);
    font-size:var(--vt-fs-body);
    line-height:var(--vt-lh-body);
    color:var(--vt-ink-2);
  }
  .vt-shelf__intro .vt-viewall{margin-top:var(--vt-s-3)}

  /* Kệ tràn ra khỏi khung nội dung nên phần thừa phải bị cắt ở mép màn hình.
     `clip` chứ không `hidden`: `hidden` biến section thành khung cuộn, và lúc đó
     mọi phần tử dính bên trong nó mất tác dụng. */
  .vt-bleed{overflow-x:clip}

  /* ============================================================
     KHỐI 3 — TÔN CHỈ LÀM VIỆC
     ============================================================ */
  .vt-creed{position:relative;overflow:hidden}
  .vt-creed__in{padding-block:var(--vt-section)}
  .vt-creed__text{max-width:var(--vt-content)}
  .vt-creed__body{
    margin-block:var(--vt-s-4);
    font-size:var(--vt-fs-lead);
    line-height:var(--vt-lh-lead);
    color:var(--vt-ink-2);
    white-space:pre-line;
  }

  /* Điện thoại/tablet: ảnh KHÔNG ẩn — xuống dưới nội dung, khung 16/9 thường, không cắt
     chéo. Dáng cắt chéo tràn nửa màn hình chỉ hợp lý khi có đủ bề ngang, xem @media 1024. */
  .vt-creed__media{margin-top:var(--vt-s-6);aspect-ratio:var(--vt-ratio-hero)}
  .vt-creed__img{width:100%;height:100%;object-fit:cover}

  /* ============================================================
     BREAKPOINT — 640 · 1024
     ============================================================ */
  @media (min-width:640px){
    .vt-shelf__item{flex-basis:46%}

    /* Trả nhãn chữ về: hàng nhãn cho người đọc thấy ngay còn gì phía sau và chọn
       thẳng cái mình cần, thứ mà dãy vạch không làm được. */
    .vt-hero__pager{gap:var(--vt-s-5)}
    .vt-hero__pager > *{flex:1 1 0}
    .vt-hero__tab{min-height:0;padding-top:var(--vt-s-3);border-top-width:2px}
    .vt-hero__tab::before{top:-2px;height:2px}
    .vt-hero__tag,.vt-hero__name{display:block}
  }

  @media (min-width:1024px){
    .vt-shelf__item{flex-basis:calc((100% - var(--vt-s-6) * 3) / 3.4)}

    /* Khối tin: đoạn dẫn bên trái, kệ bên phải. */
    .vt-shelf--split .vt-shelf__body{
      display:grid;
      grid-template-columns:minmax(0,var(--vt-aside)) minmax(0,1fr);
      gap:var(--vt-s-7);
      align-items:start;
    }
    .vt-shelf--split .vt-shelf__intro{margin-bottom:0}

    /* Dải tôn chỉ: ảnh chiếm nửa phải, cắt chéo với vạch nhấn màu thương hiệu —
       phần trăm chứ không px nên mọi khổ màn hình đều giữ đúng độ nghiêng. */
    .vt-creed__media{
      position:absolute;
      inset-block:0;
      right:0;
      width:46%;
      margin-top:0;
      aspect-ratio:auto;
      border-radius:0;
      clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
    }
    .vt-creed__media::before{
      content:"";
      position:absolute;
      inset-block:0;
      left:0;
      width:100%;
      background:var(--vt-brand-fg);
      clip-path:polygon(18% 0,19.2% 0,1.2% 100%,0 100%);
    }
    .vt-creed__in{max-width:calc(var(--vt-shell) + var(--vt-gutter) * 2)}
    .vt-creed__text{max-width:48%}
  }
}

/* ============================================================
   NGOÀI MỌI @layer — BẮT BUỘC, ĐỪNG GOM VÀO LAYER
   ============================================================
   Nhắm vào thẻ trần (ol, ul, li). WordPress khai `ol,ul{…}` không-layer nên nó
   thắng mọi rule có layer bất kể độ cụ thể. Xem DESIGN.md §16.
   ============================================================ */
.vt-hero__pager,
.vt-shelf__track{list-style:none;margin:0;padding-inline:0}
.vt-hero__pager > li,
.vt-shelf__item{margin:0}

/* Đệm cũng phải khai ở ngoài: WordPress dùng `padding` dạng viết tắt cho ol/ul,
   nó đè luôn cả padding-block nếu mình chỉ khai trong layer. */
/* Điện thoại không cần đệm đáy: phần trống dưới vạch chính là vùng chạm 44px. */
.vt-hero__pager{padding:0}

@media (min-width:640px){
  .vt-hero__pager{padding:0 0 var(--vt-s-6)}
}
.vt-shelf__track{padding:var(--vt-s-1) 0}

/* Từ 1024px kệ chạy tràn sang mép phải màn hình, đúng như mẫu — thẻ bị cắt ở mép
   là tín hiệu "còn nữa", rõ hơn mọi mũi tên.

   Khoảng cần lấn = khoảng trống từ mép khung nội dung ra mép màn hình. Tính bằng
   max() thay vì 100%: kệ tin nằm trong một cột lưới nên `100%` của nó KHÔNG phải
   bề ngang khung, dùng 100% sẽ lấn thiếu.

   margin và padding phải khai ở khối ngoài layer này vì chính nó đã khai margin:0
   và padding cho hai danh sách ở trên. */
@media (min-width:1024px){
  .vt-shelf__track{
    margin:0 calc(-1 * max(var(--vt-gutter),(100vw - var(--vt-wide)) / 2)) 0 0;
    padding:var(--vt-s-1) var(--vt-gutter) var(--vt-s-1) 0;
  }
}