/* ========= root ========= */
:root {
  --bp-phone:   480px;   /* iPhone และมือถือเล็ก */
  --bp-tablet:  768px;   /* iPad / Tablet */
  --bp-desktop: 1024px;  /* Desktop */
  --header-h: clamp(52px, 12vw, 84px);  /* ค่าตั้งต้น */ 

  --maxw: 1320px;
  --gap: 12px;
  --row: 180px;          /* ความสูง “1 แถว” ของกริด */
  --radius: 8px;
  --tab-fill-h: #f0ce9f;       /* hover */
  --tab-fill:   #E6BE8A;   /* ทอง */
  --tab-text:   #2b1209;   /* น้ำตาลเข้ม */
  --tab-line:   #FADD84;   /* เส้น/ไฮไลต์ */
  --menu-col-min: 340px;
}


/*----For All -------------------*/
html,body{ 
  margin:0; 
  padding:0; 
  height:auto;
  width: 100%;
  overflow-x: hidden; /* ปิด scroll ด้านข้าง */
  background: #2b1209 !important;
}

html{ scroll-padding-top: calc(var(--header-h) + 16px); }

/* reset */
*{
  max-width: 100%;  /* ป้องกันภาพ/วิดีโอ/กล่องบาน */
  box-sizing:border-box;
  margin:0;
  padding:0
}
img, video { max-width:100%; height:auto; display:block; }

body{
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 400;
  height:100%;
  background:none;
}

/* กันชนเนื้อหาให้เท่าหัวจริง */
main{ padding-top: 0 !important; }

main > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ===== HEADER ===== */
#mainHeader{
  position:fixed;
  top:0; left:0; right:0;
  height: var(--header-h)!important; /* กันโดน media-query ทับ */
  padding: 0 clamp(8px, 4vw, 24px);
  display:flex; 
  align-items:center; 
  gap:16px;
   background: linear-gradient(
    to bottom,
     rgba(75, 30, 10, 1) 0%,   /* ด้านบนเข้ม */
    rgba(75, 30, 10, 1) 25%,   /* ด้านบนเข้ม */
    rgba(75, 30, 10, 0) 100% /* ด้านล่างสว่าง */
  );
  color:#FADD84;
  z-index: 10001;
 transition:height .25s ease;
 padding-top: 0;                      /* กันลอย */
}



/* เลิกใช้ ::before ไปเลย เพื่อไม่ให้ซ้อนชั้น */
#mainHeader::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: transparent;
  opacity: var(--hdr-overlay, 1);
  transition: opacity .35s ease;
  z-index: 0;
}


/* Solid color overlay (fades in via JS) */
#mainHeader .overlay{
  position:absolute; inset:0;
  background:#4B1E0A;
  opacity:0; pointer-events:none;
  transition:opacity .25s linear;
}

.logo-wrap{ position:relative; z-index:1; display:flex; align-items:center; }
.logo{ display:block;   
  height: calc(var(--header-h) - 12px);
  width: auto;
  max-width: none; 
  opacity:1; transition:opacity .35s ease;
  margin-left: clamp(8px, 2vw, 20px);
}

/* หลังเลื่อนให้ทึบทั้งแทบ */
body.header-solid #mainHeader::before{ opacity: 0; }
body.header-solid #mainHeader{ background:#4B1E0A; }




/* TEXT — hidden and offset LEFT at start */
/*
#mainHeader .brand-text{
  position: absolute;
  color:#FFD87A; white-space:nowrap;
  opacity:0; transform:translateX(-40px);
  font-size: clamp(16px, 5vw, 30px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* ใช้ Bold 700 ถ้าอยากให้เด่น
   letter-spacing: 1px; /* เว้นระยะห่างให้ดูหรู 
  text-transform: uppercase; /* ถ้าต้องการให้เป็นตัวพิมพ์ใหญ่ 
  transition:opacity .45s ease, transform .45s ease;
  margin-left: 0; /* ปิด margin เดิม *
 margin-top: -50px; /* desktop ค่าเริ่ม 

}
 */
 #mainHeader .brand-text{
  position:absolute;
  left: clamp(64px, 7vw, 120px);  /* ปรับให้พ้นโลโก้ */
  top: 50%;
  margin-top: 0 !important;

  opacity:0;
  transform: translateY(-50%) translateX(-40px);
  transition: opacity .45s ease, transform .45s ease;
}
body.swap #mainHeader .brand-text{
  opacity:1;
  transform: translateY(-50%) translateX(0);
}

#hero { touch-action: manipulation; }


/* ===== After scroll: collapse logo space, show text 20px from left ===== */
body.swap #mainHeader .logo-link{
  padding-left:20px;             /* final inset from the left */
}
body.swap #mainHeader .logo{
  opacity:0;                     /* fade out; no width reserved */
}
body.swap #mainHeader .brand-text{
  opacity:1; transform:translateX(0); /* fade + slide in from LEFT */
}

body.menu-open #mainHeader, #mainHeader .overlay {
  background:transparent;
}
/* ซ่อน logo และ brand-text ตอนเมนูเปิด */
body.menu-open #mainHeader .logo-wrap,
body.menu-open #mainHeader .brand-text {
 /* opacity: 0;*/
 /* visibility: hidden;*/
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Reset */
ul { 
  list-style: none; 
  margin: 0; padding: 0; }


.navbar {
  margin-left: auto;    /* ดันไปขวาสุด */
  margin-right: 80px;   /* แล้วถอยกลับมาซ้ายหน่อย (ปรับเลขได้) */
  height: 60px;
  padding: 0 24px;
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 700;                 /* Bold */
  letter-spacing: 0.06em;
  position: relative;
}
/* Navbar container */
.navbar ul {
  list-style: none;
  display: flex;              /* put items in a row */
  gap: 1.25rem;                  /* space between links */
  justify-content: flex-end; /* push items to the right */
  align-items: center;
  padding: 0;
  margin: 0;
  /*  margin-right: 60px; /* move closer to right edge */
}

/* Menu links */
.navbar ul li a {
  position: relative;          /* สำคัญ! ให้ ::after วางได้ถูกจุด */
  display: inline-block;       /* กันเส้นยืดเต็ม li */
  padding-bottom: 4px;         /* เผื่อที่ให้เส้น */
  text-decoration: none;
  color: #fff5d7;
  transition: color .3s ease;
}
/* เส้นขีดล่าง */
.navbar ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;                /* ระยะจากตัวอักษร ปรับได้ */
  width: 0%;
  height: 2px;
  background: #FFD87A;
  transition: width .3s ease-in-out;
}

/* ให้เส้นวิ่งตอน hover/focus */
.navbar ul li a:hover::after,
.navbar ul li a:focus-visible::after {
  width: 100%;
}
/* Hover effect */
.navbar ul li a:hover {
  color: #FFD87A;             /* lighter gold/cream on hover */
}




/* Right-side container */
.right-icons {
  position: absolute;
  top: 50%;              /* center vertically in header */
  right: clamp(8px, 3vw, 20px); 
  gap: clamp(4px, 2vw, 8px);
  display: flex;
  align-items: center;   /* vertical alignment */
  transform: translateY(-50%);
  z-index: 20001;
}

/* กล่องไอคอน/ปุ่มให้หน้าตาเหมือนกัน */
.right-icons a{
  display:grid;               /* ไว้สำหรับไอคอน FB/IG */
  place-items:center;
/*  width: clamp(22px, 8vw, 40px);
  height: clamp(22px, 8vw, 40px);*/
  color:#FFF5D7;
  text-decoration:none;
  transition:transform .15s ease, background .2s, border-color .2s, color .2s;
}


/*
.right-icons > button {
  margin-left: clamp(1px, 1vw, 3px);}
*/
.right-icons .hamburger{
  color:#FFF5D7;
}

/* ไอคอน FB/IG ขนาด */
.right-icons a i{ font-size: clamp(20px, 8vw, 36px); }
.right-icons a.fb-icon i {
  transform: scale(0.85);
}


/* hover/focus */
.right-icons a:hover,
.right-icons .hamburger:hover{
  transform:translateY(-1px);
  border-color:#FFD87A;
  color:#FFD87A;
}



.textmain{
  height: 100px;
  width: 100%;
   display: inline-block;
   margin-top:  30px;
   padding:  14px 30px;
   color: #fff5d7;
   font-size: 1rem;
   text-decoration: none;
   transition: all 0.3s ease;
   cursor: pointer;

}
.textmain:hover{
  background-color: #4B1E0A;
}

/* ===== Hamburger Button ===== */
.hamburger {
  position: static;                /* อยู่ใน .right-icons */
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;                       /* ใช้ border จาก .right-icons แทน */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 40px;
  gap: 6px;
}

/* เส้นของ hamburger */
.hamburger span {
  display: block;
  width: clamp(20px, 6vw, 26px);
  height: 2px;                    /* เปลี่ยนเป็น 2px ได้ถ้าต้องการบางลง */
  background: currentColor;
  border-radius: 1px;
  margin: 0;
  transition: transform 0.25s, opacity 0.2s;
}

/* เก็บเอฟเฟกต์เป็น X เมื่อ active */
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

body.menu-open { overflow: hidden; }


/* Half-page overlay that slides in from the right */
.menu-overlay{
  position: fixed;
  inset: 0;                         /* << คลุมทั้งจอ */
/*  top: 0;right: 0;   height: 100vh; width: 35vw;*/
  background: rgba(75,30,10,0.9);
  backdrop-filter: blur(2px);
   z-index: 10000;               /* below the hamburger (which is 10000) */

  display: grid;                    /* จัดเมนูให้อยู่กลาง */
  place-items: center;
  opacity: 0;
  visibility: hidden;
  /*display: flex;*/
  align-items: center;       /* จัดแนวตั้งตรงกลาง */
  pointer-events: none;
  transform: translateX(100%);      /* ซ่อนแบบเลื่อนจากขวา (จะเปลี่ยนเป็น 0 ตอนเปิด) */
  transition: opacity .28s ease, visibility .28s ease, transform .28s ease;
  

}

body.menu-open .menu-overlay{
  transform: translateX(0);
  opacity: 1;                 /* <- ทำให้เห็น */
  pointer-events: auto;       /* <- คลิกได้ */
  visibility: visible;
}






/* ===== รายการเมนู ===== */
.menu-list  {
  display: flex;
  flex-direction: column;
  text-align: center; 
  font-size: clamp(20px, 4vw, 24px);
  font-weight: 700;                 /* Bold */
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.menu-list  li {
  list-style: none;    /* remove bullets */
  margin: 20px 0;
}

/****** font *******/
.menu-list a{ 
  color:#fff5d7; 
  text-decoration:none; 

}

.menu-list a:hover {
  color: #FADD84;   /* สีทองตามธีม */
  /*text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;*/
}

.header-spacer { height: calc(var(--header-h) - 32px); }



/********************** Page index *****************************/ 
/******************** Chapter 01 Video present *****************/
/* ===== FIX: ให้ video อยู่ใน flow, เห็นทั้งเฟรม, และเซคชันมีความสูงจริง ===== */
/*
.chapterVideo{
  position: relative !important;
  min-height: 100vh !important;   /* ให้มีพื้นที่แน่นอน 
  overflow: hidden !important;
  background:#2b0f07;            /* สีพื้นระหว่างรอโหลด 
}

.chapterVideo .video-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* เติมเต็มจอแบบไม่เหลือขอบดำ 
}

/* overlay ให้คลุมพื้นที่ของ section ได้จริง 
.chapterVideo .video-overlay{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index:1;
}

.chapterVideo .video-content{
  position:absolute; z-index:2; color:#fff5d7; text-align:center;
  top:30%; left:50%; transform:translate(-50%,-50%);
  width:90%; 
  opacity: 0;                         /* เริ่มจาง 
  animation: fadeAll .30s ease-out forwards;
  animation-fill-mode: both;
  /* animation-delay: .4s; 
   z-index:2;
}



@keyframes fadeAll {
  from { opacity: 0; }
  to   { opacity: 1; }
}


.chapterVideo .video-content h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* ใช้ Bold 700 ถ้าอยากให้เด่น 
    font-size: clamp(3rem, 5vw, 8rem); /* responsive font 
    line-height: 1;
    margin: 0;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
.chapterVideo .video-content h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* ใช้ Bold 700 ถ้าอยากให้เด่น 
    font-size: clamp(3rem, 5vw, 8rem); /* responsive font 
    line-height: 1;
    margin: 0;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    color: #FADD84;
}

.chapterVideo .video-content p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* ใช้ Bold 700 ถ้าอยากให้เด่น 
  font-size: clamp(20px, 3vw ,30px);
  line-height: 1.05;
  letter-spacing: 0.65em;
  margin-bottom: .4em;
  color: #FADD84;
}



.barline{
  position: relative;
  display: inline-block;
  padding: 4px 12px;
  z-index: 1;
}
/* แถบสีน้ำตาลแบบอนิเมชัน (ขยายจากซ้าย→ขวา) 
.barline::before{
  content: "";
  position: absolute;
  inset: 0;                 /* คลุมเท่าข้อความ 
  background: #4B1E0A;
  z-index: -1;              /* ไปไว้ใต้ตัวอักษร 
  border-radius: 4px;
  transform: scaleX(0);     /* เริ่มจาก 0 
  transform-origin: left center;
  transition: transform 1s ease-in-out;
}

/* เมื่อมีคลาส animate ให้กางเต็ม 
.barline.animate::before{
  transform: scaleX(1);
}

body.no-video .video-bg,
body.no-video .video-overlay {
  opacity: 0;
  pointer-events: none;
}
body.no-video { background: #4B1E0A; }


/*
.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}*/
/******************** Chapter 01 Video present ****************

/* Fade on scroll (no move) 
.reveal {
  opacity: 0;
  transition: opacity 0.9s ease-out;
  transition-delay: var(--d, 0ms);   /* ใช้หน่วงเวลาแบบสเต็ป 
}
.reveal.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; }
}
*/

/* ===== HERO SLIDER ===== */
.hero-slider {
  position: relative;
  height: 100vh;
  min-height: 520px;
  width: 100%;
  overflow: hidden;
}

/* slide แต่ละอัน */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.9s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;

  /* เพิ่มสองบรรทัดนี้สำคัญมาก */
  pointer-events: none;   /* สไลด์ที่ซ่อนอยู่ ห้ามรับคลิก */
}

.hero-slide.active {
  opacity: 1;
  animation: heroZoom 18s linear forwards;
  pointer-events: auto;   /* ให้คลิกได้เฉพาะสไลด์ที่โชว์ */
}
/* ซูมภาพช้าๆ */
@keyframes heroZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* ม่านทึบช่วยให้อ่านตัวหนังสือชัด */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.35)
  );
}

/* กล่องข้อความกลางจอ */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
  color: #fff;
  padding: 0 16px;
}

.hero-content h1 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  margin-bottom: 12px;
}

.hero-content p {
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: 24px;
}

/* ปุ่ม */
.hero-btn {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.03em;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  /* ปรับสีให้เข้าธีมร้าน */
  background: rgba(0,0,0,0.25);
}

.hero-btn:hover {
  background: #E6BE8A;    /* ทองธีมร้าน */
  color: #2b1209;
  transform: translateY(-1px);
}

/* ปุ่มเลื่อนซ้ายขวา */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  font-size: 22px;
}

.hero-arrow:hover {
  background: rgba(0,0,0,0.6);
}

.hero-prev { left: 16px; }
.hero-next { right: 16px; }

/* จุดแสดงสไลด์ปัจจุบัน */
.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hero-dot.active {
  background: #fff;
  transform: scale(1.1);
}

/* มือถือ: ลด padding นิดหน่อย */
@media (max-width: 768px) {
  .hero-arrow {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}


/******************** Chapter 02 about us *****************/
/* สูงเท่าที่ต้องการ */
.chapterAbout{
  margin-top: -1px;
  padding-top: 0;
  min-height: 80vh;           /* ปรับได้ เช่น 70–100vh */
  display: grid;
  place-items: center;
  position: relative; 
  isolation: isolate;     
  overflow: hidden;           /* กันส่วนเกิน */
  /* ภาพอิฐเต็มหน้าจอเสมอ */
 /*background: url("./images/other/wall04.svg") center / cover no-repeat; /* ใส่สีสำรอง + แก้ path เป็น ./ */
  /* ชั้นที่ 1: พื้นหลังสีน้ำตาล */
  background-color: #2B1209;   /* โทนน้ำตาลเข้มแบบร้าน */
}


.chapterAbout::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("./images/other/wall04.svg") center/cover no-repeat;
  opacity: 0.25;   /* 👈 ปรับความจางของภาพที่นี่ */
  
  z-index: 0;
}

.textAbout {
  position: absolute;
  max-width: 800px;
  padding: 20px;
  z-index: 1;
}

/* หัวข้อใหญ่ ปรับให้ responsive */
.textAbout h2 {
  margin-bottom: 24px;
  font-size: clamp(28px, 3.2vw, 36px);
  text-align: center;
  line-height: 1.2;
  font: bold;
  font-weight: 700;
  letter-spacing: 0.02em;

  /**** Code for strock alphabat ********/
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    color: #FADD84;

}

/* เนื้อหา paragraph */
.textAbout p {
  color: #faebd7;               /* สีตัวอักษร */
  font-size: clamp(14px, 1.2vw + 0.4rem, 18px);
  line-height : 1.65;
  margin: 10px auto;
  max-width: 70ch;
letter-spacing: .05em;
  margin-bottom: 15px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.btn-outline {
  display: block;       /* ทำให้ปุ่มเป็นบล็อกเต็มบรรทัด */
  width: fit-content;   /* ให้ขนาดพอดีกับข้อความ */
  margin: 0 auto;       /* จัดให้ไปอยู่ตรงกลาง */
  padding: 12px 32px;
  border: 1px solid #FADD84;
  color: #faebd7;
  text-decoration: none;
  font-size: 14px;
   font:bold;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
    font-weight: 500;     /* <— ทำให้หนาขึ้น */

}
.btn-outline:hover {
  background: #faebd7;
  color: #4B1E0A; /* สีตัวอักษรเมื่อ hover */
}
/******************** Chapter  about us *****************/





/******************** Chapter  order online *****************/

/* ===== Section 4: Online Order ===== */

/* ให้เลื่อนมาไม่โดน header บังเวลา click #online-order */
#online-order { scroll-margin-top: calc(var(--header-h) + 12px) !important; }
/*
.full-bleed2{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}*/

/* สูงเท่าที่ต้องการ */
.chapter04{
  position: relative;
  min-height: 80vh;
  display: flex;                  /* เปลี่ยนจาก grid เป็น flex */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;    /* <<< ดันคอนเทนต์ไปด้านบน */
  padding-top: clamp(8px, 6vh, 64px);  /* <<< ระยะจากขอบบน (ปรับเลขนี้ได้) */
  gap: clamp(20px, 1vw, 50px);     /* ระยะระหว่างข้อความกับโลโก้ */
  overflow: hidden;
  background:  #E6BE8A;
}

/* ชั้นที่ 2: ใส่ภาพ SVG แบบโปร่งแสง */
.chapter04::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: image-set(url("images/other/wall08.svg"));
  background-repeat: repeat;
  background-size: contain;      /* ปรับได้: contain / cover / 100% auto */
  background-position: top center;

  opacity: 0.25;     /* ⭐ ปรับความโปร่งแสงของภาพที่นี่ (0.1–1) */
  z-index: 1;        /* อยู่ใต้ตัวหนังสือ */
}

.section-overlay4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 inset: 0;
  /* ปรับความเข้มได้ .35–.65 ตามใจ */

  pointer-events: none; /* ให้คลิกทะลุ overlay ได้ */
   z-index:2;
}

.btn-online {
   display: inline-block;
  padding: 14px 42px;
  background-color: #E6BE8A;   /* ทอง */
  color: #2b1209;              /* น้ำตาลเข้ม */
  border: 1.2px solid #2B1209;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  transition: all 0.35s ease;
}

.btn-online {
  display: block;       /* ทำให้ปุ่มเป็นบล็อกเต็มบรรทัด */
  width: fit-content;   /* ให้ขนาดพอดีกับข้อความ */
  margin: 0 auto;       /* จัดให้ไปอยู่ตรงกลาง */
  padding: 12px 32px;
  border: 1px solid #2B1209;
  color: #4B1E0A;
  text-decoration: none;
  font-size: 14px;
   font:bold;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
    font-weight: 500;     /* <— ทำให้หนาขึ้น */

}
.btn-online:hover {
  background: #2B1209;
  color: #FADD84; /* สีตัวอักษรเมื่อ hover */
}




/* เนื้อหาข้อความ */
.text04{
  position: relative;            /* เปลี่ยนจาก absolute */
  width: clamp(280px,75%, 800px);/* 70% ของความกว้าง section, สูงสุด 800px */
  margin: 0 auto;                 /* จัดกลาง */
  text-align: center;
   /* ลด padding ล่างให้ชิด */
   margin-top: 20px;
  z-index: 3;
  
}

/* หัวข้อ */
.text04 h2{
 font-size: clamp(28px, 3.2vw, 36px);
  text-align: center;
  line-height: 1.2;
  font: bold;
  font-weight: 700;
  letter-spacing: 0.02em;
   /* text-shadow: 2px 2px 6px rgba(0,0,0,0.7);*/
 color: #512411;               /* สีตัวอักษร */
;
}

/* เนื้อหา */
.text04 p{
  color: #4B1E0A;               /* สีตัวอักษร */
  font-size: clamp(14px, 1.2vw + 0.4rem, 18px);
  line-height : 1.65;
  margin: 10px auto;
  max-width: 70ch;
  opacity: .95;
  text-shadow: #000;
}

/* โลโก้แถวล่าง */
.order-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 50px);
  flex-wrap: wrap;
  z-index: 3;
}

.order-logo{
  width: clamp(64px, 8vw, 100px);
  height: auto;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.order-logo:hover{ transform: scale(1.08); }




/******************** Chapter 04 reservation *****************/
.chapter03 {
  min-height: clamp(800px, 85vh, 1200px);  /* tall on big screens, still OK on small */
  padding: clamp(48px, 7vw, 120px) 20px;   /* more generous vertical padding */
 border-radius: 10px;
 position: relative; z-index: 2;
background:  #2b1209;
}


/* กล่องเนื้อหา */
.reserve-wrap{
  max-width: 1440px;   /* ↑ from 980px so the widget has room to stretch */
  margin: 0 auto;
  text-align: center;
  display: flex;               /* เพิ่ม */
  flex-direction: column;    
  align-items: center;
  justify-content: flex-start;
  gap: 8px; 
}
/* หัวข้อ + คำอธิบาย */
.reserve-title{
font-size: clamp(28px, 3.2vw, 36px);
  text-align: center;
  line-height: 1.2;
  font: bold;
  font-weight: 700;
  letter-spacing: 0.02em;

  /**** Code for strock alphabat ********/
     text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    color: #FADD84;              /* สีตัวอักษร */
}

/* รูปพื้นหลังจางๆ — แยกเลเยอร์ชัดเจน */
/* รูปพื้นหลังจางๆ */
.chapter03::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                    /* อยู่ใต้ข้อความ */
   background-image: url("images/other/wall07.svg");
  opacity: .5;                  /* ความจางของภาพ (ปรับได้ .10–.25) */
   filter: saturate(.9) contrast(1.05); /* แต่งนิดๆให้เนียน */

}
/* ให้คอนเทนต์อยู่เหนือรูปเสมอ */
.reserve-wrap,
.reserve-title,
.reserve-sub{
  position: relative;
  z-index: 1;
}

.reserve-sub{
   color: #FADD84;               /* สีตัวอักษร */    
  margin: 6px 0 8px; 
  font-size: clamp(14px, 1.2vw + 0.4rem, 18px);
  line-height : 1.65;
  letter-spacing: .02em;
  font-weight: 500;
}

.reserve-sub a {
  color: #FFC466;          /* สีเหลืองทอง */
  text-decoration: none;   /* เอาเส้นใต้ทิ้ง */
  font-weight: 600;        /* หนาขึ้นนิดให้เด่น */
}

.reserve-sub a:hover {
  text-decoration: underline; /* ให้มีเส้นใต้ตอน hover */
}




/* เริ่มต้น: โชว์ wide, ซ่อน compact 
#ot-widget-wide   { display:block; }
#ot-widget-compact{ display:none;  }
*/

/*
.reserve-foot {
  text-align: center;
 font-size: clamp(14px, 1.2vw + 0.4rem, 18px);
  line-height : 1.65;
  color: #512411;
  font-weight: 600;
  margin-top: -120px; /* ดึงขึ้นมาใกล้ widget มากขึ้น 
   letter-spacing: .02em;
}*/

/*********************************************/



/***************** Chapter 05 contact **********************/
#contact { scroll-margin-top: 120px; }

.chapter05 {
  max-width: none !important;          /* <-- สำคัญสุด */
  width: 100vw;                        /* กว้างเท่าหน้าจอ */
  margin-left: calc(50% - 50vw);       /* ทำให้กินเต็มขอบซ้าย-ขวา */
  margin-right: calc(50% - 50vw);
  position: relative;
  background: #E6BE8A;
  padding: 100px 20px 120px;           /* คงระยะเดิม */
  z-index: 1;
}

/* ชั้นที่ 2: ใส่ภาพ SVG แบบโปร่งแสง */
.chapter05::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: image-set(url("images/other/wall08.svg"));
  background-repeat: repeat;
  background-size: 80%;      /* ปรับได้: contain / cover / 100% auto */
  background-position: top center;

  opacity: 0.25;     /* ⭐ ปรับความโปร่งแสงของภาพที่นี่ (0.1–1) */
  z-index: 2;        /* อยู่ใต้ตัวหนังสือ */
}

/* เนื้อหาข้อความ */
.text05 {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.35;          /* เดิม 0.75 → อ่านง่ายขึ้น */
}


/* ========== Open Hours layout ========== */
.hours-block {
  max-width: 420px;
  margin: 16px auto 32px;
  /*text-align: left;          /* ให้ตัวหนังสือในบล็อกนี้ชิดซ้าย */
  text-align: center;            /* ให้หัวข้ออยู่กลางบล็อก */
}

.hours-block h3 {
  margin-bottom: 8px;
}

.hours-row {
  display: flex;
  justify-content: space-between;          /* วันซ้าย เวลาไปชิดขวา */
  align-items: baseline;
  gap: 2rem;
  font-size: clamp(14px, 1.2vw + 0.4rem, 18px);
  line-height: 1.7;
}

.hours-row .day {
  font-weight: 700;
}

.hours-row .time {
  white-space: nowrap;                     /* กันเวลาหักบรรทัด */
  text-align: right;
}

.hours-row.closed .time {
  text-transform: capitalize;              /* ให้ Closed ตัวใหญ่สวยๆ */
}

.contact-block {
  margin-bottom: 1rem;
}

.contact-block h3 {
  margin-bottom: 4px;
}


/* หัวข้อ */
.text05 h2{
  color: #512411;
  font-size: clamp(28px, 3.2vw, 36px);
  text-align: center;
  line-height: 1.2;
  font: bold;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}


.text05 h3{
   font-size: clamp(18px, 1.2vw + 0.4rem, 24px);
   line-height : 1.65;
    font-weight: 600;
    font:bold;
  color: #512411;
    letter-spacing: 0.02em;
}

.text05 p{
  font-size: clamp(14px, 1.2vw + 0.4rem, 18px);
   color: #512411;
    margin: 4px 0 14px;   /* more bottom margin under text */
      letter-spacing: 0.02em;
}

/* ← ที่เคยพิมพ์ผิด: ต้องมีจุดหน้าคลาส .text05 */
.text05 p .day  { font-weight: 700; }   /* วันตัวหนา */
.text05 p .time { font-weight: 400; }   /* เวลาเป็นตัวปกติ */


.map-container {
  position: relative;   /* ✅ เพิ่มบรรทัดนี้ */
  margin-top: 80px;
  width: 95%;          /* ให้เกือบเต็มหน้าจอ แต่ยังมีขอบสวย */
  max-width: 1400px;   /* ปรับได้ 1200–1600 */
  margin-left: auto;
  margin-right: auto;
  border: 3px solid #FFD87A;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
   z-index:5; 
}
.map-container iframe {
  position: relative;   /* ✅ เพิ่มบรรทัดนี้ */
  width: 100%;
  height: 500px;   /* ปรับสูงขึ้นนิดนึงให้ดูพรีเมียม */
  border: 0;
   
}



/* ===== Masonry Grid (CSS Grid) ===== */
.gallery-wrap{ max-width:var(--maxw); margin:0 auto 40px; padding:0 16px; }
.memory{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: var(--row);     /* ความสูงพื้นฐานของแถว */
  gap: var(--gap);
}

/* ช่องมาตรฐาน */
.tile{ position:relative; overflow:hidden; border-radius:var(--radius); background:#ddd; cursor:zoom-in; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.tile:hover img{ transform:scale(1.05); }

/* ตัวช่วยขนาด: คูณจำนวนแถว/คอลัมน์ */
.span-2x1{ grid-column: span 2; grid-row: span 1; } /* กว้าง 2 ช่อง */
.span-1x2{ grid-column: span 1; grid-row: span 2; } /* สูง 2 แถว */
.span-2x2{ grid-column: span 2; grid-row: span 2; } /* ใหญ่ */

@media (max-width: 1100px){
  .memory{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .memory{ grid-template-columns: repeat(2, 1fr); }
  :root{ --row: 160px; }
}

/* ===== Lightbox ===== */
.lightbox{
  position: fixed; inset:0; display:grid; place-items:center;
  background: rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  z-index: 999;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lb-frame{
  position:relative; max-width:min(92vw,1200px); max-height:92vh; overflow:hidden;
  border-radius:12px; background:#000;
}
.lb-img{ max-width:100%; max-height:92vh; object-fit:contain; }

/* Buttons */
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background: rgba(0,0,0,.45); color:#fff;
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:22px;
}
.lb-prev{ left:10px; }
.lb-next{ right:10px; }
.lb-close{ top:10px; right:10px; transform:none; width:40px; height:40px; font-size:20px; }
.lb-btn:hover{ background: rgba(255,255,255,.25); }

/***************************** finish index page *****************************************/




/**************************   For menu page *****************************************/
#food, #cocktail, #beerwine, #spirits, #zeroproof {
  scroll-margin-top: calc(var(--header-h) + 16px) !important;
}


.menupage{
  margin-top: -1px;
  padding-top: 0;
  min-height: 100vh;           /* ปรับสูงได้ เช่น 70–100vh */
  display: grid;
  place-items: center;
  position: relative; 
  isolation: isolate;
  overflow: hidden;           /* กันส่วนเกิน */

  /* สีพื้นหลังเข้มโทนร้าน */
  background-color: #2B1209;

  /* ถ้าต้องการใช้ภาพอิฐแทน ให้เปิดบรรทัดด้านล่าง */
  /* background: #4B1E0A url("./images/wallpaper_01_2.png") center / cover no-repeat; */
}

/* =========================
   Overlay เฉียงด้านบน
   ========================= */
.menupage::before {
  content: "";
  position: absolute;
  top:-30px; bottom:-30px; left:-30px; right:-30px;
  background: url("./images/other/wall09.svg")  repeat;
  opacity: 0.1;          /* 👈 ความจางของ overlay */
  z-index: 0;
}

/* ทำให้ข้อความและคอนเทนต์อยู่เหนือ overlay */
.menupage > * {
  position: relative;
  z-index: 1;
}

.menu-tabs{
  display:flex;
  gap: clamp(10px, 1.8vw, 18px);
  justify-content:center;
  flex-wrap: wrap;
  margin: 24px auto 28px;
  padding: 0 8px;
}

.tab-pill{
  display:inline-block;
  padding: 10px 18px;
  background: transparent;
  color: var(--tab-fill);   
  text-decoration:none;
  font: 700 14px/1 "Oswald", "Montserrat", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
 border: 1.5px solid var(--tab-line);
 padding: calc(10px - 1.5px) calc(18px - 1.5px); /* ชดเชยความหนาเส้นให้ขนาดคงเดิม */
}

.tab-pill:hover{ 
  background: var(--tab-fill-h); 
  transform: translateY(-1px);
  color: var(--tab-text);  
}

/* ปุ่มที่เลือก (เหมือนปุ่ม DRINKS ในรูป: โปร่ง + มีกรอบ + ตัวอักษรสว่าง) */
.tab-pill.is-active,
.tab-pill[aria-current="page"]{
  background: var(--tab-fill);
  color: var(--tab-text);
            /* ถ้าพื้นหลังไซต์มืด ตัวหนังสือขาวกำลังดี */
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
  border:none;
}

/* โฟกัสด้วยคีย์บอร์ดให้เห็นชัด */
.tab-pill:focus-visible{
  outline: 2px solid var(--tab-line);
  outline-offset: 2px;
}

/* มือถือ: เลื่อนในแนวนอนได้ */
@media (max-width: 560px){
  .menu-tabs{
    justify-content:flex-start;
    overflow-x:auto;
    padding-inline: 12px;
    scroll-snap-type: x proximity;
  }
  .tab-pill{ scroll-snap-align: start; }
  .menu-tabs::-webkit-scrollbar{ display:none; }
}



/*************** grid ******************/

.menu-wrap{
  width: min(100%, var(--maxw));             /* --maxw ตั้งไว้ 1100px */
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 28px);
}
.menu-grid{
  display: block;                 
  columns: 2;                     
  column-gap: clamp(16px, 3vw, 28px);
}

.menu-grid > *{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
}

/* มือถือ = 1 คอลัมน์ */
@media (max-width: 900px){
  .menu-grid{ columns: 1; }
}

/* ====== PANEL ====== */
/* บล็อกแต่ละแผง/การ์ดอย่าให้ถูกหักครึ่งตอนขึ้นคอลัมน์ใหม่ */
.panel {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: clamp(18px, 2vw, 24px);   /* ลด padding จากเดิมให้แน่นขึ้น */
  background: transparent;
  margin: 0 0 clamp(18px, 2.2vw, 24px);
  border: 0;      
  
}

/*
.panel-title {
  font-weight: 600;
  font-size: clamp(20px, 3vw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FADD84;
  margin: 6px 0 28px;
  text-align: center;
}*/
/* ปรับหัวข้อให้เป็นป้ายทับเส้น คมชัด อ่านง่าย */
/* หัวข้อเป็นป้ายทับเส้น */
.panel-title {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translate(-50%, -55%);
  margin: 0;
  padding: 6px 14px;
  text-align: center;
  font: 700 clamp(16px, 2.2vw, 22px)/1.2 "Oswald", "Montserrat", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2b1209;
  background: #E6BE8A;
  border: 1px solid #FADD84;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/******** Make กรอบสีทอง *******/
/*
.panel--Appetizers {
  border: 2px solid #CE9E3B; /* กรอบทองเฉพาะฝั่งค็อกเทล 
 padding: clamp(28px, 3vw, 36px);
}
*/


/* ไม่ต้องทำ stagger ด้วย margin-top อีกแล้ว */
.panel:nth-child(even) {
 /* margin-top: 24px; */
  margin-top: 0;
 /* ทำให้ฝั่งขวาดูเลื่อนลงนิดนึง (สไตล์ staggered) */
}
/* ====== MENU ITEMS ====== */
.item {
  padding: 14px 0 16px;
  border-radius: 6px;
}

.item + .item {
 border-top: 1px dashed rgba(255,255,255,.12);
}
/* รูปของแต่ละเมนูแบบใหญ่เต็มกล่อง */
.item-img.large{
  width: clamp(96px, 26vw, 110px);
  height: clamp(96px, 26vw, 110px);
  margin-bottom: 10px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(230,190,138,.25) inset;
}

/* หัวข้อ + ราคาเรียงบรรทัดเดียว */
.item-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.item-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: clamp(13px, 1.8vw, 18px); 
  color: #FADD84;
  margin: 0 0 6px;
}

.item-desc {
  color: #b9c0c7;
  margin: 0;
  line-height: 1.6;
  font-size: .98rem; opacity:.85;
}

.item-price {
  font-family: "Cinzel", serif;
  color: #E6BE8A;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 6px;
}


/********** Another Item style ************/
/* ====== Spirits Menu Layout ====== */
#beerwine .item2, #spirits .item2, #zeroproof .item2  {
  display: flex;                       /* จัดให้อยู่แนวนอน */
  justify-content: space-between;      /* แยกชื่อซ้าย – ราคาขวา */
  align-items: center;                 /* ให้อยู่ระดับเดียวกัน */
  padding: 6px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.15); /* เส้นคั่นบางๆ */
}

#beerwine .item-title2, #spirits .item-title2, #zeroproof .item-title2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #FFD87A;
  font-size: clamp(14px, 1.8vw, 18px);
}
#beerwine .item-price2, #spirits .item-price2, #zeroproof .item-price2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: #FFD87A;
  font-size: clamp(14px, 1.8vw, 18px);
  margin-left: 12px;
}

/******** Make กรอบสีทอง ******
.panel--salad {
border: 2px dotted var(--tab-line);   /* เส้นปะสีทอง 
padding: clamp(28px, 3vw, 36px);
color: #CE9E3B;
}
*/
/**************************************************/


/* เส้นคั่นสำหรับขึ้น "หัวข้อใหม่" */
.menu-grid > .section-split {
  position: relative;
  margin-top: clamp(40px, 7vw, 72px);
  padding-top: clamp(18px, 3vw, 28px);
}



#appetizers, #soup, #salad, #entrees, #chef-special, #side {
  scroll-margin-top: clamp(68px, 10vw, 120px);  /* ความสูงเฮดเดอร์ */
}


.menu-section{ display: none; }           /* ซ่อนทุก section ตามเดิม */
.menu-section.active{ display: contents; }/* ทำ wrapper โปร่ง ให้ลูกลง grid ได้ */
.tab-pill.is-active {
  background: var(--tab-fill, #E6BE8A);
  color: var(--tab-text, #2b1209);
  border-color: var(--tab-line, #FADD84);
}


/* ===== Mobile Select for Menu Tabs ===== */
.menu-select-wrap{ display:none; margin:16px 0 8px; position:relative; }
.menu-select-label{ display:block; margin-bottom:8px; font-weight:600; color:#FADD84; }


/* ===== Custom Dropdown (ธีมทอง-น้ำตาล) ===== */
.menu-dd{ position:relative; margin:16px 0 8px; }

.menu-dd__btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-radius:12px;
  border:2px solid #FADD84;        /* กรอบทอง */
  background:#2b1209;              /* น้ำตาลเข้ม */
  color:#FADD84;                   /* ตัวอักษรทอง */
  font-size:16px; font-weight:600; line-height:1.2;
}
.menu-dd__btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(250,221,132,.35); }
.menu-dd__chev{ margin-left:10px; transition:transform .15s ease; }

.menu-dd__list{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  background:#2b1209;
  border:2px solid #FADD84;
  border-radius:12px;
  list-style:none; margin:0; padding:6px;
  max-height:48vh; overflow:auto; z-index:50;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

/* ค่าเริ่มต้น */
.menu-dd__option{
  padding:12px 12px; border-radius:8px; cursor:pointer; user-select:none;
  color:#FADD84;
  background: transparent;      /* โปร่งใสเป็นค่าเริ่มต้น */
}

/* เหลืองเฉพาะตัวที่ hover (เมาส์ชี้อยู่) */
.menu-dd__option:hover{
  background:#FADD84;
  color:#2b1209;
}

/* ตัวที่เป็นค่าที่เลือกอยู่ (ไม่ต้องเหลืองตลอด) – แค่ทำเส้นประให้รู้ว่า current */
.menu-dd__option.is-selected,
.menu-dd__option[aria-selected="true"]{
  /*outline: 1.5px dashed #FADD84;*/
  outline-offset: 2px;
  background: transparent;      /* ไม่เหลืองถ้าไม่ได้ hover */
  color:#FADD84;
}


/* รองรับคีย์บอร์ด/ทัช: โฟกัสให้เหลืองเหมือน hover */
.menu-dd__option:focus{
  background:#FADD84;
  color:#2b1209;
  outline: none;
}

/* หมุนลูกศรตอนเปิด */
.menu-dd[data-open="true"] .menu-dd__chev{ transform:rotate(180deg); }



/* จอแคบ: ซ่อนปุ่มแท็บ โชว์ select */
@media (max-width:500px){
  .menu-tabs{ display:none; }
  .menu-select-wrap{ display:block; }
}

/* Hover effect */
@media (prefers-reduced-motion: no-preference) {
  .item {
    transition: background 0.25s ease;
    border-radius: 6px;
  }
  .item:hover {
    background: rgba(255, 255, 255, 0.03);
  }
}


/************ code for picture in menu ******************/



/* กรอบ overlay เวลารูปถูกคลิก */
.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* รูปขยาย */
.img-lightbox img {
  width: 350px;              /* กว้าง 90% ของจอ */
  height: auto;
  max-height: 90vh;         /* สูงไม่เกินจอ */
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  animation: zoomIn .3s ease forwards;
}

@keyframes zoomIn {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* แสดงตอน active */
.img-lightbox.active {
  opacity: 1;
  visibility: visible;
}

/* cursor */
.enlarge-img img { cursor: zoom-in; }


/***************************** finish Menu page ***********************************/

/*************** footer **************/

.fixed-footer {
  position: fixed;
  left: 0;   
  bottom: 0 ;
  width: 100%;
  background: #612b14; /* เปลี่ยนสีได้ตามธีม */
  color: #fff5d7;
  text-align: center;
  padding:  10px 0;
  font-size: 12px;
  z-index:  9998;
}

.footercontent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* กัน text ตกบรรทัดในจอเล็ก */
  gap: 16px; /* ระยะห่างระหว่างลิงก์ */
  overflow-x: hidden;
  white-space: normal;  /* ให้ตัดบรรทัดถ้าข้อความยาว */
  text-align: center;
  box-sizing: border-box; /* ป้องกัน padding ดันเกินจอ */
    gap: 20px;
     letter-spacing: 0.05em;
}

.footercontent a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
}

.footercontent .linkamap {
text-decoration: underline dotted; /* เส้นปะ */
  text-underline-offset: 3px;       /* ระยะห่างเส้นกับตัวอักษร */
  text-decoration-thickness: 1.5px; /* ความหนาเส้น */
  color: inherit;
}
.footercontent a:hover{
  font-weight: bold;
  color: #FFD87A;
}





/************* For About.html  page ********************/


.aboutpage{
  margin-top: -1px;
  padding-top: calc(var(--header-h) + 40px); /* กันโดน header fixed */
  min-height: 100vh;
  display: block;           /* ไม่ต้อง grid center */
  overflow: visible;        /* สำคัญ */
  position: relative;
  isolation: isolate;
  background-color: #2B1209;
}

/* =========================
   Overlay เฉียงด้านบน
   ========================= */
.aboutpage::before {
  content: "";
  position: absolute;
  top:-30px; bottom:-30px; left:-30px; right:-30px;
  background: url("./images/other/wall04.svg") center/cover no-repeat;
  opacity: 0.25;          /* 👈 ความจางของ overlay */
  z-index: 0;
}

/* ทำให้ข้อความและคอนเทนต์อยู่เหนือ overlay */
.aboutpage > * {
  position: relative;
  z-index: 1;
}

.abouttext02{
  position: relative;    /* ให้อยู่ใน flow */
  margin-top: 0;         /* เอา 500px ออก */
  max-width: 800px;
  padding: 20px;
  margin-inline: auto;   /* กลางหน้า */
  margin-top: 70px;
}

/* หัวข้อใหญ่ ปรับให้ responsive */
.abouttext02 h2 {
  margin-bottom: 24px;
  font-size: clamp(28px, 3.2vw, 36px);
  text-align: center;
  line-height: 1.2;
  font: bold;
  font-weight: 700;
  letter-spacing: 0.02em;

  /**** Code for strock alphabat ********/
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    color: #FADD84;

}

/* เนื้อหา paragraph */
.abouttext02 p {
  color: #faebd7;               /* สีตัวอักษร */
  font-size: clamp(14px, 1.2vw + 0.4rem, 18px);
  line-height : 1.65;
  margin: 10px auto;
  max-width: 70ch;
letter-spacing: .05em;
  margin-bottom: 15px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
/* ===== LANTA: รูปซ้าย + ข้อความขวา ===== */
.about-lanta{
  margin-top: 28px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* กำหนดพื้นที่รูป (ตรงที่วงไว้) */
.about-lanta__photo{
  flex: 0 0 280px;          /* ปรับความกว้างรูปได้ */
}

/* รูปให้เต็มกรอบ + ครอปสวย */
.about-lanta__photo img{
  width: 100%;
  height: 380px;            /* ปรับความสูงได้ */
  object-fit: cover;
  border-radius: 14px;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* โซนข้อความ */
.about-lanta__text{
  flex: 1;
  min-width: 0;
}

/* ระยะห่างบรรทัดของข้อความ LANTA */
.about-lanta__text p{
  margin: 0 0 14px;
}

/* ===== มือถือ: ให้รูปอยู่บน ข้อความอยู่ล่าง ===== */
@media (max-width: 820px){
  .about-lanta{
    flex-direction: column;
  }
  .about-lanta__photo{
    flex-basis: auto;
    width: 100%;
    max-width: 520px;
  }
  .about-lanta__photo img{
    height: 320px;
  }
}








/******* different platform ***********/
@supports (-webkit-touch-callout: none){
  .chapterVideo .video-bg { height: 100%; }
}


@media (max-width: 1024px) {
  #mainHeader .brand-text { margin-top: -40px; }
}


/* มือถือ: ซ่อน navbar โชว์ hamburger */
@media (max-width: 767.98px)
{
  .navbar{ display:none !important; }
  .hamburger{ display:flex !important; }
  #mainHeader .brand-text { margin-top: -30px; }
  .right-icons a i{ font-size: clamp(20px, 6vw, 32px); }

  .chapterAbout::before 
    {
      clip-path: polygon(
        100% 20%,
        0% 0%,
        0% 80%,
        100% 100%);
    }
    #ot-widget-wide   { display:none;  }
    #ot-widget-compact{ display:block; }

    .reserve-foot {
      margin-top: 20px; /* ดึงขึ้นมาใกล้ widget มากขึ้น */
    }
    .chapter04{
      gap: 10px;          /* ระยะระหว่างข้อความกับโลโก้ */
    }
    .order-links {
      flex-direction: column;
      gap: 16px; /* ลดระยะห่างโลโก้ให้พอดีจอมือถือ */
      margin-top: 0px;
    }
    .order-logo {
      max-width: 60px; /* โลโก้เล็กลง */
    }
    .chapter04 .section-overlay {
      background: rgba(145, 73, 22, 0.6); /* สีส้มโปร่งแสง */
      clip-path: polygon(
      10% 0%,
      90% 0%,
      90% 100%,
      10% 100%);
    }  

@media (max-width: 480px){
  #mainHeader .brand-text{ font-size: clamp(16px, 5vw, 24px); }
}
}

/* แท็บเล็ตขึ้นไป: โชว์ navbar ซ่อน hamburger */
@media (min-width: 768px){
  .navbar{ display:flex !important; }
  .hamburger{ display:none !important; }
 

    body.menu-open #mainHeader .logo-wrap,
  body.menu-open #mainHeader .brand-text{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

 /* ซ่อนแผงเมนูด้านขวาทันทีเมื่อเป็นเดสก์ท็อป */
  body.menu-open .menu-overlay{
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(100%) !important;
    pointer-events: none !important;
  }
}


/* มือถือใช้ dropdown, จอกว้างใช้แท็บ */
@media (max-width: 768px){
  .menu-tabs{ display:none; }
  .menu-dd{ display:block;
      margin-bottom: 24px; /* ปรับตามที่อยากให้ห่างมากขึ้น เช่น 32px */
  }
}
@media (min-width: 769px){
  .menu-dd{ display:none; }
}

@supports not (display: contents){
  .menu-section.active{ display: block; }  /* จะไม่หล่นรวมเป็นคอลัมน์เดียว แต่ใช้งานได้ */
}

/* ดันทั้งกล่องเมนูให้พ้นหัวเว็บทุกขนาดจอ */
.menu-wrap{
  padding-top: calc(var(--header-h) + 24px) !important; /* ปรับ +24px ตามสายตา */
}

/* มือถือ/แท็บเล็ต: เผื่อเพิ่มอีกนิด และเว้นช่องให้ปุ่ม dropdown */
@media (max-width:1023.98px){
  .menu-wrap{ padding-top: calc(var(--header-h)) !important; }
  .menu-dd{ margin-top: 8px; }  /* ให้ปุ่มห่างจากเฮดเดอร์ขึ้นอีกนิด */
}