/* Chay An Hương — anhuong.com.vn
   Tông: trắng + xanh lá lợt; xanh logo cho nút; chữ xanh rêu. */
:root {
  --trang: #ffffff;
  --la: #eef6ea;        /* nền xanh lá lợt */
  --la-dam: #d9eacf;    /* viền, chip */
  --xanh: #2e9a63;      /* màu logo — nút chính */
  --xanh-dam: #237a4e;
  --reu: #1e4434;       /* tiêu đề */
  --chu: #33433a;       /* chữ thường */
  --mo: #66766c;        /* chữ phụ */
  --loi: #b0412c;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dau-h: 68px;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dau-h) + 56px + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--trang); color: var(--chu); font: 400 16px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--xanh-dam); }
h1, h2, h3 { font-family: var(--serif); color: var(--reu); font-weight: 500; margin: 0; line-height: 1.2; }
h2 { font-size: clamp(2rem, 4.2vw, 2.75rem); letter-spacing: -0.01em; }
[hidden] { display: none !important; }
.an-di { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.khung { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--mo); }
:focus-visible { outline: 3px solid var(--xanh); outline-offset: 2px; border-radius: 6px; }

/* ---------- nút ---------- */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 9px 20px;
  font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background .15s, color .15s; }
.nut-chinh { background: var(--xanh); color: #fff; }
.nut-chinh:hover { background: var(--xanh-dam); }
.nut-vien { background: transparent; color: var(--reu); border-color: var(--la-dam); }
.nut-vien:hover { border-color: var(--xanh); color: var(--xanh-dam); }
.nut-lon { padding: 13px 28px; font-size: 16px; }
.nut-dai { width: 100%; }
.nut[disabled] { opacity: .6; cursor: progress; }

/* ---------- đầu trang ---------- */
.dau { position: sticky; top: 0; z-index: 20; height: var(--dau-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(20px, calc((100% - 1160px) / 2 + 20px)); background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.dau.cuon { border-bottom-color: var(--la-dam); }
.dau-logo img { height: 44px; width: auto; }
.dau-nav { display: flex; align-items: center; gap: 24px; }
.dau-nav a:not(.nut) { color: var(--reu); text-decoration: none; font-weight: 500; font-size: 15px; }
.dau-nav a:not(.nut):hover { color: var(--xanh-dam); }
.nn { border: 1.5px solid var(--la-dam); background: var(--trang); color: var(--reu); border-radius: 999px; padding: 6px 11px; font: 600 13px/1 var(--sans); cursor: pointer; letter-spacing: .04em; }
.nn:hover { border-color: var(--xanh); }

/* ---------- mở đầu ---------- */
.mo-dau { max-width: 1160px; margin: 0 auto; padding: 40px 20px 72px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.mo-dau h1 img { width: min(420px, 88%); }
.mo-dau-loi { font-size: 18.5px; line-height: 1.65; max-width: 30em; margin: 28px 0 32px; }
.mo-dau-nut { display: flex; flex-wrap: wrap; gap: 12px; }
.mo-dau-dc { margin: 32px 0 0; color: var(--mo); font-size: 15px; }
.mo-dau-dc a { color: var(--reu); font-weight: 600; text-decoration: none; }
.mo-dau-dc a.ban-do { color: var(--mo); font-weight: 400; text-decoration: underline; text-decoration-color: var(--la-dam); text-underline-offset: 3px; }
.mo-dau-anh { margin: 0; position: relative; }
/* khung vòm: dáng ô cửa chùa */
.mo-dau-anh img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 28px 28px; background: var(--la); }
.mo-dau-anh figcaption { position: absolute; left: 24px; bottom: 20px; background: rgba(255,255,255,.92); color: var(--reu);
  font: italic 400 15px/1 var(--serif); padding: 9px 14px; border-radius: 999px; }

/* ---------- lời ngỏ ---------- */
.an-nhien { display: grid; grid-template-columns: 1fr 1fr; background: var(--la); }
.an-nhien img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.an-nhien blockquote { margin: 0; padding: 56px clamp(24px, 6vw, 80px); align-self: center; }
.an-nhien blockquote p { font: italic 400 clamp(1.3rem, 2.4vw, 1.75rem)/1.6 var(--serif); color: var(--reu); margin: 0 0 16px; }
.an-nhien cite { font-style: normal; color: var(--mo); font-size: 15px; }

/* ---------- thực đơn ---------- */
.thuc-don { padding: 88px 0 72px; }
.td-dau { display: grid; grid-template-columns: auto 1fr; gap: 12px 48px; align-items: end; margin-bottom: 28px; }
.td-phu { margin: 0; color: var(--mo); max-width: 38em; }
.loc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 16px 18px; background: var(--la); border-radius: 18px; }
.loc-cau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.loc-nhan { font: italic 400 17px/1 var(--serif); color: var(--reu); margin-right: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--la-dam); background: var(--trang); color: var(--chu);
  border-radius: 999px; padding: 6px 13px 6px 10px; font: 500 14px/1.2 var(--sans); cursor: pointer; }
.chip:hover { border-color: var(--xanh); }
.chip[aria-pressed="true"] { background: var(--reu); border-color: var(--reu); color: #fff; }
.chip[aria-pressed="true"]:not(.chip-r) .ic { opacity: .55; }
.chip[aria-pressed="true"]:not(.chip-r) { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tim input { font: 400 15px/1.2 var(--sans); border: 1.5px solid var(--la-dam); border-radius: 999px; padding: 8px 16px; width: 240px; max-width: 100%; background: var(--trang); color: var(--chu); }
.tim input:focus { outline: none; border-color: var(--xanh); }

.nhom-nav { position: sticky; top: calc(var(--dau-h) + env(safe-area-inset-top, 0px)); z-index: 10; display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none; background: var(--trang); margin: 16px -20px 0; padding: 10px 20px; border-bottom: 1px solid var(--la-dam); }
.nhom-nav::-webkit-scrollbar { display: none; }
.nhom-nav a { flex: none; text-decoration: none; color: var(--mo); font-weight: 500; font-size: 15px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.nhom-nav a:hover { color: var(--reu); }
.nhom-nav a.dang { background: var(--la); color: var(--reu); }

.nhom { padding-top: 48px; }
.nhom-ten { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.nhom-ten h3 { font-size: 1.75rem; }
.nhom-ten span { color: var(--mo); font-size: 14px; }

/* món nổi bật: ảnh chụp lớn */
.noi-bat { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-bottom: 28px; }
.mon-lon { margin: 0; }
.mon-lon img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; background: var(--la); }
.mon-lon .mon-chu { padding-top: 14px; }
/* nhóm chỉ có 1 món nổi bật: ảnh trái, chữ phải */
.noi-bat.mot { grid-template-columns: 1fr; }
.mon-lon:only-child { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.mon-lon:only-child .mon-chu { padding-top: 0; }
.mon-lon:only-child .mon-ten { font-size: 1.5rem; }
.mon-lon:only-child .mon-mo { font-size: 15.5px; }

/* món thường: ảnh tách nền trên nền xanh lợt */
.ds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.mon { display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--la-dam); align-items: start; }
.mon-anh { width: 112px; height: 112px; border-radius: 50%; background: var(--la); display: grid; place-items: center; overflow: visible; }
.mon-anh img { width: 120%; max-width: none; height: auto; max-height: 112%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(30,68,52,.16)); }
.mon.khong-anh { grid-template-columns: 1fr; }
.mon-dong1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mon-ten { font: 600 1.125rem/1.3 var(--serif); color: var(--reu); margin: 0; }
.mon-gia { font: 500 1.0625rem/1.3 var(--serif); color: var(--reu); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mon-gia small { font: 400 13px var(--sans); color: var(--mo); }
.mon-en { font: italic 400 14.5px/1.4 var(--serif); color: var(--mo); margin: 2px 0 6px; }
.mon-mo { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 34em; }
.mon-dau { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dau-nho { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--mo); border: 1px solid var(--la-dam); border-radius: 999px; padding: 2px 9px 2px 6px; }
.dau-nho .ic { width: 15px; height: 15px; }
.dau-nho.r { color: var(--xanh-dam); border-color: #bfdcc9; background: #f3faf5; }
/* viền đứt: món có thành phần này nhưng bếp làm được không có */
.dau-nho.mo { border-style: dashed; border-color: #9fb3a6; }
.chu-thich { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.chu-thich .dau-nho { background: var(--trang); }
.mon-them { margin: 8px 0 0; font-size: 13.5px; color: var(--mo); }
.mon-them b { color: var(--chu); font-weight: 500; }

.lau-them, .nuoc-nhom { background: var(--la); border-radius: 20px; padding: 22px 24px; margin-top: 12px; }
.lau-them h4, .nuoc-nhom h4 { font: 500 1.2rem/1.3 var(--serif); color: var(--reu); margin: 0 0 12px; }
.bang-nho { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 32px; margin: 0; padding: 0; list-style: none; }
.bang-nho li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--la-dam); }
.bang-nho li span i { display: block; font: italic 400 13px/1.3 var(--serif); color: var(--mo); }
.bang-nho li b { font: 500 15px/1.4 var(--serif); color: var(--reu); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nuoc-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nuoc-luoi .nuoc-nhom { margin: 0; }
.nuoc-nhom .bang-nho { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.rong { text-align: center; padding: 56px 0; color: var(--mo); }

/* ---------- đặt bàn ---------- */
.dat-ban { background: var(--la); padding: 88px 0; }
.db-luoi { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.db-gioi p { font-size: 17px; margin: 18px 0; max-width: 26em; }
.db-luu { margin: 0; padding: 0 0 0 18px; color: var(--mo); font-size: 15px; }
.db-luu li { margin: 6px 0; }
.db-the { min-width: 0; background: var(--trang); border-radius: 24px; padding: 28px; border: 1px solid var(--la-dam); }
.db-buoc { margin-bottom: 22px; }
.db-nhan { display: block; font: 500 1.05rem/1.3 var(--serif); color: var(--reu); margin-bottom: 10px; }
.dem { display: inline-flex; align-items: center; border: 1.5px solid var(--la-dam); border-radius: 999px; }
.dem button { width: 44px; height: 44px; border: 0; background: none; font-size: 22px; color: var(--reu); cursor: pointer; border-radius: 50%; }
.dem button:hover { background: var(--la); }
.dem button:disabled { color: var(--la-dam); cursor: default; background: none; }
.dem output { min-width: 40px; text-align: center; font: 600 18px var(--sans); color: var(--reu); }
.ngay-ds { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.ngay { flex: none; width: 74px; scroll-snap-align: start; border: 1.5px solid var(--la-dam); background: var(--trang); border-radius: 14px;
  padding: 8px 4px 7px; text-align: center; cursor: pointer; font-family: var(--sans); color: var(--chu); line-height: 1.25; }
.ngay .t { display: block; font-size: 12.5px; color: var(--mo); }
.ngay .d { display: block; font: 600 17px/1.3 var(--sans); color: var(--reu); }
.ngay .a { display: block; font-size: 11.5px; color: var(--mo); min-height: 1.25em; }
.ngay .a.chay { color: var(--xanh-dam); font-weight: 600; }
.ngay:hover { border-color: var(--xanh); }
.ngay[aria-checked="true"] { background: var(--reu); border-color: var(--reu); }
.ngay[aria-checked="true"] .t, .ngay[aria-checked="true"] .d, .ngay[aria-checked="true"] .a { color: #fff; }
.ngay:disabled { cursor: not-allowed; background: #f6f8f5; border-style: dashed; }
.ngay:disabled .d { color: var(--mo); text-decoration: line-through; }
.gio-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.gio { border: 1.5px solid var(--la-dam); background: var(--trang); border-radius: 12px; padding: 9px 0; font: 500 15px var(--sans); color: var(--reu); cursor: pointer; font-variant-numeric: tabular-nums; }
.gio:hover { border-color: var(--xanh); }
.gio[aria-checked="true"] { background: var(--reu); border-color: var(--reu); color: #fff; }
.gio:disabled { cursor: not-allowed; color: #a8b4ac; text-decoration: line-through; background: #f6f8f5; }
.gio-trong { grid-column: 1 / -1; margin: 0; color: var(--mo); font-size: 14.5px; }
.db-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.o { display: block; margin-bottom: 14px; }
.o span { display: block; font-size: 14px; font-weight: 500; color: var(--reu); margin-bottom: 6px; }
.o span i { font-weight: 400; color: var(--mo); }
.o input, .o textarea { width: 100%; min-width: 0; font: 400 16px/1.4 var(--sans); color: var(--chu); border: 1.5px solid var(--la-dam); border-radius: 12px; padding: 11px 14px; background: var(--trang); resize: vertical; }
.o input:focus, .o textarea:focus { outline: none; border-color: var(--xanh); }
.o input[aria-invalid="true"] { border-color: var(--loi); }
.bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.db-loi { color: var(--loi); font-size: 14.5px; margin: 0 0 12px; }
.db-xong { text-align: center; padding: 40px 28px; }
.db-xong:focus { outline: none; }
.xong-dau { width: 56px; height: 56px; fill: none; stroke: var(--xanh); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 14px; display: block; }
.db-xong h3 { font-size: 1.75rem; margin-bottom: 10px; }
.db-xong p { margin: 0 auto 14px; max-width: 30em; }
#xong-noi-dung { font: 400 1.15rem/1.6 var(--serif); color: var(--reu); }

/* ---------- cuối trang ---------- */
.cuoi { padding: 64px 0 24px; }
.cuoi-luoi { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.cuoi h2 { font-size: 1.75rem; margin-bottom: 12px; }
.cuoi p { margin: 0 0 8px; }
.cuoi .cuoi-ban { color: var(--mo); font-size: 13px; margin: 40px auto 0; }

/* ---------- màn hẹp ---------- */
@media (max-width: 900px) {
  .mo-dau { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; }
  .mo-dau-anh { max-width: 440px; }
  .an-nhien { grid-template-columns: 1fr; }
  .an-nhien img { max-height: 280px; }
  .ds { grid-template-columns: 1fr; }
  .db-luoi { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .td-dau { grid-template-columns: 1fr; }
  .nuoc-luoi { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --dau-h: 60px; }
  .dau-logo img { height: 38px; }
  .dau-nav { gap: 10px; }
  .dau-nav a[href="#lien-he"] { display: none; }
  .mo-dau-loi { font-size: 17px; }
  .thuc-don, .dat-ban { padding: 56px 0; }
  .loc { padding: 14px; }
  .tim, .tim input { width: 100%; }
  .loc-cau:last-child { width: 100%; }
  .mon { grid-template-columns: 84px 1fr; gap: 14px; }
  .mon-anh { width: 84px; height: 84px; }
  .noi-bat { grid-template-columns: 1fr; }
  .mon-lon:only-child { display: block; }
  .mon-lon:only-child .mon-chu { padding-top: 14px; }
  .mon-lon:only-child .mon-ten { font-size: 1.125rem; }
  .db-the { padding: 20px 16px; border-radius: 20px; }
  .db-hai { grid-template-columns: 1fr; gap: 0; }
  .cuoi-luoi { grid-template-columns: 1fr; gap: 20px; }
  .cuoi-luoi img { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}