/* ================================================================
   CLAIRE — MOBILE OPTIMISATION
   Applies to all pages. Loaded last so it overrides everything.
   Breakpoints: 899px (tablet), 599px (mobile), 374px (small phone)
   ================================================================ */

/* ── GLOBAL RESET ── */
/* Dùng overflow-x:clip thay vì hidden — hidden buộc overflow-y thành "auto"
   theo CSS Overflow spec, biến html/body thành scroll container mới và phá
   position:sticky của S2/S3 trên index (sticky scroll-hijack). clip chặn
   tràn ngang mà KHÔNG tạo scroll container mới. */
html, body {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
/* body.home.ready sets overflow:auto — giữ lại overflow-x:clip */
body.home.ready {
  overflow-x: clip !important;
}
* { box-sizing: border-box; }
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ── SCROLLBAR HIDE (mobile) ── */
@media (max-width: 899px) {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

/* ================================================================
   HEADER & NAV
   ================================================================ */
@media (max-width: 899px) {
  /* Custom nav (treatment/journal/location pages) */
  .claire-nav {
    padding: 0 20px !important;
    height: 64px;
  }
  /* Framework nav (index/about) — chỉ fix padding, KHÔNG force height */
  header .header {
    padding: 0 20px !important;
  }
  header .header .logo,
  .nav-logo {
    font-size: 16px !important;
    letter-spacing: 4px !important;
  }
  .nav-right { gap: 14px; }
  .lang-menu { right: 0; min-width: 140px; }
}

@media (max-width: 599px) {
  .claire-nav {
    padding: 0 16px !important;
    height: 60px;
  }
  header .header {
    padding: 0 16px !important;
  }
  /* page-wrap margin khớp với claire-nav height */
  .page-wrap { margin-top: 60px !important; }
}

/* ================================================================
   SIDEBAR (mobile menu)
   ================================================================ */
@media (max-width: 899px) {
  #sidebar { max-width: 88vw; }
  #sidebar .sidebar-contents .sidebar-content .sidebar-content-title {
    font-size: clamp(18px, 4vw, 22px) !important;
  }
  #sidebar .sidebar-contents .sidebar-content .sidebar-content-menus a {
    font-size: 14px;
    padding: 8px 0;
    display: block;
  }
}

/* ================================================================
   FOOTER
   ================================================================ */
@media (max-width: 899px) {
  /* Standard footer used in treatment / journal pages */
  footer {
    padding: 52px clamp(20px, 5vw, 40px) 28px;
  }
  .footer-top {
    flex-direction: column;
    gap: 6px;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px;
  }
  /* Location-page footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
}

@media (max-width: 599px) {
  footer { padding: 44px 20px 90px; }
  .footer-cols { grid-template-columns: 1fr !important; gap: 28px; }
  .footer-bottom {
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    text-align: center;
  }
  .footer-logo { font-size: 36px !important; }
}

/* ================================================================
   STICKY MOBILE CTA BAR — "Đặt Lịch Chăm Sóc"
   Shared on all pages except index.html (own variant) and
   reservation.html (booking destination itself).
   ================================================================ */
.mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1500;
  background: var(--ink, #3d2820);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}
.mobile-cta-bar a {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 24px;
  font-family: var(--f-sans); font-size: 11px;
  font-weight: 400; letter-spacing: 3px;
  color: var(--cream, #fdf8f0); text-decoration: none;
  text-transform: uppercase; width: 100%;
}
.mobile-cta-bar a::after { content: '→'; }
@media (max-width: 599px) {
  .mobile-cta-bar {
    display: block; opacity: 0; pointer-events: none;
    transform: translateY(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .mobile-cta-bar.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
}

/* ================================================================
   CTA BLOCKS (shared across treatment / journal pages)
   ================================================================ */
@media (max-width: 599px) {
  .cta-block { padding: 56px 20px !important; }
  .cta-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-btn {
    justify-content: center;
    width: 100%;
    padding: 14px 24px !important;
  }
  .cta-title {
    font-size: clamp(24px, 7vw, 36px) !important;
  }
}

/* ================================================================
   INDEX — HERO (Part 1)
   ================================================================ */
@media (max-width: 599px) {
  /* Hero headline */
  .home-wrap .part-1 h2 {
    font-size: clamp(42px, 12vw, 72px) !important;
    letter-spacing: 0.1em !important;
  }
  .home-wrap .part-1 p {
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
  }
  /* Scroll indicator */
  .home-wrap .part-1 .scroll-indicator { display: none; }
}

/* ================================================================
   INDEX — PHILOSOPHY (Part 2)
   ================================================================ */
@media (max-width: 599px) {
  .home-wrap .part-2 .part-2-content .part-2-content-item .texts-wrap {
    padding: 0 20px;
  }
}

/* ================================================================
   INDEX — TWO SANCTUARIES (Part 4) — was missing mobile fix!
   ================================================================ */
@media (max-width: 899px) {
  .part-sanctuaries {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .sanctuary-item {
    min-height: 56vw !important;
    padding: 36px 28px !important;
  }
}

@media (max-width: 599px) {
  .sanctuary-item {
    min-height: 72vw !important;
    padding: 28px 20px !important;
  }
  .sanctuary-name { font-size: 28px !important; }
}

/* ================================================================
   INDEX — TREATMENTS CAROUSEL (Part 3)
   — height được app-local.css quản lý, chỉ fix inner content height
   ================================================================ */
@media (max-width: 599px) {
  .home-wrap .part-3 .part-3-contents .part-3-content .part-3-content-inner {
    height: 50% !important;
    padding: 0 20px 20px !important;
  }
}

/* ================================================================
   INDEX — SURVEY FUNNEL (Part 5)
   ================================================================ */
@media (max-width: 599px) {
  .part-survey { padding: 64px 20px; }
  .survey-cta { padding: 14px 24px; font-size: 10px; letter-spacing: 3px; }
}

/* ================================================================
   INDEX — RESERVATION CARDS (Part 6)
   ================================================================ */
@media (max-width: 899px) {
  .reservation-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .res-card { padding: 32px 28px; }
}
@media (max-width: 599px) {
  .part-reservation { padding: 52px 20px; }
  .res-card { padding: 24px 18px; }
  .res-card-title { font-size: 18px; }
  .res-cta { width: 100%; justify-content: center; font-size: 10px; }
}

/* ================================================================
   ABOUT PAGE
   ================================================================ */
@media (max-width: 899px) {
  .page-wrap.page-about .part-5 .part-content .text { padding: 10px 16px; }
}
@media (max-width: 599px) {
  .page-wrap.page-about .part-full-background-content .part-content .content {
    font-size: 14px;
  }
}

/* ================================================================
   TREATMENT DETAIL PAGES (skin-firm, bio-lift, etc.)
   ================================================================ */
@media (max-width: 699px) {
  .intro-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .step-item { grid-template-columns: 32px 1fr 40px; }
}

@media (max-width: 599px) {
  .back-nav { padding: 12px 16px !important; }
  .detail-hero { padding: 40px 20px !important; }
  .detail-hero h1 { font-size: clamp(32px, 9vw, 52px) !important; }
  .detail-section { padding: 36px 20px !important; }
  .detail-section:last-of-type { padding-bottom: 48px !important; }
  /* Steps - narrower layout */
  .steps-list { margin-top: 4px; }
  .step-item { gap: 10px; }
  .step-name { font-size: 13px; }
  .step-detail { font-size: 11px; }
  /* FAQ */
  .faq-q { font-size: 13px; }
  .faq-ans { font-size: 12px; }
  /* Notes */
  .notes-list li { font-size: 12px; }
}

/* ================================================================
   FACIALS PAGE
   ================================================================ */
@media (max-width: 899px) {
  .menus a { padding: 8px 12px; font-size: 10px; }
}
@media (max-width: 799px) {
  .svc-card-grid { grid-template-columns: 1fr !important; }
  .svc-card-full { grid-column: 1 !important; }
}
@media (max-width: 599px) {
  .service-wrap { padding: 40px 16px !important; }
  .hero { padding: 0 16px 40px !important; }
  .menus {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .menus a { white-space: nowrap; }
  .svc-card-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ================================================================
   SIGNATURE PAGE
   ================================================================ */
@media (max-width: 899px) {
  .page-section { padding: 52px 24px !important; }
  .page-hero { padding: 0 24px 44px !important; }
  /* Programs grid if exists */
  .programs-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 599px) {
  .page-hero { padding: 0 16px 36px !important; }
  .page-section { padding: 40px 16px !important; }
  .intro-text { font-size: clamp(16px, 4.5vw, 22px) !important; }
}

/* ================================================================
   DA KY PAGE
   ================================================================ */
@media (max-width: 899px) {
  .imp-grid { grid-template-columns: 1fr !important; }
  .steps { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 599px) {
  .steps { grid-template-columns: 1fr !important; }
  .sec { padding: 44px 16px !important; }
}

/* ================================================================
   ITALIAN LIFT PAGE
   ================================================================ */
@media (max-width: 799px) {
  .phases-grid, .layer-grid, .exc-grid, .care-grid, .exp-journey,
  .exp-bottom, .proof-grid {
    grid-template-columns: 1fr !important;
  }
  .exp-cortisol, .course-info { flex-direction: column; }
  .course-timeline { flex-direction: column; gap: 20px; }
  .course-timeline::before { display: none; }
}
@media (max-width: 599px) {
  .il-section { padding: 48px 16px !important; }
  .il-stats { gap: 24px; flex-wrap: wrap; }
}

/* ================================================================
   DA KY SURVEY (da-ky-survey.html)
   ================================================================ */
@media (max-width: 899px) {
  .survey-page { grid-template-columns: 1fr !important; }
  .survey-left { position: relative !important; top: 0 !important; height: auto !important; }
}
@media (max-width: 599px) {
  .survey-right { padding: 0 16px 44px !important; }
  .fields-row { grid-template-columns: 1fr !important; }
  .yn-row { flex-direction: column; gap: 10px; }
  .yn-btns { flex-wrap: wrap; }
  .survey-body { padding: 36px 16px !important; }
}

/* ================================================================
   PERSONAL SURVEY (personal-survey.html)
   ================================================================ */
@media (max-width: 899px) {
  .survey-page { grid-template-columns: 1fr !important; }
  .survey-left {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    min-height: auto !important;
    padding: 40px 24px !important;
    justify-content: flex-start !important;
  }
  .survey-right { padding: 36px 24px 48px !important; overflow-y: visible !important; }
}
@media (max-width: 599px) {
  .survey-left { padding: 32px 16px !important; }
  .survey-title { font-size: clamp(24px, 7vw, 34px) !important; }
  .survey-right { padding: 28px 16px 44px !important; }
  .form-options { gap: 6px; }
  .form-option { font-size: 11px !important; padding: 8px 12px !important; }
  .form-input, .form-select, .form-textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }
  .form-submit { width: 100% !important; justify-content: center !important; }
}

/* ================================================================
   RESERVATION PAGE
   ================================================================ */
@media (max-width: 899px) {
  .branch-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 599px) {
  .res-hero { padding: 0 16px 40px !important; }
  .res-body { padding: 40px 16px !important; }
  .quick-links-strip { padding: 24px 16px !important; flex-wrap: wrap; gap: 8px; }
  .daky-cta { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ================================================================
   JOURNAL PAGES
   ================================================================ */
@media (max-width: 699px) {
  .insight-item { grid-template-columns: 1fr !important; }
}
@media (max-width: 599px) {
  .journal-grid { grid-template-columns: 1fr !important; }
  .page-hero { padding: 0 16px 36px !important; }
  .journal-body { padding: 40px 16px !important; }
  .journal-article { padding: 0 16px !important; }
  /* Article typography */
  .article-body { padding: 40px 16px !important; }
  .article-body h2 { font-size: clamp(20px, 5.5vw, 28px) !important; }
  .article-body p { font-size: 14px !important; line-height: 1.85 !important; }
  .article-hero { padding: 0 16px 36px !important; }
}

/* ================================================================
   LOCATION PAGES
   ================================================================ */
@media (max-width: 899px) {
  .loc-body { grid-template-columns: 1fr !important; gap: 40px; padding: 48px 24px !important; }
  .loc-hero { padding: 0 24px 44px !important; }
  .loc-map { padding: 0 24px 48px !important; }
  .map-frame { height: 280px !important; }
  .other-branch { flex-direction: column; gap: 20px; padding: 36px 24px !important; }
  .loc-cta { padding: 56px 24px !important; }
}
@media (max-width: 599px) {
  footer { padding: 48px 16px 28px !important; }
  .loc-hero { padding: 0 16px 36px !important; }
  .loc-hero h1 { font-size: clamp(40px, 12vw, 64px) !important; }
  .info-block-val { font-size: 14px !important; }
  .phone-link { font-size: 22px !important; }
  .loc-cta-title { font-size: 28px !important; }
  .loc-cta { padding: 48px 16px !important; }
  .other-branch { padding: 28px 16px !important; }
}

/* ================================================================
   iOS INPUT ZOOM FIX
   Inputs < 16px trigger auto-zoom on iOS — prevent it.
   ================================================================ */
@media (max-width: 599px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ================================================================
   TOUCH IMPROVEMENTS — chỉ target các nút cụ thể, KHÔNG dùng a/button chung
   ================================================================ */
@media (max-width: 899px) {
  /* Hamburger */
  .hamburger { width: 32px; height: 24px; padding: 10px 0; box-sizing: content-box; }
  .hamburger span { height: 1.5px; }
  /* Lang button */
  .lang-btn { padding: 10px 4px; }
  .lang-option { padding: 12px 16px !important; }
  /* Sidebar nav links */
  #sidebar .sidebar-content-menus a { padding: 10px 0 !important; display: block; }
  /* CTA buttons */
  .cta-btn { min-height: 48px; }
  .res-cta { min-height: 48px; }
  .survey-cta { min-height: 48px; }
  /* Back link */
  .back-link { padding: 6px 0; }
}

/* ================================================================
   SMALL PHONE (< 375px)
   ================================================================ */
@media (max-width: 374px) {
  .claire-nav,
  header .header { padding: 0 12px !important; }
  .nav-logo,
  header .header .logo { font-size: 14px !important; letter-spacing: 3px !important; }
  .detail-hero h1 { font-size: 28px !important; }
  .cta-title { font-size: 22px !important; }
  .page-hero-title { font-size: 32px !important; }
}