/*
Theme Name: gm
Description: This is a child theme for gm
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* ==========================================================
   RESPONSIVE CSS – B52CLUB & OKVIPTOP
   Dán vào: WordPress > Appearance > Customize > Additional CSS
   Áp dụng cho: chicken-marys.com  +  okviptop.com
   ========================================================== */

/* ── 1. STATS BAR ──────────────────────────────────────────
   5 items nằm ngang → 2×3 grid trên mobile
   Selector khớp với flex stats bar ở cả 2 site              */
@media (max-width: 767px) {
  /* Stats bar wrapper */
  [style*="justify-content:center;flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="justify-content:center;flex-wrap:wrap"] > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    padding: 10px 12px !important;
  }
  [style*="justify-content:center;flex-wrap:wrap"] > div:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .07) !important;
  }
}


/* ── 2. HERO PADDING ────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero sections (padding lớn > 60px) */
  [style*="padding:clamp(40px,7vw"],
  [style*="padding:clamp(36px,6vw"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}


/* ── 3. HERO CTA BUTTONS: stack dọc trên phone nhỏ ────────*/
@media (max-width: 480px) {
  [style*="gap:12px;justify-content:center;flex-wrap:wrap"] > a,
  [style*="gap:12px;justify-content:center;flex-wrap:wrap"] > span {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── 4. CTA BLOCKS: giảm padding ───────────────────────── */
@media (max-width: 767px) {
  [style*="padding:clamp(28px,5vw"],
  [style*="padding:clamp(26px,4"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}


/* ── 5. APP BLOCK WATERMARK: ẩn trên mobile ─────────────  */
@media (max-width: 767px) {
  [style*="font-size:110px;opacity:.05"] {
    display: none !important;
  }
}


/* ── 6. BẢNG SO SÁNH / GIAO DỊCH: scroll ngang ──────────
   Các bảng có cột px cứng (grid 5-col, 4-col với px)        */
@media (max-width: 767px) {
  /* Bảng điều khoản B52Club – 4 cột với px cứng */
  [style*="grid-template-columns:180px"],
  [style*="grid-template-columns:200px"],
  /* Bảng so sánh game 5 cột */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr 2fr"] {
    min-width: 580px;
  }
  /* Wrapper cha cần overflow scroll – add qua JS hoặc thêm wrapper thủ công */
}


/* ── 7. FONT SIZE TỐI THIỂU TRÊN PHONE NHỎ ─────────────  */
@media (max-width: 380px) {
  /* Tránh text quá nhỏ trên màn iPhone SE cũ */
  [style*="font-size:12px"],
  [style*="font-size:11px"],
  [style*="font-size:11.5px"] {
    font-size: 12px !important;
  }
}


/* ── 8. DETAILS/SUMMARY (FAQ accordion) ────────────────── */
@media (max-width: 767px) {
  details > summary {
    padding: 14px 16px !important;
    font-size: 13.5px !important;
  }
  details > div {
    padding: 0 16px 14px !important;
  }
}


/* ── 9. IMAGE/WATERMARK ✈ ẩn trên mobile ────────────────  */
@media (max-width: 767px) {
  [style*="position:absolute"][style*="opacity:.05"] {
    display: none !important;
  }
}


/* ── GHI CHÚ ─────────────────────────────────────────────
   Phần lớn responsive đã được xử lý INLINE qua:
   - grid-template-columns: repeat(auto-fit, minmax(Xpx, 1fr))
     → tự wrap khi màn < X*2 px (không cần media query)
   - padding: clamp(min, fluid, max)
     → co giãn smooth theo viewport width
   
   File CSS này chỉ bổ sung những thứ KHÔNG làm được bằng inline:
   - Stats bar flex → grid
   - CTA buttons stack
   - Bảng cuộn ngang
   - FAQ accordion
   - Ẩn watermark/decorations
   ========================================================= */