/* ========= Core tokens ========= */
  :root{
    --gold:#f39f22;          
    --gold-2:#ffb06a;         
    --ink:#2c2c2c;         
    --muted:#666;
    --bg:#f9f9f9;         
    --surface:#fff;          
    --line:rgba(0,0,0,.08);
    --grad:linear-gradient(90deg,#000,#3b2f1f); 
  }

  /* ========= Reset & layout ========= */
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Poppins","Segoe UI",Arial,sans-serif;background:var(--bg);color:#333;line-height:1.6}
  .container{max-width:1200px;margin:0 auto;padding:0 1rem}
  /* ========= Navbar  ========= */
  nav{background:var(--grad);padding:.7rem 0;box-shadow:0 4px 8px rgba(0,0,0,.2)}
  .nav-con{display:flex;justify-content:space-between;align-items:center}
  .nav-con img{border-radius:10px}
  .menu{display:flex;list-style:none;align-items:center}
  .menu li{margin:0 1rem}
  .menu a{color:#f9f9f9;text-decoration:none;font-weight:500;letter-spacing:.5px;padding:.5rem .8rem;border-radius:5px;transition:.25s}
  .menu a:hover{background:var(--gold);color:#fff}

  /* ========= ========= */
  .btn{display:inline-block;padding:.9rem 1.2rem;border-radius:10px;font-weight:700;letter-spacing:.3px;text-decoration:none;transition:.2s}
  .btn-sm{padding:.6rem .9rem;border-radius:8px}
  .btn-accent{color:#1b1209;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 14px 28px rgba(243,159,34,.35)}
  .btn-accent:hover{transform:translateY(-1px);filter:saturate(1.05)}
  .btn-outline{color:#fff;border:1px solid rgba(255,255,255,.25);background:transparent}
  .btn-outline:hover{border-color:#fff}

  /* ========= HERO (Goldenhotel) ========= */
  .hero{position:relative;min-height:60vh;display:flex;align-items:center;color:#fff;overflow:hidden;background:#0f0e0d}
  .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03);filter:brightness(.75) saturate(1.05)}
  .hero-overlay{position:absolute;inset:0;background:
    radial-gradient(1000px 400px at 70% -10%, rgba(255,165,96,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25))}
  .hero-inner{position:relative;z-index:2;padding:2.2rem 0}
  .hero-title{font-family:"Playfair Display","Poppins",serif;font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin-bottom:.6rem}
  .hero-sub{max-width:720px;color:#eee;margin-bottom:1.2rem}

  /* ========= STRIP ========= */
  .cta-strip{background:#191816;color:#f5f2eb;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
  .cta-strip-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}

  /* ========= Section ========= */
  .content{background:#fff;padding:4rem 0}
  .content-title{text-align:center;margin-bottom:3rem}
  .content-title h3{font-size:2.3rem;color:#333;margin-bottom:1rem;font-weight:700}
  .content-title p{color:var(--muted);max-width:700px;margin:0 auto}
  .content-con{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
  .content-item{background:#fff;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.1);overflow:hidden;text-align:center;transition:transform .3s,box-shadow .3s}
  .content-item:hover{transform:translateY(-8px);box-shadow:0 8px 20px rgba(243,159,34,.3)}
  .content-item img{width:100%;height:220px;object-fit:cover;display:block}
  .content-item h4{margin:1rem 0 .5rem;color:#2c2c2c;font-size:1.2rem;font-weight:600}
  .content-item p{margin-bottom:1.2rem;color:var(--muted)}
  .content-btn{display:inline-block;background:var(--gold);color:#fff;text-decoration:none;padding:.6rem 1.2rem;border-radius:6px;font-weight:500;transition:.25s}
  .content-btn:hover{background:#d98e1e}

  /* =========  ========= */
  .dark-section{background:linear-gradient(180deg,#161513,#141311);padding:3.2rem 0}
  .category-grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
  .category-card{position:relative;overflow:hidden;border-radius:14px;background:#1b1a18;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 24px rgba(0,0,0,.25)}
  .cat-cap{position:absolute;left:0;right:0;bottom:0;padding:.75rem .9rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7) 60%);color:#fff}
  .cat-cap strong{font-weight:700}
  .cat-cap span{font-size:.92rem;color:#ddd}

  /*  */
  .mini-slider{position:relative;width:100%;height:180px;overflow:hidden;border-radius:14px 14px 0 0}
  .mini-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:miniFade 16s infinite;will-change:opacity,transform}
  .mini-slider img:nth-child(1){animation-delay:0s}
  .mini-slider img:nth-child(2){animation-delay:4s}
  .mini-slider img:nth-child(3){animation-delay:8s}
  .mini-slider img:nth-child(4){animation-delay:12s}
  @keyframes miniFade{0%{opacity:0;transform:scale(1)}5%{opacity:1}25%{opacity:1;transform:scale(1.05)}30%{opacity:0}100%{opacity:0;transform:scale(1.05)}}
  .category-card:hover .mini-slider img{animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){
    .mini-slider img{animation:none;opacity:1}
    .mini-slider img:not(:first-child){display:none}
  }


  .feature-banner{background:#161513;padding:3rem 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
  .feature-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
  .feat-img img{width:100%;height:360px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 36px rgba(0,0,0,.35)}
  .feat-card{background:linear-gradient(180deg,#1f1e1b,#1a1917);color:#f0ede6;border-radius:16px;padding:1.25rem;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(0,0,0,.3)}
  .feat-card h4{font-size:1.25rem;margin-bottom:.4rem;font-weight:700}
  .feat-card p{color:#cfcac1;margin-bottom:.8rem}
  .feat-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
  .feat-tags span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:.35rem .55rem;border-radius:999px;font-size:.88rem;color:#eae6dc}

  /* ========= ABOUT/NEWS (Goldenhotel) ========= */
  .about-news{background:#131210;color:#efece5;padding:3rem 0}
  .an-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .an-card{background:linear-gradient(180deg,#1b1a18,#171614);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.25rem;box-shadow:0 12px 26px rgba(0,0,0,.28)}
  .an-card h3{font-family:"Playfair Display","Poppins",serif;margin-bottom:.4rem}
  .an-card p{color:#cfcac1}
  .news .news-list{list-style:none;margin:.4rem 0 .9rem;display:grid;gap:.45rem}
  .news-date{display:inline-block;min-width:80px;font-size:.85rem;color:#bdb9b0}
  .news-title{color:#f3eee6;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.18)}
  .news-title:hover{color:#fff;border-bottom-color:transparent}

  /* ========= Footer ========= */
  footer{background:var(--grad);color:#fff;text-align:center;padding:2rem 0;margin-top:3rem}
  footer a{color:var(--gold);text-decoration:none;font-weight:500}
  footer a:hover{text-decoration:underline}
  .footer-con h4{font-size:1.5rem;margin-bottom:.5rem;color:var(--gold)}

  /* ========= Deluxe: ========= */
  .brand img{border-radius:20px;width:90px;height:100px;object-fit:cover}
  .brand h1{font-size:1.1rem;font-weight:600;letter-spacing:.2px}
  .nav-links{display:flex;gap:.75rem;align-items:center}
  .btn-back{display:inline-block;border-radius:8px;padding:.55rem .9rem;font-weight:600;background:#fff;color:#000;border:1px solid rgba(0,0,0,.12);text-decoration:none}
  .lang-switch{display:flex;gap:.5rem;align-items:center}
  .lang-switch input{display:none}
  .lang-switch label{cursor:pointer;border:1px solid rgba(0,0,0,.12);padding:.35rem .6rem;border-radius:6px;font-size:.9rem;background:#fff;color:#000;opacity:.85}
  .lang-switch input:checked + label{background:#000;color:#fff;opacity:1;border-color:#000}


  .i18n{display:none}
  body:has(#lang-en:checked) [data-lang="en"],
  body:has(#lang-th:checked) [data-lang="th"]{display:block}
  body:not(:has(#lang-en:checked)):not(:has(#lang-th:checked)) [data-lang="en"]{display:block}

  /* font lao */
  .i18n[data-lang="th"], .i18n[data-lang="th"] *{
    font-family:"Noto Sans Lao","Phetsarath","Lao UI",system-ui,sans-serif!important;
    line-height:1.65;letter-spacing:.1px
  }

  /* ========= Deluxe: slider 8 ========= */
  .header-card{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .header-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:1.25rem}
  .header-media{border-radius:14px;overflow:hidden}
  .header-copy{display:flex;flex-direction:column;justify-content:center;padding:1rem}
  .title{font-size:2rem;font-weight:700;margin-bottom:.5rem}
  .subtitle{color:var(--muted);margin-bottom:1rem}
  .badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 1rem}
  .badge{background:#fff;border:1px solid #eee;padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

  /* Slider 8  */
  .slider{position:relative;border-radius:14px;overflow:hidden}
  .slider input{display:none}
  .slides{display:flex;width:800%;transform:translateX(0);animation:slideshow8 40s infinite}
  .slide{flex:0 0 12.5%;height:380px}
  .slide img{width:100%;height:100%;object-fit:cover}
  @keyframes slideshow8{
    0%,10%{transform:translateX(0)}
    12.5%,22.5%{transform:translateX(-12.5%)}
    25%,35%{transform:translateX(-25%)}
    37.5%,47.5%{transform:translateX(-37.5%)}
    50%,60%{transform:translateX(-50%)}
    62.5%,72.5%{transform:translateX(-62.5%)}
    75%,85%{transform:translateX(-75%)}
    87.5%,97.5%{transform:translateX(-87.5%)}
    100%{transform:translateX(0)}
  }
  /*  */
  .slider:has(#s1:checked) .slides{transform:translateX(0);animation:none}
  .slider:has(#s2:checked) .slides{transform:translateX(-12.5%);animation:none}
  .slider:has(#s3:checked) .slides{transform:translateX(-25%);animation:none}
  .slider:has(#s4:checked) .slides{transform:translateX(-37.5%);animation:none}
  .slider:has(#s5:checked) .slides{transform:translateX(-50%);animation:none}
  .slider:has(#s6:checked) .slides{transform:translateX(-62.5%);animation:none}
  .slider:has(#s7:checked) .slides{transform:translateX(-75%);animation:none}
  .slider:has(#s8:checked) .slides{transform:translateX(-87.5%);animation:none}

  .arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;font-size:26px;line-height:1;cursor:pointer}
  .arrow:hover{background:rgba(0,0,0,.6)}
  .prev{left:10px}.next{right:10px}
  .prev-next label{display:none}
  .slider:has(#s1:checked) .prev-next .to-s8,
  .slider:has(#s1:checked) .prev-next .to-s2,
  .slider:has(#s2:checked) .prev-next .to-s1,
  .slider:has(#s2:checked) .prev-next .to-s3,
  .slider:has(#s3:checked) .prev-next .to-s2,
  .slider:has(#s3:checked) .prev-next .to-s4,
  .slider:has(#s4:checked) .prev-next .to-s3,
  .slider:has(#s4:checked) .prev-next .to-s5,
  .slider:has(#s5:checked) .prev-next .to-s4,
  .slider:has(#s5:checked) .prev-next .to-s6,
  .slider:has(#s6:checked) .prev-next .to-s5,
  .slider:has(#s6:checked) .prev-next .to-s7,
  .slider:has(#s7:checked) .prev-next .to-s6,
  .slider:has(#s7:checked) .prev-next .to-s8,
  .slider:has(#s8:checked) .prev-next .to-s7,
  .slider:has(#s8:checked) .prev-next .to-s1{display:grid}

  /* ========= Responsive ========= */
  @media (max-width:1000px){
    .category-grid{grid-template-columns:repeat(2,1fr)}
    .feat-img img{height:300px}
    .feature-wrap{grid-template-columns:1fr}
  }
  @media (max-width:900px){
    .header-wrap{grid-template-columns:1fr}
    .slide{height:280px}
    .arrow{width:40px;height:40px;font-size:22px}
  }
  @media (max-width:640px){
    .hero{min-height:56vh}
    .category-grid{grid-template-columns:1fr}
    .cta-strip-in{flex-direction:column;align-items:flex-start}
  }

  /* ====== Font size for HERO ====== */
  /* EN */
  .hero-title{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
  .hero-sub{   font-size: clamp(1.05rem, 1.6vw, 1.25rem); }

  /* LA (เมื่อสลับไปภาษาลาว) */
  body:has(#lang-th:checked) .hero-title{ font-size: clamp(2.6rem, 6vw, 3.9rem); }
  body:has(#lang-th:checked) .hero-sub{   font-size: clamp(1.15rem, 1.9vw, 1.35rem); }

  /* ====== Section titles (Our Rooms, Restaurant, …) ====== */
  .content-title h3{ font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
  body:has(#lang-th:checked) .content-title h3{ font-size: clamp(1.9rem, 3.5vw, 2.6rem); }

  /* ====== Cards ====== */
  .content-item h4{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
  body:has(#lang-th:checked) .content-item h4{ font-size: clamp(1.1rem, 1.8vw, 1.35rem); }

  /* ปุ่มให้ตัวโตขึ้นเล็กน้อยอ่านง่าย */
  .btn, .content-btn{
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
  }

  /* ถ้าใช้บล็อกข้อความลาว (.i18n[data-lang="th"]) อยู่แล้ว
    ช่วยให้ตัวอักษรลาวดูโปรขึ้นด้วยน้ำหนักตัวอักษรที่เหมาะสม */
  .i18n[data-lang="th"], .i18n[data-lang="th"] *{
    font-weight: 480;           
    line-height: 2,0;
    letter-spacing: .5px;
  }




  /* Restarants */
  /* ============ Restaurants Page (scoped) ============ */
  .rest{
    --rest-plum:#6d0a4c;
    --rest-gold:#f39f22;
    --rest-ink:#1f1f1f;
    --rest-text:#4b4b4b;
    --rest-line:rgba(0,0,0,.08);
    --rest-bg:#fafafa;
    --rest-surface:#fff;
    --rest-radius:18px;
    --rest-shadow:0 10px 30px rgba(0,0,0,.08);
    font-family:"Poppins","Noto Sans Lao",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--rest-text);
    background:var(--rest-bg);
    line-height:1.7;
  }

  /* container ของเพจนี้ (ไม่ไปยุ่ง .container เดิม) */
  .rest .rest-container{ width:min(1200px,90vw); margin-inline:auto }

  /* ปุ่ม (แยก namespace) */
  .rest .rest-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.9rem 1.2rem; border-radius:999px; text-decoration:none; font-weight:700;
    letter-spacing:.02em; transition:all .2s ease; border:2px solid transparent
  }
  .rest .rest-btn-primary{ background:var(--rest-plum); color:#fff }
  .rest .rest-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(109,10,76,.25) }
  .rest .rest-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5) }
  .rest .rest-btn-ghost:hover{ background:rgba(255,255,255,.08) }

  /* HERO */
  .rest .rest-hero{ position:relative; min-height:72vh; display:grid; place-items:center }
  .rest .rest-hero-media{ position:absolute; inset:0; background:#000 center/cover no-repeat; background-image:var(--rest-hero) }
  .rest .rest-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55)) }
  .rest .rest-hero-inner{ position:relative; color:#fff; padding-block:5rem }
  .rest .rest-hero-title{ font-size:clamp(2rem,5vw,4rem); font-weight:800; letter-spacing:.02em; margin:0 0 1rem }
  .rest .rest-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin:1rem 0 2rem }
  .rest .rest-dots{ display:flex; gap:.5rem }
  .rest .rest-dots span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.35) }
  .rest .rest-dots .is-active{ background:#fff }
  .rest .rest-scroll{
    position:absolute; right:2rem; bottom:2rem; width:56px; height:56px; display:grid; place-items:center;
    border-radius:50%; background:#fff; color:var(--rest-plum); box-shadow:var(--rest-shadow); text-decoration:none
  }
  .rest .rest-scroll svg{ fill:var(--rest-plum) }

  /* INTRO */
  .rest .rest-intro{ text-align:center; padding:4rem 0 2rem }
  .rest .rest-eyebrow{ letter-spacing:.25em; color:var(--rest-plum); font-weight:800; font-size:.8rem }
  .rest .rest-intro-title{ font-weight:800; color:var(--rest-ink,#1f1f1f); margin:.6rem auto 1.2rem; max-width:900px }
  .rest .rest-divider{ width:40px; height:3px; background:var(--rest-gold); border-radius:2px; margin:.5rem auto 1.5rem }
  .rest .rest-intro-text{ max-width:900px; margin-inline:auto }
  .rest .rest-intro-highlight{ color:var(--rest-plum); font-weight:700; letter-spacing:.12em; margin-top:1.2rem }

  /* GRID */
  .rest .rest-grid{ display:grid; gap:2.2rem; padding:2rem 0 4rem }
  .rest .rest-card{
    background:var(--rest-surface); border-radius:var(--rest-radius); box-shadow:var(--rest-shadow);
    overflow:hidden; display:grid; grid-template-columns:1fr;
  }
  .rest .ratio-3x2{ aspect-ratio:3/2; overflow:hidden }
  .rest .ratio-3x2 img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px }
  .rest .rest-card-body{ padding:1.4rem 1.4rem 1.6rem }
  .rest .rest-card-title{ font-size:1.35rem; letter-spacing:.12em; color:var(--rest-plum); margin:.2rem 0 .2rem }
  .rest .rest-card-sub{ color:var(--rest-ink,#1f1f1f); font-weight:600; margin:0 0 .6rem }
  .rest .rest-facts{ list-style:none; padding:0; margin:0; color:var(--rest-text) }
  .rest .rest-facts li{ padding:.18rem 0 }

  @media (min-width:900px){
    .rest .rest-grid{ grid-template-columns:repeat(2,1fr) }
  }

  /* CTA band */
  .rest .rest-cta{ background:#6d7f86; color:#fff; padding:1rem 0 }
  .rest .rest-cta .rest-container{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }
  .rest .rest-cta-link{
    color:#fff; text-decoration:none; padding:.8rem 1.2rem; border-radius:999px;
    border:1px solid rgba(255,255,255,.35); transition:.2s
  }
  .rest .rest-cta-link:hover{ background:rgba(255,255,255,.1) }

  /* ===== Feature image slider ===== */
  .feat-slider{
    position:relative; width:100%;
    overflow:hidden; border-radius:16px;
    box-shadow:0 10px 28px rgba(0,0,0,.35);
    background:#000; aspect-ratio:16/9;
  }
  @media(max-width:768px){.feat-slider{aspect-ratio:4/3;}}

  .feat-track{
    display:flex; height:100%;
    transform:translateX(0); transition:transform .5s ease; will-change:transform;
  }
  .feat-slide{
    min-width:100%; height:100%;
    background-size:cover; background-position:center;
  }

  .feat-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border:none; border-radius:999px;
    background:rgba(0,0,0,.45); color:#fff; font-size:22px;
    cursor:pointer; z-index:5;
  }
  .feat-arrow.prev{left:10px;}
  .feat-arrow.next{right:10px;}
  .feat-arrow:hover{background:rgba(0,0,0,.6);}

  .feat-dots{
    position:absolute; left:50%; bottom:10px;
    transform:translateX(-50%); display:flex; gap:8px; z-index:5;
  }
  .feat-dots button{
    width:9px; height:9px; border-radius:50%; border:none;
    background:rgba(255,255,255,.5); cursor:pointer;
  }
  .feat-dots button.active{background:#f39f22;}

  .feat-slider {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
  }

  .feat-track {
    display: flex;
    transition: transform 0.7s ease;
    width: 100%;
  }

  .feat-slide {
    min-width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
  }

  /* ปุ่มลูกศร */
  .feat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 2;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background 0.3s;
  }
  .feat-arrow:hover { background: rgba(0,0,0,0.6); }
  .prev { left: 10px; }
  .next { right: 10px; }

  /* จุดสถานะ */
  .feat-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }
  .dot {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
  }
  .dot.active { background: #f39f22; }

  /* ให้การ์ดสุดท้ายเล็กลงกว่าการ์ดอื่น */
.rest .small-card {
  max-width: 80%;       /* ความกว้างเล็กลง */
  margin: 0 auto;       /* จัดให้อยู่ตรงกลาง */
}

.rest .small-card .ratio-3x2 {
  aspect-ratio: 3 / 1.8; /* ทำให้ภาพเตี้ยลงเล็กน้อย */
}

.rest .small-card img {
  transform: scale(0.9); /* ย่อภาพลงนิดนึง (90%) */
  border-radius: 14px;
}
/* ---- global small-fix (ครั้งเดียวพอ) ---- */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
nav { width:100%; }
.nav-con { padding:0 12px; }
/* ---- global small-fix (ครั้งเดียวพอ) ---- */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
nav { width:100%; }
.nav-con { padding:0 12px; }
@media (max-width:640px){
  .menu a{ padding:.35rem .5rem; font-size:.9rem; }
  .brand img{ width:64px; height:72px; }
}
.rest .rest-container{ width:min(1200px,94vw); }
.rest .rest-hero{ min-height:60vh; }
/* ==== Mobile hard-fix: ป้องกันสกรอลล์แนวนอน & บีบเต็มจอ ==== */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* รูป/วิดีโอไม่ล้นจอ */
img, video, canvas { max-width:100%; height:auto; display:block; }

/* คอนเทนเนอร์หลักให้กว้างเต็มจอบนมือถือ */
.container, .nav-con, .rest .rest-container { width:100%; }

/* บางเคส 100vw ทำให้ล้นบน iOS → ใช้ 100% แทน */
.hero, .rest .rest-hero, nav { width:100%; }

/* เมนูบนจอเล็ก: ลดช่องว่าง/ให้ wrap ได้ (กันล้น) */
@media (max-width:480px){
  .menu { flex-wrap:wrap; }
  .menu li { margin:0 .5rem; }
  .menu a { padding:.35rem .5rem; font-size:.92rem; }
}