/* Nông Trại Khoai — tương tác mịn (04/10/2026)
   Nạp SAU style.css / doi-tong.css / co-so.css / noi-link.css. Dùng chung cho trang chủ + 2 trang cơ sở.
   Màu chỉ lấy từ biến của trang (rgba(var(--rgb-nhan), …)) nên đổi tông Xanh/Vàng là đổi theo, không gán cứng.
   Đi cùng js/tuong-tac.js. */

/* ============ 1. Vệt sáng hổ phách khi chạm nút đặt bàn / ô nhập ============ */
.btn-dat-ban,
form.dat-ban button[type="submit"]{
  position: relative; overflow: hidden; isolation: isolate;
  transition: box-shadow .25s ease, background-color .2s ease, transform .15s ease;
}
.btn-dat-ban:active,
form.dat-ban button[type="submit"]:active{ transform: scale(.97); }
.btn-dat-ban:focus-visible,
form.dat-ban button[type="submit"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--rgb-nhan), .95), 0 0 20px rgba(var(--rgb-nhan), .5);
}
/* Chỉ máy có chuột mới bật quầng sáng khi rê — trên cảm ứng :hover hay "dính" sau khi chạm */
@media (hover: hover){
  .btn-dat-ban:hover,
  form.dat-ban button[type="submit"]:hover{
    box-shadow: 0 0 0 1px rgba(var(--rgb-nhan), .9), 0 0 18px rgba(var(--rgb-nhan), .5), 0 0 38px rgba(var(--rgb-nhan), .25);
  }
}
/* Vết loang: một vòng sáng mọc ra từ đúng điểm chạm (js/tuong-tac.js tạo, ~0,6 giây rồi tự xoá) */
.vet-sang{
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--rgb-nhan), .8) 0, rgba(var(--rgb-nhan), .38) 45%, transparent 70%);
  transform: scale(0); opacity: .95;
  animation: vet-lan .6s ease-out forwards;
}
@keyframes vet-lan{ to{ transform: scale(1); opacity: 0; } }

/* Ô nhập: viền + quầng sáng lan ra khi chạm vào */
form.dat-ban input,
form.dat-ban select,
form.dat-ban textarea,
.ngay-nut-boc .ngay-nut{
  transition: border-color .25s ease, box-shadow .3s ease;
}
form.dat-ban input:focus,
form.dat-ban select:focus,
form.dat-ban textarea:focus,
.ngay-nut-boc .ngay-nut:focus-visible{
  outline: none;
  border-color: var(--den-ho-phach);
  box-shadow: 0 0 0 3px rgba(var(--rgb-nhan), .22), 0 0 20px rgba(var(--rgb-nhan), .35);
}

/* Chip: nhấn lún xuống một chút như công tắc gỗ */
.chip{ transition: transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.chip:active{ transform: scale(.93); }

/* ============ 2. Nút "Giữ bàn" trên header: bản ngắn cho màn hẹp (khỏi xuống 2 dòng) ============ */
.btn-dat-ban .chu-ngan{ display: none; }
@media (max-width: 520px){
  header.site .btn-dat-ban{
    white-space: nowrap; max-width: none; padding: 8px 14px;
    font-size: .84rem; line-height: 1.2; border-radius: 999px;
  }
  header.site .btn-dat-ban .chu-dai{ display: none; }
  header.site .btn-dat-ban .chu-ngan{ display: inline; }
  /* hai bóng đèn đổi tông + VI/EN + nút đặt bàn phải lọt vào 360px */
  .doi-tong button{ padding: 0 5px; min-width: 28px; }
  .doi-ngon-ngu button{ padding: 6px 8px; }
}

/* ============ 3. Thanh hành động đáy điện thoại: tự lùi xuống khi che chỗ cần dùng ============ */
@media (max-width: 800px){
  .thanh-hanh-dong{ transition: transform .28s ease; }
  /* đang ở khu form đặt bàn: nút "Giữ bàn" thừa và che nút Gửi; đang mở menu: che các mục cuối của menu */
  body.dang-o-form .thanh-hanh-dong,
  body.menu-dang-mo .thanh-hanh-dong{
    transform: translateY(calc(100% + 12px)); pointer-events: none;
  }
}

/* ============ 4. Hero điện thoại: bỏ hai mũi tên (đè lên nút CTA), thay bằng vuốt ngang ============ */
@media (max-width: 800px){
  .hero-mui-ten{ display: none; }
}
/* Chấm trang hero nhỏ 9px khó bấm: nới vùng chạm, không đổi hình */
.hero-dots button{ position: relative; }
.hero-dots button::after{ content: ""; position: absolute; inset: -9px; }

/* ============ 5. Ảnh món kiểu Polaroid (chỉ hiện với món có ảnh trong ANH_MON, js/tuong-tac.js) ============ */
.thuc-don-luoi .mon{ position: relative; }
.mon.co-anh{ cursor: pointer; }
.mon.co-anh h4{
  text-decoration: underline dotted rgba(var(--rgb-nhan), .75);
  text-underline-offset: 5px;
}
.mon.co-anh:focus-visible{ outline: 2px solid var(--den-ho-phach-nhat); outline-offset: 5px; border-radius: 6px; }
.polaroid{
  position: absolute; right: 2px; bottom: calc(100% - 12px); z-index: 20;
  width: 176px; margin: 0; padding: 8px 8px 30px;
  background: #FBF7F0; border-radius: 3px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  transform: rotate(var(--xoay, 0deg)); transform-origin: 75% 100%;
  animation: polaroid-nay .55s cubic-bezier(.34, 1.56, .64, 1) both;
  pointer-events: none;
}
.polaroid img{ display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #2a2018; }
.polaroid figcaption{
  position: absolute; left: 8px; right: 8px; bottom: 7px;
  font-size: .72rem; font-weight: 600; color: #2E2018; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.polaroid.dang-dong{ animation: polaroid-di .18s ease-in forwards; }
@keyframes polaroid-nay{
  from{ opacity: 0; transform: rotate(var(--xoay, 0deg)) scale(.35) translateY(24px); }
  to{   opacity: 1; transform: rotate(var(--xoay, 0deg)) scale(1) translateY(0); }
}
@keyframes polaroid-di{
  to{ opacity: 0; transform: rotate(var(--xoay, 0deg)) scale(.85) translateY(8px); }
}

/* ============ 6. Khu liên hệ trên điện thoại hẹp: email dài làm cột lưới rộng quá 360px (tràn ngang 16px) ============ */
.lien-he-grid > *{ min-width: 0; }
.thong-tin-lien-he li > span:last-child{ min-width: 0; overflow-wrap: anywhere; }

/* ============ Giảm chuyển động: giữ lại quầng sáng tĩnh, bỏ mọi hiệu ứng chuyển động ============ */
@media (prefers-reduced-motion: reduce){
  .vet-sang{ display: none; }
  .btn-dat-ban, form.dat-ban button[type="submit"], .chip, .thanh-hanh-dong,
  form.dat-ban input, form.dat-ban select, form.dat-ban textarea, .ngay-nut-boc .ngay-nut{ transition: none; }
  .btn-dat-ban:active, form.dat-ban button[type="submit"]:active, .chip:active{ transform: none; }
  .polaroid, .polaroid.dang-dong{ animation: none; }
  .doi-tong .cham::before{ animation: none !important; }
}