/* ==========================================================================
   pikastore.com.vn — assets/css/responsive.css
   LỚP CHUẨN HOÁ ĐA THIẾT BỊ (nạp SAU style.css và pages.css)

   Mục tiêu: giao diện web hiển thị đúng trên MỌI khung nhìn — điện thoại nhỏ
   320px, điện thoại thường, máy tính bảng, laptop, màn hình lớn và cả khi
   điện thoại quay ngang.

   Các lỗi đã đo được trước khi có tệp này (Chrome, 8 khung nhìn, 15 trang):
     1. Khung 320–360px: khối .top-act tràn tới 364px, nút menu (.burger) bị
        đẩy ra ngoài màn hình -> khách KHÔNG bấm được menu.
     2. Trang hỗ trợ: biểu mẫu 2 cột cố định làm trang tràn ngang tới +166px
        ở 320px và vẫn còn tràn ở 430px.
     3. Trang chủ ở 1280px: cột bên (.col-side 280px) bị đẩy ra ngoài do
        lưới 4 cột bên trong không cho phép co lại (thiếu minmax(0,1fr)).
     4. Nhiều nhãn chữ chỉ 8.5–10.5px, nhỏ hơn mức đọc được trên điện thoại.
     5. Nhiều vùng bấm cao 16–34px, nhỏ hơn mức ngón tay bấm chính xác (>=40px).
   ========================================================================== */

/* ---------------------------------------------------------------- NỀN TẢNG */
html {
  /* Chặn Safari/iOS tự phóng chữ khi quay ngang màn hình */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Không để bất kỳ nội dung nào rộng hơn màn hình */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}

/* Từ khoá dài, mã đơn, email... xuống dòng thay vì làm tràn trang */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, .crumb, code {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Ô nhập không bao giờ rộng hơn khung chứa */
input, select, textarea, button {
  max-width: 100%;
}
textarea { resize: vertical; }

/* Chiều cao header thật, do JS cập nhật — thanh menu dính theo đúng vị trí */
:root { --top-h: 65px; }

/* ------------------------------------------------- CHO PHÉP LƯỚI CO LẠI
   Nguyên nhân gốc của tràn ngang ở 1280px: ô lưới "1fr" mặc định có
   min-width:auto, nên nội dung bên trong (thẻ sản phẩm) đẩy cả lưới rộng ra.
   minmax(0,1fr) cho phép ô co lại đúng bằng khung chứa.                     */
.lay { grid-template-columns: minmax(0, 1fr) 280px; }
.col-main, .col-side, .card, .c-info, .widget, .pkg, .news-card, .news-body { min-width: 0; }

.grid     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cats     { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.news-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot-grid{ grid-template-columns: 1.9fr minmax(0,1fr) minmax(0,1fr) 1.4fr 1.05fr; }
.det      { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }

/* --------------------------------------------- HEADER KHÔNG BAO GIỜ TRÀN
   Logo được phép co và cắt bớt bằng dấu "…"; nhóm nút bên phải (gồm nút
   menu) luôn giữ nguyên kích thước nên không bị đẩy ra ngoài màn hình.      */
.top-in { flex-wrap: nowrap; }
.logo { min-width: 0; flex: 1 1 auto; }
.logo-txt { min-width: 0; }
.logo-txt b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo-mark { flex: none; }
.top-act { flex: 0 0 auto; }

/* Thanh menu dính ngay dưới header theo chiều cao thật của header */
.nav { top: var(--top-h); }

/* ------------------------------------------------------- BẢNG DỮ LIỆU
   Bảng có nhiều cột (quản trị doanh thu) được cuộn ngang trong khung riêng,
   thay vì làm cả trang tràn ngang.                                          */
.bang-cuon {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.bang-cuon > table { min-width: 560px; }

/* --------------------------------------------- BIỂU MẪU 2 CỘT TỰ XẾP LẠI
   Dùng thay cho grid-template-columns:1fr 1fr cố định: tự xuống 1 cột khi
   không còn đủ 240px cho mỗi cột.                                           */
.form-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
/* Hộp chứa biểu mẫu: lề trong co lại theo màn hình */
.form-hop { padding: clamp(18px, 4vw, 32px); }

/* ------------------------------------------------------ HỘP CHAT NỔI */
.chat-box { width: min(350px, calc(100vw - 32px)); }

/* ==========================================================================
   BẢNG MENU TRƯỢT CHO ĐIỆN THOẠI
   Trước đây nút .burger có trên trang nhưng không có mã xử lý nào; phần này
   cùng với assets/js/responsive.js làm nút đó hoạt động.
   ========================================================================== */
.menu-phu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: .28s;
  z-index: 998;
}
.menu-phu.hien { opacity: 1; visibility: visible; }

.menu-truot {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 86vw);
  height: 100%;
  background: #0A0A10;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px rgba(0, 0, 0, .7);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menu-truot.hien { transform: translateX(0); }

.menu-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.menu-dau b {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.menu-dong {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  color: var(--txt-dim);
}
.menu-dong:hover { color: var(--gold); border-color: var(--line); }

.menu-ds { display: flex; flex-direction: column; padding: 10px 12px 26px; }
.menu-ds a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: #D9D3C6;
}
.menu-ds a:hover { background: rgba(255, 255, 255, .05); color: var(--gold-soft); }
.menu-ds a.on { color: var(--gold); background: rgba(255, 194, 36, .09); }

/* Trên màn hình rộng không bao giờ hiện bảng menu trượt */
@media (min-width: 769px) {
  .menu-phu, .menu-truot { display: none; }
}

/* ==========================================================================
   MÀN HÌNH LỚN (>= 1700px): mở rộng khung để không bị hẹp giữa màn hình
   ========================================================================== */
@media (min-width: 1700px) {
  .shell { width: min(1560px, calc(100% - 48px)); }
  .grid  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   LAPTOP NHỎ / MÁY TÍNH BẢNG NGANG (<= 1280px)
   ========================================================================== */
@media (max-width: 1280px) {
  .lay { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 1100px) {
  /* Dưới mức này cột bên không còn đủ chỗ -> xếp xuống dưới nội dung chính */
  .lay { grid-template-columns: minmax(0, 1fr); }
  .col-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
  .col-side .widget { margin-bottom: 0; }
}

/* ==========================================================================
   MÁY TÍNH BẢNG DỌC (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Thanh menu không dính nữa: tránh chiếm hai tầng chiều cao màn hình nhỏ */
  .nav { position: static; top: auto; }

  .hero-grid { padding: 24px 20px; }
  .p-hero-in { padding: 26px 20px; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Chữ nhỏ dưới 11px rất khó đọc trên điện thoại -> nâng lên mức đọc được */
  .logo-txt span { font-size: 10px; letter-spacing: 1.2px; }
  .c-tag, .news-cat { font-size: 11.5px; }
  .trend-up, .c-meta, .plat-item { font-size: 11.5px; }

  /* Vùng bấm đủ lớn cho ngón tay (tối thiểu 40px chiều cao) */
  .bell, .burger { width: 42px; height: 42px; }
  .btn-sm { padding: 11px 16px; font-size: 13px; }
  .chip { padding: 11px 16px; }
  .mini, .head-link { min-height: 40px; align-items: center; }
  .f-link a, .f-bot-links a { min-height: 38px; }
  .nav a { padding: 15px 16px; }
  .trend-item { padding: 11px 12px; }

  .bang-cuon > table { min-width: 620px; }
}

/* ==========================================================================
   ĐIỆN THOẠI (<= 520px)
   ========================================================================== */
@media (max-width: 520px) {
  .shell { width: calc(100% - 22px); }

  /* 16px là ngưỡng iOS/Safari KHÔNG tự phóng to trang khi gõ vào ô nhập */
  input, select, textarea { font-size: 16px; }

  .hero-grid { padding: 20px 16px; }
  .p-hero-in { padding: 22px 16px; }
  .section { padding: 22px 0; }

  .cats  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .socials { grid-template-columns: minmax(0, 1fr); }

  .mega-foot { padding: 46px 0 18px; }
  .f-pay-bar { flex-wrap: wrap; }

  .fab-chat { bottom: 16px; right: 16px; gap: 12px; }
  .fab-btn { width: 56px; height: 56px; }
  .fab-btn svg { width: 28px; height: 28px; }
  .chat-body { height: 46vh; }

  /* Nút trải rộng hết bề ngang cho dễ bấm, không bị cắt chữ */
  .hero-cta .btn, .auth-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   ĐIỆN THOẠI NHỎ (<= 400px) — iPhone SE, Android phổ thông
   Đây là nhóm từng bị mất nút menu do header tràn.
   ========================================================================== */
@media (max-width: 400px) {
  .top-in { gap: 8px; }
  .logo { gap: 8px; }
  .logo-mark { width: 34px; height: 34px; border-radius: 10px; }
  .logo-mark svg { width: 20px; height: 20px; }
  .logo-mark::after { inset: -4px; border-radius: 12px; }
  .logo-txt b { font-size: 14.5px; letter-spacing: 0; }
  .top-act { gap: 7px; }
  .top-act .btn-sm { padding: 9px 11px; font-size: 11.5px; }
  .bell { width: 38px; height: 38px; }
  .burger { width: 38px; height: 38px; }

  .kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ĐIỆN THOẠI RẤT NHỎ (<= 340px)
   Ở mức này giữ nút menu là ưu tiên cao nhất: bỏ chuông thông báo và rút
   gọn nút "Đăng ký" để nhóm nút bên phải luôn nằm trong màn hình.
   ========================================================================== */
@media (max-width: 340px) {
  .bell { display: none; }
  .logo-txt b { font-size: 13px; }
  .top-act .btn-sm { padding: 8px 9px; font-size: 11px; }
}

/* ==========================================================================
   ĐIỆN THOẠI QUAY NGANG (màn hình thấp)
   Header + menu dính sẽ ăn gần hết chiều cao -> cho cuộn bình thường.
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .top { position: static; }
  .nav { position: static; top: auto; }
  .stage { display: none; }
  .chat-body { height: 40vh; }
}

/* ==========================================================================
   THIẾT BỊ CẢM ỨNG: bỏ hiệu ứng hover gây "dính" trạng thái sau khi chạm
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .card:hover, .cat:hover, .pkg:hover, .stat:hover, .news-card:hover,
  .btn-gold:hover, .btn-ghost:hover, .info:hover {
    transform: none;
  }
}

/* ==========================================================================
   NGƯỜI DÙNG CHỌN GIẢM CHUYỂN ĐỘNG (hệ điều hành bật "Reduce Motion")
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   BẢN IN / XUẤT PDF (hợp đồng, hoá đơn, trang pháp lý)
   ========================================================================== */
@media print {
  .bg5d, #spark, .fab-chat, .nav, .burger, .bell, .search { display: none !important; }
  .top { position: static; }
  body { background: #fff; color: #111; }
  .glass, .widget, .card { box-shadow: none; border-color: #ccc; }
  a { color: #111; text-decoration: underline; }
}

/* ==========================================================================
   LƯỚI CO GIÃN THEO TỪNG LOẠI THIẾT BỊ
   Khối này BẮT BUỘC nằm cuối tệp: các khai báo lưới ở đầu tệp không kèm media
   query đã ghi đè mất quy tắc mobile của style.css / pages.css, khiến thẻ App
   chỉ còn ~80px trên điện thoại và làm cả trang tràn ngang.
   ========================================================================== */
@media (max-width: 1280px) {
  .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1.7fr minmax(0, 1fr) minmax(0, 1fr) 1.3fr; }
}
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .det { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .packages { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Không để nội dung bên trong thẻ đẩy thẻ rộng ra ngoài khung */
.card, .c-info, .c-tit, .c-desc, .pkg, .pkg li, .news-card { min-width: 0; }
.c-tit, .c-desc, .pkg li, .news-tit { overflow-wrap: anywhere; }

/* Lưới an toàn cuối cùng: cắt phần tràn ngang còn sót mà không phá position:sticky */
html, body { overflow-x: clip; }