/* Trang riêng từng cơ sở: /pham-viet-chanh/ và /thao-dien/
   Chỉ chứa phần riêng của 2 trang này — mọi thứ chung (header, nút, form, thẻ địa điểm, dải tin cậy)
   dùng lại từ style.css. Không gán cứng màu: dùng biến + kênh RGB để nút đổi tông Xanh/Vàng vẫn chạy.
   Nền các section luân phiên mặt / nổi / chìm, không hai section liền nhau cùng mức. */

/* ============ Hero ảnh tĩnh ============ */
.cs-hero{
  position:relative; overflow:hidden;
  /* Thấp vừa đủ để dải điểm Google (.dai-tin) ngay dưới hero hiện trọn trong màn hình đầu, cả laptop thấp ~650px. */
  min-height: clamp(360px, 50vh, 460px);
  padding: 0;   /* style.css cho mọi <section> padding dọc ~88px; hero không cần */
  display:flex; align-items:flex-end;
  background: var(--nen-toi-3);
}
.cs-hero-anh{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: var(--vt-d, center 40%);
}
@media (max-width: 800px){ .cs-hero-anh{ object-position: var(--vt-m, center 40%); } }
.cs-hero-phu{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 8%, rgba(var(--rgb-nhan),.28), transparent 65%),
    linear-gradient(180deg, rgba(var(--rgb-chim),.35) 0%, rgba(var(--rgb-chim),.55) 45%, rgba(var(--rgb-chim),.94) 100%);
}
.cs-hero-noidung{ position:relative; z-index:2; width:100%; padding-top:48px; padding-bottom:28px; }   /* hero nằm sau thanh trên + nút gạt cơ sở nên không cần chừa chỗ cho header */
.cs-hero h1{
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height:1.08; max-width: 26ch; margin:0 0 .4em; color: var(--chu-nhat);
}
.cs-hero p.mo-ta{ max-width: 600px; margin: 0 0 14px; font-size:1.05rem; color:#D8C9B8; }
.cs-hero-hang{ margin: 0 0 16px; }
.cs-hero .hero-cta{ justify-content:flex-start; }
.cs-hero .btn-dat-ban, .cs-hero .btn-outline{ min-height:44px; display:inline-flex; align-items:center; }

/* ============ Nền luân phiên ============ */
.cs-gt{ background: var(--nen-mat); }
.cs-kg{ background: var(--nen-noi); }
.cs-an{ background: var(--nen-mat); }
.cs-rv{ background: var(--nen-noi); }
.cs-tt{ background: var(--nen-mat); }   /* .co-so mặc định là --nen-noi, đè lại cho khớp nhịp */
.cs-faq{ background: var(--nen-noi); }
.cs-cheo{ background: var(--nen-mat); padding: 40px 0; border-top:1px solid var(--vien-toi); }

/* ============ Văn bản ============ */
.cs-doan{ max-width: 760px; color: var(--chu-nhat-mo); font-size:1.02rem; }
.cs-doan p, p.cs-doan{ margin: 0 0 16px; }
.cs-doan p:last-child{ margin-bottom:0; }
.cs-hai-cot{ max-width:none; display:grid; grid-template-columns:1fr 1fr; gap: 20px 48px; }
.cs-hai-cot p{ margin:0; }
.cs-link{ margin: 22px 0 0; }
.cs-link .btn-outline{ display:inline-flex; align-items:center; min-height:44px; }

/* ============ Lưới ảnh ============ */
.cs-luoi-anh{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top: 32px;
}
.cs-luoi-anh figure{ margin:0; border-radius:12px; overflow:hidden; background: var(--nen-chim); aspect-ratio: 3 / 4; }
.cs-luoi-anh img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.cs-luoi-anh figure:hover img{ transform: scale(1.03); }

/* ============ Review ============ */
.cs-review-luoi{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:16px; margin-top: 28px;
}
.cs-review{ margin:0; padding: 24px 24px 20px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.cs-review blockquote{ margin:0; font-size:1.02rem; font-style:italic; line-height:1.55; color: var(--chu-nhat); }
.cs-review figcaption{
  font-family:"Roboto Mono",monospace; font-size:.74rem; letter-spacing:.04em; line-height:1.7;
  color: var(--den-ho-phach-nhat);
}
.cs-review figcaption a{ color: var(--chu-nhat-mo); text-decoration:underline; text-transform:none; letter-spacing:0; }
.cs-review .cs-gc{ display:block; color: var(--chu-nhat-mo); font-family:"Be Vietnam Pro",sans-serif; font-size:.75rem; letter-spacing:0; margin-top:2px; }
.cs-nguon{ margin: 18px 0 0; font-size:.78rem; color: var(--chu-nhat-mo); opacity:.75; max-width: 760px; }

/* ============ Giờ mở cửa + đậu xe ============ */
.cs-tt .nhan-so{ margin-bottom: 24px; }
.cs-xe{ padding: 26px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; align-self:start; }
.cs-xe h3{ font-size:1.25rem; margin:0; }
.cs-xe p{ margin:0; color: var(--chu-nhat-mo); }
.cs-xe .btn-xanh{ min-height:44px; display:inline-flex; align-items:center; }
.cs-tt .co-so-nut a{ min-height:44px; display:inline-flex; align-items:center; }

/* ============ FAQ (details/summary, không cần JS) ============ */
.cs-faq-list{ max-width: 820px; margin-top: 24px; }
.cs-faq-muc{ border-bottom:1px solid var(--vien-toi); }
.cs-faq-muc summary{
  list-style:none; cursor:pointer; min-height:48px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 14px 0; font-weight:600; line-height:1.45; color: var(--chu-nhat);
}
.cs-faq-muc summary::-webkit-details-marker{ display:none; }
.cs-faq-muc summary::after{
  content:"+"; flex-shrink:0; font-size:1.4rem; line-height:1; color: var(--den-ho-phach); transition: transform .25s;
}
.cs-faq-muc[open] summary::after{ transform: rotate(45deg); }
.cs-faq-muc summary:focus-visible{ outline:2px solid var(--den-ho-phach-nhat); outline-offset:2px; }
.cs-faq-muc p{ margin:0; padding: 0 0 18px; color: var(--chu-nhat-mo); max-width: 70ch; }

/* ============ Dải chuyển sang cơ sở còn lại ============ */
.cs-cheo-hang{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cs-cheo h3{ font-size:1.15rem; margin:0 0 4px; }
.cs-cheo p{ margin:0; color: var(--chu-nhat-mo); max-width: 56ch; }
.cs-cheo .btn-outline{ display:inline-flex; align-items:center; min-height:44px; }


/* ============ Chip trong form đặt bàn ============
   style.css có luật "form.dat-ban button" (đỏ gạch) mạnh hơn ".chip" nên chip chưa chọn bị tô đỏ — chỉ nút gửi mới được đỏ
   (đỏ gạch dành cho hành động đặt chỗ). Đè lại riêng ở 2 trang cơ sở; trang chủ vẫn còn lỗi này (chưa sửa). */
form.dat-ban .chip{
  background: var(--nen-toi-2); color: var(--chu-nhat-mo);
  border:1px solid var(--kinh-vien); border-radius:999px;
  padding:9px 16px; min-height:44px; font-size:.85rem; font-weight:400;
}
form.dat-ban .chip:hover{ background: var(--nen-toi-2); border-color: var(--den-ho-phach); }
form.dat-ban .chip.active{ background: var(--den-ho-phach); color: var(--nen-chim); border-color: var(--den-ho-phach); font-weight:700; }

/* ============ Mobile ============ */
@media (max-width: 800px){
  .cs-hai-cot{ grid-template-columns:1fr; gap:16px; }
  .cs-luoi-anh{ grid-template-columns: repeat(2, 1fr); gap:8px; }
  .cs-hero{ min-height: 0; }
  .cs-hero-noidung{ padding-top:28px; padding-bottom:20px; }
  .cs-review-luoi{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .cs-hero h1{ max-width:none; }
}