/* ══════════════════════════════════════════════════════════════════
   SỰ KIỆN & KẾT NỐI CUNG ỨNG — /su-kien-ket-noi-cung-ung
   ------------------------------------------------------------------
   Giao diện viết bằng utility Tailwind trong markup (biên dịch ở sk.min.css, nguồn sk.src.css).
   File này viết tay, chỉ giữ những gì utility không làm được:
     1) token phạm vi trang (font Inter, màu thanh footer cố định),
     2) vá cascade của theme vne-v3 — luật KHÔNG nằm trong @layer luôn thắng utility,
     3) khung 1200px + icon nét dùng lặp lại (đặt trong @layer components để utility vẫn ghi đè được).
   ══════════════════════════════════════════════════════════════════ */

/* Header dính cao 82px: bấm mục nav thì tiêu đề section không bị che.
   Trang mẫu cắt tràn ngang ở CẢ html lẫn body (overflow-x: clip): thiếu html thì phần tràn vẫn nằm trong vùng cuộn của viewport. */
html { scroll-behavior: smooth; scroll-padding-top: 105px; overflow-x: hidden; overflow-x: clip; }

body.sk-page {
    /* Menu/footer dùng chung cũng chạy Inter như bản thiết kế. */
    --font-display: "Inter", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;
    /* Thanh footer cố định (_FooterTailwind, bg-brand-900) lấy đúng màu của bản thiết kế. */
    --brand-900: #172e3b;
    /* `hidden` là phương án dự phòng cho trình duyệt chưa hiểu `clip` (giống trang mẫu); trình duyệt mới lấy dòng `clip` bên dưới. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* base.css khai `.vne-v3 a { color: inherit; text-decoration: none }` NGOÀI @layer nên mọi utility
   màu chữ / gạch chân đặt trên thẻ <a> đều mất tác dụng. revert-layer trả quyền quyết định về lớp utilities. */
body.sk-page a { color: revert-layer; text-decoration: revert-layer; }

/* Cùng lý do: `.vne-v3 img { max-width: 100% }` khoá ảnh cần tràn khung (ảnh thiết bị trong thẻ giá trị). */
body.sk-page img.sk-img-overflow { max-width: none; }

/* Vòng focus bàn phím giống trang mẫu: viền cam 3px, cách phần tử 5px (theme vne-v3 đã reset mất outline). */
body.sk-page :focus-visible { outline: 3px solid #f58a24; outline-offset: 5px; }
body.sk-page [data-sk-hero-toggle]:focus-visible { outline-color: #ffac60; }

/* Trang mẫu đặt sẵn cursor:pointer cho <button> (preflight Tailwind v4 để mặc định là cursor:default)
   và touch-action:manipulation cho a / button / summary để bỏ độ trễ chạm đúp trên điện thoại. */
#sk-root button { cursor: pointer; }
#sk-root :is(a, button, summary) { touch-action: manipulation; }

/* Vệt chạm trên điện thoại: trang mẫu dùng mặc định của trình duyệt (rgba(0,0,0,.18)), còn preflight của theme đặt transparent. */
#sk-root { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); }

/* Thanh trượt ngang trên điện thoại: ẩn thanh cuộn nhưng vẫn vuốt được. */
.sk-rail { scrollbar-width: none; }
.sk-rail::-webkit-scrollbar { display: none; }

/* <summary> của FAQ / hộp mở rộng: bỏ dấu tam giác mặc định của trình duyệt. */
.sk-summary { list-style: none; }
.sk-summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    #sk-root * , #sk-root *::before, #sk-root *::after { transition: none !important; animation: none !important; }
}

@layer components {
    /* Khung nội dung 1200px; lề hai bên 48px → 32px → 22px → 20px → 16px theo bề ngang màn hình. */
    .sk-wrap { width: calc(100% - 96px); max-width: 1200px; margin-inline: auto; }

    @media (max-width: 1150px) { .sk-wrap { width: calc(100% - 64px); } }
    @media (max-width: 760px)  { .sk-wrap { width: calc(100% - 44px); } }
    @media (max-width: 520px)  { .sk-wrap { width: calc(100% - 40px); } }
    @media (max-width: 360px)  { .sk-wrap { width: calc(100% - 32px); } }

    /* Icon nét lấy từ _Sprite.cshtml; cỡ riêng từng chỗ đặt bằng utility size-[…].
       display:inline (thay vì block của preflight) để icon nằm trên dòng chữ như bản thiết kế;
       utility `block` / `hidden` vẫn ghi đè được vì nằm ở lớp utilities. */
    .sk-icon {
        display: inline;
        vertical-align: baseline;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}