/* Nông Trại Khoai — Khoai Ruin Bar
   Lấy cảm hứng cấu trúc từ theme nhà hàng dark-mode (nhãn số thứ tự,
   tiêu đề nửa đặc nửa viền, ảnh cắt chéo, accordion, menu dấu chấm dẫn) —
   code tự viết 100%, không dùng lại code/ảnh của theme gốc.
   Nền tối toàn trang, ánh đèn ấm terracotta/hổ phách, nhiều cây xanh. */

:root{
  --nen: #FBF7F0;
  --nen-toi: #17231B;
  --nen-toi-2: #101911;
  --nen-toi-3: #0A100B;
  --chu: #2E2018;
  --chu-nhat: #EAF2E7;
  --chu-nhat-mo: #AFC2AC;
  /* Quy ước màu nhấn:
     --nhan (đỏ gạch) CHỈ dùng cho hành động đặt chỗ (nút Đặt bàn, nút gửi form) và báo lỗi.
     --den-ho-phach (xanh lá) dùng cho nhãn, tab, trạng thái, huy hiệu — không dùng cho nút đặt chỗ. */
  --nhan: #B4482A;
  --nhan-nhat: #D97A5C;
  --den-ho-phach: #5FA85D;
  --den-ho-phach-nhat: #9ED696;
  --xanh-dam: #1E7A46;        /* xanh đủ tương phản trên nền kem của trang thực đơn */

  /* Ba mức nền để phân nhịp khi cuộn — vẫn giữ tông đêm nhưng chênh nhau đủ thấy */
  --nen-mat: #101911;
  --nen-noi: #1A2A1C;
  --nen-chim: #0A100B;
  --vien: #E4D9C8;
  /* Kênh RGB của các màu dùng trong lớp phủ / gradient — doi-tong.css ghi đè để đổi cả tông */
  --rgb-nhan: 95,168,93;
  --rgb-nhan2: 60,120,70;
  --rgb-chim: 10,16,11;
  --rgb-mat: 16,25,17;
  --vien-toi: rgba(var(--rgb-nhan),.20);
  --kinh: rgba(255,255,255,.05);
  --kinh-vien: rgba(255,255,255,.12);
  --the: #FFFFFF;
}

*{ box-sizing: border-box; }
/* Nút và ô nhập không tự kế thừa font của trang — không có dòng này thì rơi về Arial,
   dấu tiếng Việt hiện khác hẳn phần còn lại. */
button, input, select, textarea{ font-family: inherit; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--nen-toi-2);
  color: var(--chu-nhat);
  font-family: "Be Vietnam Pro", sans-serif;
  line-height: 1.6;
}
h1,h2,h3{
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
/* Nhãn nhỏ: dùng Be Vietnam Pro thay Roboto Mono — mono + in hoa làm dấu tiếng Việt chen nhau.
   Roboto Mono giờ chỉ còn cho số, giá và nhãn thuần chữ Latin. */
.nhan-mono{
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
  line-height: 1.9;
  color: var(--den-ho-phach-nhat);
}
a{ color: inherit; }
img{ max-width:100%; display:block; }
.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
section{ padding: 88px 0; scroll-margin-top: 64px; }

/* Nhãn số thứ tự — "01. ── NHÃN" */
.nhan-so{
  display:flex; align-items:center; gap:14px;
  font-weight:600; font-size:.85rem;
  letter-spacing:.07em; text-transform:uppercase; line-height:1.9;
  color: var(--den-ho-phach-nhat); margin-bottom: 18px;
}
.nhan-so .gach{ width:40px; height:1px; background: var(--den-ho-phach); display:inline-block; }
.nhan-so.giua{ justify-content:center; }

/* Tiêu đề nửa đặc nửa viền */
.tieu-de-lon{
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height:1.05;
}
/* Từ nhấn trong tiêu đề: trước đây để chữ rỗng viền 1.5px, dấu tiếng Việt (ề, ị, á…)
   dính vào nét viền nên khó đọc. Đổi sang màu đặc, vẫn tách được hai nửa tiêu đề. */
.tieu-de-lon .vien{ color: var(--den-ho-phach-nhat); }
.giua{ text-align:center; }

/* Ảnh cắt chéo góc */
.anh-cheo{
  clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
  border-radius: 4px;
  overflow:hidden;
}

/* Card kính mờ trên nền tối */
.the-kinh{
  background: var(--kinh);
  border: 1px solid var(--kinh-vien);
  border-radius: 18px;
}

/* Header */
header.site{
  position: sticky; top:0; z-index: 50;
  background: rgba(18,12,8,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--vien-toi);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px; padding: 0 20px;
  max-width: 1440px; margin:0 auto; gap: 24px;   /* gap: logo không bao giờ dính vào menu */
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1rem;
  text-decoration:none; white-space:nowrap;
  color: var(--chu-nhat);
}
.logo .logo-anh-khung{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: var(--the); flex-shrink:0;
}
.logo .logo-anh{ height:21px; width:auto; max-width:none; display:block; }
.logo .badge{
  width:38px; height:38px; border-radius:8px;
  background: var(--den-ho-phach); color: var(--nen-toi-2);
  display:flex; align-items:center; justify-content:center;
  font-family:"Roboto Mono",monospace; font-weight:700;
}
nav.menu-chinh{ display:flex; gap: 20px; }
@media (max-width: 1440px){ nav.menu-chinh{ gap: 16px; } }
nav.menu-chinh a{
  text-decoration:none; font-weight:500; font-size:.88rem;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent;
  color: var(--chu-nhat-mo);
}
nav.menu-chinh a:hover{ border-color: var(--den-ho-phach); color: var(--chu-nhat); }
nav.menu-chinh a.dang-o-day{ border-color: var(--den-ho-phach); color: var(--den-ho-phach-nhat); }
.btn-dat-ban{
  background: var(--nhan); color:#fff; text-decoration:none;
  padding: 9px 20px; border-radius: 999px; font-weight:600; font-size:.9rem;
  white-space: nowrap; display:inline-block;
}
.btn-dat-ban:hover{ background:#9c3a21; }
/* Cụm bên phải header: đổi tông · VI/EN · nút đặt bàn · hamburger */
.nav-phai{ display:flex; align-items:center; gap:12px; }
.hamburger{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--chu-nhat); }

/* Chuyển ngôn ngữ VI / EN */
.doi-ngon-ngu{
  display:flex; align-items:center;
  border:1px solid var(--vien-toi); border-radius:999px; overflow:hidden; flex-shrink:0;
}
.doi-ngon-ngu button{
  background:transparent; border:none; cursor:pointer;
  font-family:"Roboto Mono",monospace; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  color: var(--chu-nhat-mo); padding: 6px 10px; line-height:1;
}
.doi-ngon-ngu button:hover{ color: var(--chu-nhat); }
.doi-ngon-ngu button.active{ background: var(--den-ho-phach); color: var(--nen-toi-2); }

/* ============ HERO SLIDER ============ */
.hero-slider{
  position: relative;
  height: min(88vh, 720px);
  min-height: 480px;
  overflow: hidden;
  background: var(--nen-toi-3);
}
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  opacity:0; transition: opacity 1s ease;
  pointer-events:none;
}
.hero-slide.active{ opacity:1; pointer-events:auto; }
.hero-slide .lop-mau{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 8%, rgba(var(--rgb-nhan),.32), transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(var(--rgb-nhan2),.30), transparent 60%),
    linear-gradient(180deg, rgba(var(--rgb-chim),.55), rgba(var(--rgb-chim),.85));
}
.hero-slide .video-nen{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transform: translateZ(0); /* ép Safari giữ layer render ổn định, tránh video thoát khung khi cuộn */
}
.hero-slide .noi-dung{ position:relative; z-index:2; max-width: 720px; padding: 0 24px; }
.hero-slide .nhan-mono{ color: var(--den-ho-phach-nhat); }
/* Chỉ slide đầu là <h1>; hai slide sau là <h2> để trang chỉ có đúng một H1 — nhưng nhìn y hệt nhau. */
.hero-slide h1, .hero-slide h2{
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  color: var(--chu-nhat);
  font-weight: 800; letter-spacing: -.01em; margin: 0 0 .5em;
}
.hero-slide p.mo-ta{
  max-width: 560px; margin: 0 auto 28px;
  font-size: 1.05rem; color: #D8C9B8;
}
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-outline{
  border: 1.5px solid var(--den-ho-phach); color: var(--den-ho-phach-nhat);
  text-decoration:none; padding: 10px 24px; border-radius: 999px; font-weight:600;
}
.btn-outline:hover{ background: var(--den-ho-phach); color: var(--nen-toi-2); }

/* Sóng chuyển tiếp ở đáy hero — lớp cuối trùng màu nền phần kế tiếp */
.hero-song{
  position:absolute; left:0; right:0; bottom:-1px; z-index:2;
  height: 84px; pointer-events:none;
}
.hero-song svg{ display:block; width:100%; height:100%; }
.hero-song use{ animation: song-troi 25s cubic-bezier(.55,.5,.45,.5) infinite; }
.hero-song .song-2{ fill: rgba(var(--rgb-mat),.5); animation-duration: 12s; animation-delay: -3s; }
.hero-song .song-4{ fill: var(--nen-toi-2);   animation-duration: 22s; animation-delay: -5s; }
@keyframes song-troi{
  0%{ transform: translate3d(-90px,0,0); }
  100%{ transform: translate3d(85px,0,0); }
}
@media (max-width:700px){ .hero-song{ height: 52px; } }
@media (prefers-reduced-motion: reduce){ .hero-song use{ animation:none; } }

.hero-dots{
  position:absolute; left:24px; bottom:28px; z-index:3;
  display:flex; flex-direction:column; gap:10px;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%; border:1.5px solid var(--chu-nhat-mo);
  background:transparent; cursor:pointer; padding:0;
}
.hero-dots button.active{ background: var(--den-ho-phach); border-color: var(--den-ho-phach); }
.hero-mui-ten{
  position:absolute; right:24px; bottom:24px; z-index:3;
  display:flex; gap:10px;
}
.hero-mui-ten button{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--kinh-vien);
  background: var(--kinh); color:#fff; cursor:pointer; font-size:1.1rem;
}
.hero-mui-ten button:hover{ background: var(--den-ho-phach); color:var(--nen-toi-2); border-color:var(--den-ho-phach); }

/* ============ Giới thiệu ============ */
.gioi-thieu-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center;
}
.gioi-thieu-anh{
  height: 340px;
  background: linear-gradient(160deg, var(--nen-toi), rgb(var(--rgb-nhan2)) 55%, var(--den-ho-phach));
  display:flex; align-items:center; justify-content:center;
  font-family:"Roboto Mono",monospace; color:#f0e2cf; font-size:.85rem; text-align:center; padding:16px;
}
.gt-video-wrap{ padding:0; position:relative; overflow:hidden; }
.gt-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity .8s ease;
  transform: translateZ(0);
}
.gt-video.active{ position:relative; opacity:1; }
.gt-video-nhan{ position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2; }
.gt-video-cham{ display:flex; gap:6px; }
.gt-video-cham span{
  width:6px; height:6px; border-radius:50%; background: rgba(234,242,231,.4);
}
.gt-video-cham span.active{ background: var(--den-ho-phach-nhat); }
.diem-noi-bat{ list-style:none; padding:0; margin: 20px 0 0; display:grid; gap:12px; }
.diem-noi-bat li{ display:flex; gap:10px; align-items:flex-start; color: var(--chu-nhat-mo); }
.diem-noi-bat li::before{
  content:"—"; color: var(--den-ho-phach); font-weight:700;
}

/* ============ Vì sao chọn Khoai (accordion) ============ */
.vi-sao{ position:relative; overflow:hidden; background: var(--nen-chim); }
.vi-sao-video-nen{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter: blur(2px) brightness(.55) saturate(1.1);
  transform: scale(1.05) translateZ(0);
}
.vi-sao-phu{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(var(--rgb-chim),.55), rgba(var(--rgb-chim),.85) 60%, rgba(var(--rgb-chim),.95));
}
.vi-sao-noidung{ position:relative; z-index:2; max-width:760px; }
.acc-list{ display:flex; flex-direction:column; }
.acc-item{ border-bottom: 1px solid var(--vien-toi); }
.acc-dau{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 0; color: var(--chu-nhat);
  font-weight:600; font-size:1rem; letter-spacing:0; line-height:1.5;
}
.acc-dau .icon{ font-size:1.3rem; color: var(--den-ho-phach); transition: transform .25s; flex-shrink:0; margin-left:16px; }
.acc-item.mo .acc-dau .icon{ transform: rotate(45deg); }
.acc-noidung{
  max-height:0; overflow:hidden; transition: max-height .3s ease;
  color: var(--chu-nhat-mo); font-size:.92rem;
}
/* max-height do JS đặt theo scrollHeight — đoạn dài trên điện thoại từng bị cắt ở mốc 200px cố định. */
.acc-item.mo .acc-noidung{ max-height: 1200px; }
.acc-noidung p{ padding: 0 0 18px; margin:0; }

/* ============ K1 vs K2 (thanh so sánh kéo được) ============ */
.k1k2{ background: var(--nen-noi); }
.k1k2-mo-ta{ text-align:center; color:var(--chu-nhat-mo); max-width:560px; margin:0 auto 36px; }
.k1k2-compare{
  position:relative; max-width:760px; margin:0 auto;
  height:440px; overflow:hidden; border-radius:16px;
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
  cursor: ew-resize;
}
.k1k2-truoc{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; pointer-events:none; -webkit-user-drag:none; z-index:1;
}
.k1k2-tu-dong .k1k2-sau-boc{ transition: width 1.1s ease; }
.k1k2-tu-dong .k1k2-thanh{ transition: left 1.1s ease; }
.k1k2-sau-boc{
  position:absolute; top:0; left:0; bottom:0; z-index:2; overflow:hidden;
  width:18%; /* JS cập nhật lại bằng px khi kéo/resize */
}
.k1k2-sau{
  position:absolute; top:0; left:0; height:100%; width:760px; /* JS ghi đè bằng chiều rộng khung thật */
  object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none;
}
.k1k2-thanh{
  position:absolute; top:0; bottom:0; z-index:3;
  left:18%; transform: translateX(-50%); /* JS cập nhật lại bằng px */
  width:3px; background: var(--the);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.k1k2-nam{
  width:38px; height:38px; border-radius:50%; background: var(--the);
  color: var(--chu); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.k1k2-nhan{
  position:absolute; top:16px; z-index:4;
  font-family:"Roboto Mono",monospace; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase;
  background: rgba(var(--rgb-chim),.65); color:var(--chu-nhat); padding:6px 12px; border-radius:999px;
  pointer-events:none;
}
.k1k2-nhan-trai{ left:16px; }
.k1k2-nhan-phai{ right:16px; }
.k1k2-so{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:20px;
}
.k1k2-so button{
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--vien-toi);
  background:transparent; color: var(--chu-nhat-mo); cursor:pointer;
  font-family:"Roboto Mono",monospace; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}
.k1k2-so button:hover{ border-color: var(--den-ho-phach-nhat); color: var(--chu-nhat); }
.k1k2-so button.active{ background: var(--den-ho-phach); border-color: var(--den-ho-phach); color: var(--nen-toi-2); font-weight:700; }
@media (max-width:700px){
  .k1k2-compare{ height:340px; }
}

/* ============ Không gian quán (ảnh + video giả) ============ */
.khong-gian{ position:relative; padding:0; }
.khong-gian-anh{
  height: 460px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(var(--rgb-nhan),.28), transparent 60%),
    linear-gradient(160deg, var(--nen-chim), var(--nen-noi) 60%, var(--nen-chim));
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.khong-gian-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform: translateZ(0);
}
.khong-gian-anh::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(var(--rgb-chim),.35), rgba(var(--rgb-chim),.6));
}
.khong-gian-nhan{ z-index:2; }
.nut-play{
  width:90px; height:90px; border-radius:50%;
  border:1.5px dashed var(--den-ho-phach-nhat);
  display:flex; align-items:center; justify-content:center;
  color: var(--chu-nhat); font-family:"Roboto Mono",monospace;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; text-align:center;
  cursor:pointer; background: rgba(18,12,8,.4);
}
.khong-gian-nhan{
  position:absolute; top:32px; left:0; right:0; text-align:center;
}
.khong-gian-luoi{
  display:grid; grid-template-columns: repeat(3,1fr); gap:4px;
}
.khong-gian-luoi img{
  aspect-ratio: 1/1; width:100%; height:100%; object-fit:cover; display:block;
}

/* ============ Thực đơn — dạng dấu chấm dẫn ============ */
.thuc-don-tabs{
  display:flex; gap:10px; justify-content:center; margin-bottom: 40px; flex-wrap:wrap;
}
.tab-btn{
  font-family:"Roboto Mono",monospace; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.04em;
  background: transparent; border:1px solid var(--kinh-vien); color: var(--chu-nhat-mo);
  padding: 8px 18px; border-radius: 999px; cursor:pointer;
}
.tab-btn.active, .tab-btn:hover{ background: var(--den-ho-phach); color: var(--nen-chim); border-color: var(--den-ho-phach); }
.thuc-don-luoi{
  display:grid; grid-template-columns: repeat(2,1fr); gap: 8px 40px;
}
.mon{ padding: 16px 0; border-bottom: 1px solid var(--vien-toi); }
.mon .mon-dong{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mon h4{
  margin:0; font-size:1rem; text-transform:uppercase; letter-spacing:.02em;
  color: var(--chu-nhat); overflow-wrap:anywhere;
}
.mon .dan{
  flex:1 1 20px; min-width:20px; border-bottom: 1px dotted var(--kinh-vien); transform: translateY(-5px);
}
.mon .gia{
  font-family:"Roboto Mono",monospace; font-weight:700; color: var(--den-ho-phach-nhat);
  white-space:nowrap;
}
.mon p{ margin: 4px 0 0; font-size:.85rem; color: var(--chu-nhat-mo); font-style: italic; }
.ghi-chu-thuc-don{ text-align:center; margin-top:32px; font-size:.85rem; color: var(--chu-nhat-mo); }
.ghi-chu-thuc-don a{ color: var(--den-ho-phach-nhat); }

/* ============ Trích dẫn khách hàng (slider 4 review thật) ============ */
.trich-dan{ background: var(--nen-noi); text-align:center; }
.trich-dan-slider{ position:relative; max-width:680px; margin:0 auto; min-height:180px; }
.trich-dan-slide{
  position:absolute; inset:0; opacity:0; pointer-events:none; transition: opacity .6s ease;
}
.trich-dan-slide.active{ opacity:1; pointer-events:auto; position:relative; }
.trich-dan blockquote{
  position:relative; max-width:640px; margin: 0 auto; font-size:1.3rem; font-style:italic;
  color: var(--chu-nhat); line-height:1.5;
}
.trich-dan blockquote::before{
  content:"“"; position:absolute; top:-70px; left:50%; transform:translateX(-50%);
  font-size:9rem; font-family:Georgia,serif; color: var(--vien-toi); z-index:0; line-height:1;
}
.trich-dan cite{
  display:block; margin-top:20px; font-style:normal;
  font-family:"Roboto Mono",monospace; font-size:.8rem; color: var(--den-ho-phach-nhat);
  text-transform:uppercase; letter-spacing:.05em;
}
.trich-dan cite a{ color: var(--chu-nhat-mo); text-decoration:underline; text-transform:none; letter-spacing:0; }
.trich-dan-dots{ display:flex; gap:8px; justify-content:center; margin-top:28px; }
.trich-dan-dots button{
  width:8px; height:8px; border-radius:50%; border:1.5px solid var(--chu-nhat-mo);
  background:transparent; cursor:pointer; padding:0;
}
.trich-dan-dots button.active{ background: var(--den-ho-phach); border-color: var(--den-ho-phach); }
.trich-dan .ghi-chu-mau{ margin-top:12px; font-size:.75rem; color: var(--chu-nhat-mo); opacity:.7; }

/* ============ Instagram ============ */
.instagram-luoi{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 16px;
}
.instagram-dang-tai{ grid-column: 1/-1; text-align:center; color: var(--chu-nhat-mo); font-size:.9rem; }
.instagram-the{
  position:relative; display:block; text-decoration:none; color:#fff;
  border-radius: 4px; overflow:hidden; aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--nen-noi), rgb(var(--rgb-nhan2)));
}
.instagram-the img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
}
.instagram-the .khong-anh{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Roboto Mono",monospace; font-size:.75rem; color:#f0e2cf; padding: 16px; text-align:center;
}
.instagram-the .nhan-loai{
  position:absolute; top:10px; left:10px;
  background: rgba(18,12,8,.75); color:#fff;
  font-family:"Roboto Mono",monospace; font-size:.68rem; text-transform:uppercase;
  padding: 3px 8px; border-radius: 999px; letter-spacing:.04em;
}
.instagram-the .chu-thich{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
  padding: 24px 12px 10px; font-size:.8rem; line-height:1.35;
}
@media (max-width: 800px){
  .instagram-luoi{ grid-template-columns: repeat(2,1fr); }
}

/* ============ Cơ sở + bản đồ ============ */
.co-so{ background: var(--nen-noi); color: var(--chu-nhat); }
.co-so .nhan-mono{ color: var(--den-ho-phach-nhat); }
.co-so-luoi{
  display:grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 40px;
}
.co-so-the{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.co-so-ban-do-tinh{ display:block; aspect-ratio: 2 / 1; background: var(--nen-chim); }
.co-so-ban-do-tinh img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.co-so-ban-do-tinh:hover img{ transform: scale(1.03); }
.co-so-than{ padding: 22px 26px 26px; display:flex; flex-direction:column; flex:1; }
.co-so-tieude{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.co-so-the h3{ font-size:1.25rem; margin:0; }
.co-so-the .dia-chi{ font-size:.92rem; color:#e7d9c5; margin: 0 0 14px; }

/* Trạng thái mở cửa: xanh = đang mở, xám = đã đóng (đỏ gạch chỉ dành cho hành động đặt chỗ) */
.trang-thai{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:.78rem; font-weight:700; padding: 4px 11px; border-radius:999px;
  background: rgba(255,255,255,.08); color: var(--chu-nhat-mo);
}
.trang-thai:empty{ display:none; }
.trang-thai::before{ content:""; width:8px; height:8px; border-radius:50%; background: currentColor; }
.trang-thai.mo{ background: rgba(var(--rgb-nhan),.18); color: var(--den-ho-phach-nhat); }

.gio-mo{ width:100%; border-collapse:collapse; margin: 0 0 20px; font-size:.92rem; }
.gio-mo th{ text-align:left; font-weight:500; color: var(--chu-nhat-mo); padding: 9px 12px 9px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.gio-mo td{ text-align:right; font-weight:600; color: var(--chu-nhat); padding: 9px 0; border-bottom:1px solid rgba(255,255,255,.08); font-variant-numeric: tabular-nums; white-space:nowrap; }
.co-so-nut{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
.btn-xanh{
  background: var(--den-ho-phach); color: var(--nen-chim); text-decoration:none;
  padding: 10px 22px; border-radius:999px; font-weight:700; font-size:.92rem;
}
.btn-xanh:hover{ background: var(--den-ho-phach-nhat); }
.ghi-chu-ban-do{ margin: 14px 0 0; text-align:center; font-size:.75rem; color: var(--chu-nhat-mo); }
.ghi-chu-ban-do a{ color: inherit; }

/* ============ Liên hệ / đặt bàn ============ */
.lien-he-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.thong-tin-lien-he ul{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.thong-tin-lien-he li{ display:flex; gap:12px; }
.thong-tin-lien-he .nhan-mono{ min-width: 90px; }
.thong-tin-lien-he a{ color: var(--den-ho-phach-nhat); text-decoration: underline; }
/* Nút Zalo: giữ xanh thương hiệu Zalo (không đổi theo --nhan/tông màu, để khách nhận ra ngay đây
   là kênh Zalo) nhưng bo tròn viên thuốc như mọi nút khác của Khoai (btn-dat-ban, btn-xanh, btn-outline). */
.thong-tin-lien-he a.nut-zalo{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px;
  background:#0068FF; color:#fff; text-decoration:none; font-weight:700; font-size:.92rem;
  padding:12px 22px; border-radius:999px; min-height:44px;
}
.thong-tin-lien-he a.nut-zalo:hover{ background:#0052CC; }
.thong-tin-lien-he a.nut-zalo:focus-visible{ outline:2px solid var(--den-ho-phach-nhat); outline-offset:3px; }
form.dat-ban{
  background: var(--kinh); border:1px solid var(--kinh-vien); border-radius:18px; padding: 28px;
  display:grid; gap:14px;
}
form.dat-ban label{ font-size:.85rem; font-weight:600; display:block; margin-bottom:6px; }
form.dat-ban input, form.dat-ban select, form.dat-ban textarea{
  width:100%; padding: 12px 14px; border-radius:10px; border:1px solid var(--kinh-vien);
  font-family:"Be Vietnam Pro",sans-serif; font-size:1rem; background: var(--nen-toi-2);
  color: var(--chu-nhat);
}
.hang-doi{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* Chip dùng chung: số khách (2/3/4/5/6+) và ngày nhanh (Hôm nay/Ngày mai/Khác) trong form đặt bàn. */
.chip-nhom{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.chip{
  font-family:"Roboto Mono",monospace; font-size:.85rem; letter-spacing:.02em;
  background: var(--nen-toi-2); border:1px solid var(--kinh-vien); color: var(--chu-nhat-mo);
  padding:9px 16px; border-radius:999px; cursor:pointer; min-height:38px;
}
.chip:hover{ border-color: var(--den-ho-phach); }
.chip.active{ background: var(--den-ho-phach); color: var(--nen-chim); border-color: var(--den-ho-phach); font-weight:700; }
#ngayChip .chip{ font-family:"Be Vietnam Pro",sans-serif; } /* "Hôm nay/Ngày mai/Khác" có dấu — không dùng mono */
.ngay-gio{ display:flex; gap:8px; }
.ngay-gio > *{ flex:1; min-width:0; }
/* Bàn phím số thay vì QWERTY khi bấm vào giờ trên điện thoại — input[type=time] vẫn có bàn phím riêng
   ở hầu hết trình duyệt di động, dòng này chỉ để chắc chắn ở nơi không hỗ trợ. */
.ngay-gio input[type="time"]{ font-variant-numeric: tabular-nums; cursor:pointer; }
/* Icon đồng hồ mặc định màu tối, chìm hẳn trên nền ô nhập tối của form — đảo màu cho sáng lên
   để khách thấy rõ có thể bấm vào đó mở bảng chọn giờ. */
.ngay-gio input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.6);
  cursor: pointer;
  padding: 4px;
}
/* Ô ngày: bỏ hẳn phần gõ dd/mm/yyyy (khách hay gõ nhầm, icon lịch mặc định lại rất nhỏ) — thay bằng
   một nút to full-width, chạm đâu cũng mở được lịch. Input <date> thật vẫn ở đây để giữ giá trị và
   validate required, chỉ trong suốt và nằm khít sau nút (xem ganChonNgayDatBan() trong js/main.js). */
.ngay-nut-boc{ position:relative; }
.ngay-nut-boc input[type="date"]{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; opacity:0; pointer-events:none;
}
/* Chọn selector 2 lớp (.ngay-nut-boc .ngay-nut) để chắc chắn thắng luật "form.dat-ban button" bên
   dưới — luật đó tô nút Gửi màu đỏ gạch, nếu chỉ dùng .ngay-nut (1 lớp) sẽ bị đè thành nút đỏ. */
.ngay-nut-boc .ngay-nut{
  width:100%; height:100%; min-height:46px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background: var(--nen-toi-2); border:1px solid var(--kinh-vien); border-radius:10px;
  color: var(--chu-nhat); font-family:"Be Vietnam Pro",sans-serif; font-size:.95rem; font-weight:400;
  cursor:pointer; padding:12px 14px; white-space:nowrap;
}
.ngay-nut-boc .ngay-nut svg{ color: var(--den-ho-phach-nhat); flex-shrink:0; }
.ngay-nut-boc .ngay-nut:hover{ border-color: var(--den-ho-phach); }
.ngay-nut-boc .ngay-nut:focus-visible{ outline:2px solid var(--den-ho-phach-nhat); outline-offset:2px; }
form.dat-ban button{
  background: var(--nhan); color:#fff; border:none; padding: 14px; border-radius:12px;
  font-weight:700; font-size:1rem; cursor:pointer; font-family:"Be Vietnam Pro",sans-serif;
}
form.dat-ban button:hover{ background:#9c3a21; }
.thong-bao{ font-size:.85rem; padding:10px 14px; border-radius:10px; display:none; }
.thong-bao.hien{ display:block; }
.thong-bao.ok{ background: rgba(30,122,70,.2); color:#7ED9A0; }
.thong-bao.loi{ background: rgba(180,72,42,.2); color: var(--nhan-nhat); }

/* ============ Footer tối giản ============ */
footer.site{
  background: var(--nen-toi-3); color: var(--chu-nhat);
  padding: 48px 0 28px; text-align:center; font-size:.85rem;
}
footer.site .logo-dau-khung{
  width:126px; height:126px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: var(--the); margin: 0 auto 20px;
}
footer.site .logo-dau{ height:58px; width:auto; max-width:none; display:block; }
footer.site .mang-xa-hoi{ display:flex; gap:24px; justify-content:center; margin: 8px 0 24px; }
footer.site .mang-xa-hoi a{
  text-decoration:none; color: var(--chu-nhat-mo);
  text-transform:uppercase; letter-spacing:.05em; font-size:.8rem;
}
footer.site .mang-xa-hoi a:hover{ color: var(--den-ho-phach-nhat); }
footer.site .ban-quyen{ color: var(--chu-nhat-mo); font-size:.78rem; }

/* Mobile */
@media (max-width: 800px){
  .gioi-thieu-grid, .co-so-luoi, .lien-he-grid{ grid-template-columns: 1fr; }
  .thuc-don-luoi{ grid-template-columns: 1fr; }
  .hang-doi{ grid-template-columns: 1fr; }
  .khong-gian-luoi{ grid-template-columns: repeat(2,1fr); }
  section{ padding: 56px 0; }
  .hero-slider{ height: 78vh; }
}

/* ============ Phân nhịp nền giữa các cụm section ============
   Trước đây cả 9 section chỉ dùng hai màu gần giống nhau (#101911 / #17231B),
   cuộn một lúc là mất phương hướng. Giờ luân phiên 3 mức: mặt / nổi / chìm. */
.gioi-thieu{ background: var(--nen-mat); }
.khong-gian{ background: var(--nen-chim); }
.thuc-don{ background: var(--nen-mat); }
.instagram{ background: var(--nen-mat); }
.lien-he{ background: var(--nen-chim); }

/* Dải tin cậy ngay dưới hero: rating · số đánh giá · Since 2015.
   Nền = --nen-toi-2, đúng màu lớp sóng cuối của hero nên không lộ đường nối. */
.dai-tin{
  background: var(--nen-toi-2);
  border-bottom: 1px solid var(--vien-toi);
  padding: 4px 20px 26px;
}
.dai-tin-luoi{
  list-style:none; margin:0 auto; padding:0; max-width: 860px;
  display:grid; grid-template-columns: repeat(3, 1fr);
}
.dai-tin-luoi li{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-align:center; padding: 4px 10px;
}
.dai-tin-luoi li + li{ border-left: 1px solid var(--vien-toi); }
.dai-tin-luoi b{
  font-size: 1.35rem; font-weight:800; line-height:1.2; color: var(--chu-nhat);
  white-space:nowrap; font-variant-numeric: tabular-nums;
}
.dai-tin-luoi .sao{ color: var(--den-ho-phach-nhat); }
.dai-tin-luoi li > span{ font-size:.82rem; color: var(--chu-nhat-mo); line-height:1.35; }
@media (max-width:520px){
  .dai-tin{ padding: 0 8px 20px; }
  .dai-tin-luoi li{ padding: 4px 6px; }
  .dai-tin-luoi b{ font-size: 1.1rem; }
  .dai-tin-luoi li > span{ font-size:.72rem; }
}

/* Dải ảnh ngang full-width ngăn giữa các cụm */
.dai-ngan{
  position:relative; height: 220px; overflow:hidden;
  background: var(--nen-chim);
}
.dai-ngan img{ width:100%; height:100%; object-fit:cover; }
.dai-ngan::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(var(--rgb-chim),.55), rgba(var(--rgb-chim),.15) 45%, rgba(var(--rgb-chim),.55));
}
@media (max-width:700px){ .dai-ngan{ height: 130px; } }


/* Bảy mục IN HOA + nút đổi tông + VI/EN + "Giữ bàn tối nay" chỉ đủ chỗ từ ~1260px; hẹp hơn thì gập vào hamburger. */
@media (max-width: 1260px){
  nav.menu-chinh{
    position:absolute; top:100%; left:0; right:0;
    background: var(--nen-toi-2); flex-direction:column; gap:0;
    border-bottom:1px solid var(--vien-toi);
    display:none;
  }
  nav.menu-chinh.mo{ display:flex; }
  nav.menu-chinh a{ padding: 14px 20px; border-bottom:1px solid var(--vien-toi); }
  .hamburger{ display:block; }
}

/* ============ Mobile ============ */
.thanh-hanh-dong{ display:none; }
@media (max-width: 800px){
  .nav-wrap{ padding: 0 14px; }
  .btn-dat-ban{ padding: 8px 15px; font-size:.86rem; }
  .doi-ngon-ngu button{ padding: 6px 9px; }

  /* Thanh hành động cố định đáy màn hình: Gọi (25%) · Chỉ đường (25%) · Giữ bàn tối nay (50%, màu nhấn) */
  .thanh-hanh-dong{
    display:grid; grid-template-columns: 1fr 1fr 2fr; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(var(--rgb-chim),.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--vien-toi);
  }
  .thanh-hanh-dong a{
    display:flex; align-items:center; justify-content:center;
    min-height:48px; padding:0 6px; border-radius:12px; text-decoration:none;
    border:1px solid var(--vien-toi); color: var(--chu-nhat);
    font-size:.88rem; font-weight:600; line-height:1.2; text-align:center;
  }
  /* Nút đặt bàn: màu nhấn đỏ gạch (--nhan chỉ dành cho hành động đặt chỗ), chữ to hơn, chiếm 2 phần */
  .thanh-hanh-dong .tha-datban{ background: var(--nhan); border-color: var(--nhan); color:#fff; font-weight:800; font-size:1rem; }
  body{ padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px){
  .logo{ font-size:0; gap:0; }          /* chỉ còn huy hiệu tròn, nhường chỗ cho VI/EN + Giữ bàn tối nay */
  .logo .logo-anh-khung{ font-size:1rem; }
  .nav-phai{ gap:6px; }
  /* "Giữ bàn tối nay" dài hơn "Đặt bàn" cũ: xuống 2 dòng trong nút nhỏ để header 360–390px không tràn ngang */
  header.site .btn-dat-ban{
    white-space:normal; max-width:80px; text-align:center;
    padding:5px 10px; font-size:.78rem; line-height:1.15; border-radius:14px;
  }
}