/* Trang Đặt bàn — mọi con số dưới đây đo trực tiếp trên ảnh bản present Figma
   (node 4029:43139) chụp 1:1 ở khung 1920x3691. Các mốc dọc chính:

     0     mép trên khung          1152  đáy ảnh hero
     79    gạch dưới header         548  đỉnh phiếu (mép xé)
     796   kẻ dưới đầu phiếu       1842  đáy phiếu (mép xé)
     901 / 1006 / 1111  kẻ ngăn hàng biểu mẫu
     1380  vạch 5px trên khối ghi chú
     1537  kẻ trên dòng nhắc SMS
     1638..1725  nút "XÁC NHẬN ĐẶT BÀN"
     1922  mép trên khối câu hỏi thường gặp
     2385  dải vàng mở đầu khối đánh giá

   Đừng đổi những số này bằng cảm giác — chụp lại bản present rồi đo. */

/* ---- Hero ---- */
.hero-reservation { position: relative; min-block-size: 1152px; }
/* Ảnh gốc sáng hơn hẳn những gì bản present hiện ra: khớp hồi quy trên vùng ảnh
   không bị phiếu che ra đúng một lớp phủ #412E1E ở 70% (hệ số 0.302 đều cả ba
   kênh). Đặt lớp phủ bằng ::after chứ không sửa vào file ảnh, để còn dùng lại
   ảnh gốc ở chỗ khác. */
.hero-reservation__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-reservation::after {
    content: ""; position: absolute; inset: 0;
    background: color-mix(in srgb, var(--brand-4) 70%, transparent);
}
.hero-reservation__body {
    position: relative; z-index: 1;
    text-align: center; color: var(--brand-2);
    padding-block-start: 233px;
    display: grid; gap: 27px; justify-items: center;
}
/* Đo trên bản present: chữ dẫn cao 32px nét Light (Be Vietnam Pro 300) — cùng
   một chuỗi dựng ở 32/300 ra đúng 926px bề ngang mực như ảnh. Để 13px như cũ
   thì nó nhỏ bằng một phần ba thiết kế. */
.hero-reservation__lead { font-size: 32px; line-height: 40px; font-weight: 300; }
/* Nút hero: hộp 140x49, nền kem đặc, chữ nâu 20px. */
.hero-reservation__cta {
    inline-size: 140px; block-size: 49px; justify-content: center; padding: 0;
    font-size: 20px; line-height: 20px;
    /* Khoảng cách tới dòng dẫn rộng hơn khoảng cách giữa tiêu đề và dòng dẫn
       (đo được 41 so với 33), nên không dùng chung gap của lưới. */
    margin-block-start: 12px;
}

/* ---- Phiếu giữ chỗ ---- */
.ticket {
    position: relative; z-index: 2;
    /* Phiếu rộng 767, mép trái x=576 → canh giữa khung 1920; đỉnh phiếu y=548
       trong khi hero cao 1152 nên đè lên hero 604px. */
    width: min(100% - var(--sp-40) * 2, 767px);
    margin: -604px auto 0;
    /* Đệm ngang bằng 0: từng khối bên trong tự đặt lấy đệm của mình, nhờ vậy các
       đường kẻ ngang chạy TRỌN bề ngang phiếu đúng như bản present (đo được
       576…1342, không hụt hai bên). Đệm dọc chừa chỗ cho mép xé. */
    padding: 79px 0 117px;
    /* Tờ giấy có mép xé cả trên lẫn dưới: hai dải SVG neo vào hai đầu, phần giữa
       là màu giấy trơn. Màu giấy phải là GRADIENT chỉ cao (100% - 36px) chứ
       không phải nền đặc phủ cả thẻ — nền đặc sẽ lấp kín khoảng trong suốt phía
       trên đường xé và làm mép rách tàng hình.

       Dải xé cao ĐÚNG 25 (trên) và 12 (dưới): đó là biên độ đo được của vết xé
       trên ảnh bản present. 52/117 của bản trước là chiều cao NODE trong Figma,
       phần lớn là khoảng trong suốt, nên đáy phiếu bị hụt gần 100px.

       Màu giấy của phiếu là #FFFDF9, sáng hơn --surface-paper (#FBF7EF) một
       nhịp — đọc thẳng điểm ảnh giữa phiếu trên bản present. */
    background:
        url("/img/reservation/nen-giay-rach.svg") top center / 100% 25px no-repeat,
        url("/img/reservation/nen-giay-rach-duoi.svg") bottom center / 100% 12px no-repeat,
        linear-gradient(#FFFDF9, #FFFDF9)
            top 24px center / 100% calc(100% - 36px) no-repeat;
    display: grid;
}
.ticket--done { margin-block-start: var(--sp-120); }

/* Đầu phiếu và lưới biểu mẫu thụt vào 40 so với mép phiếu (nội dung ở x=616 khi
   mép phiếu ở 576); các khối phía dưới chỉ thụt 16 (x=592). */
.ticket__head {
    padding: 0 40px 37px;
    border-block-end: 1px solid var(--brand-4);
    display: flex; justify-content: space-between; align-items: flex-start;
}
.ticket__head > * { display: grid; gap: 8px; }
/* Cột mã phiếu canh ĐÁY: trong bản present "2690" nằm ngang hàng với "CƠM LỆ" và
   "MÃ PHIẾU" ngang hàng với dòng "VỊ ẤM GIA ĐÌNH…", tức khối phải tụt xuống một
   dòng so với khối trái. Canh theo đỉnh (cách dựng cũ) làm nó cao hơn 40px. */
.ticket__code { text-align: end; align-self: flex-end; }
/* Không giãn chữ: đo bề ngang mực của "PHIẾU GIỮ CHỖ" (151), "VỊ ẤM GIA ĐÌNH -
   HÀ NỘI- 2026" (319) và "MÃ PHIẾU" (95) đều khớp cỡ 20px với letter-spacing 0.
   Để .08em như cũ thì mỗi dòng dài thêm 13–20px. */
.ticket__kicker, .ticket__sub { color: var(--brand-4); }
/* Nhãn ô nhập trong phiếu KHÔNG giãn chữ: "HỌ VÀ TÊN" đo được 78px bề ngang mực,
   .08em của .field__label kéo nó lên 95. Cùng lỗi ở "Khung giờ mong muốn" và
   "Ghi chú đặc biệt". */
.ticket .field__label { letter-spacing: normal; }
.ticket__brand, .ticket__code .t-h2 { font-family: var(--font-display); letter-spacing: .04em; }

.ticket__errors:empty { display: none; }
.ticket__errors { color: var(--status-error); padding-inline: 40px; }

/* Lưới hai cột có VẠCH KẺ NGĂN Ô: vạch dọc chạy giữa hai cột, vạch ngang nối
   liền hết bề ngang phiếu. Toạ độ đo được: nhãn trái x=616 rộng 303, nhãn phải
   x=1000 rộng 303, vạch dọc ở 959.5 = tâm khung. Vì thế KHÔNG dùng column-gap
   (khe rỗng thì vạch nằm ở mép khe, lệch 40px) mà cho khe bằng 0 rồi đẩy chữ ra
   bằng đệm hai bên vạch. */
.ticket__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
/* Số đo một hàng: 105px trọn vẹn (kẻ ngăn ở y=796 / 901 / 1006 / 1111). Chia ra
   19 đệm trên + 24 nhãn + 10 khe + 32 dòng nhập + 2 đệm dưới chữ + 1 gạch chân
   ô + 16 đệm dưới + 1 kẻ ngăn. */
.ticket__grid > .field { padding: 19px 40px 16px; gap: 10px; border-block-end: 1px solid var(--brand-4); }
.ticket__grid > .field:nth-child(odd):not(.field--wide) {
    padding-inline-end: 40px;
    border-inline-end: 1px solid var(--brand-4);
}
.ticket__grid > .field:nth-child(even) { padding-inline-start: 40px; }

/* Chữ trong ô nhập cao 24px nét Light — cùng chuỗi "Sinh nhật, bàn gần cửa sổ,
   kỷ niệm . . ." dựng ở 24/300 ra 429px bề ngang mực, ảnh đo được 433. */
.ticket .field input,
.ticket .field select {
    font-size: 24px; line-height: 32px; font-weight: 300;
    border-block-end: 1px solid var(--border-default);
    padding-block: 0 2px;
}
.ticket .field input::placeholder { color: var(--border-default); opacity: 1; }
/* Ô ngày của trình duyệt tự cao hơn dòng chữ thường 2px và canh giữa nội dung
   theo chiều dọc, làm hàng "NGÀY / SỐ KHÁCH" cao 107 thay vì 105. Ép đúng chiều
   cao của một ô nhập bình thường: 32 dòng chữ + 2 đệm + 1 gạch chân.

   Biểu tượng lịch: ẩn icon mặc định của trình duyệt (chỉ ẩn HÌNH, vùng bấm mở
   lịch vẫn nguyên) rồi vẽ icon xuất từ Figma làm nền — bản present đo được ô
   26x26 nằm ở x=890…915 trong khi gạch chân ô kết thúc ở 919. Chỉ Chrome/Edge
   có pseudo-element ::-webkit-calendar-picker-indicator; Firefox vẫn hiện icon
   mặc định, chấp nhận được vì đó không phải icon sai, chỉ khác kiểu. */
.ticket .field input[type="date"] {
    block-size: 35px;
    background: url("/img/icon/calendar.svg") right 4px center / auto 26px no-repeat;
    padding-inline-end: 34px;
}
.ticket .field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }
/* Ô chọn trong bản present có hình TAM GIÁC ĐẶC 16x8 sát mép phải (đo được
   1285…1300 trong khi gạch chân ô kết thúc ở 1302), không phải mũi tên chevron
   mặc định của trình duyệt. */
.ticket .field select,
.ticket .field--note input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 0h16L8 8z' fill='%23412E1E'/%3E%3C/svg%3E");
    background-size: 16px 8px;
    background-position: right 2px center;
    background-repeat: no-repeat;
    padding-inline-end: 28px;
}
/* Ô "Ghi chú đặc biệt" trong bản present được vẽ bằng component ô chọn nên có cả
   tam giác này, còn ở đây nó là ô GÕ TỰ DO. Giữ tam giác cho khớp bản present
   nhưng đánh dấu là hình trang trí và không chặn con trỏ, để đừng ai tưởng bấm
   vào đó sẽ xổ danh sách. */
.ticket .field--note input { cursor: text; }

/* Khối khung giờ: mép trong ở x=592 = mép phiếu + 16, KHÔNG cộng thêm đệm của
   fieldset (cách dựng cũ đẩy nhãn ra 609). */
.slots { border: none; padding: 27px 16px 40px; margin: 0; }
.slots__legend { display: block; font-size: 16px; line-height: 24px; }
/* Mỗi buổi ăn một hàng riêng (xem Views/Reservation/Index.cshtml); trong hàng
   thì các thẻ tự xuống dòng khi hết chỗ. Bước giữa hai hàng thẻ là 60 = 44 chiều
   cao thẻ + 16 khoảng cách. */
.slots__grid { display: flex; flex-direction: column; gap: 16px; margin-block-start: 13px; }
.slots__row { display: flex; flex-wrap: wrap; gap: 16px; }
/* Hàng cuối (21:00, 21:30) đảo ngược thành 21:30 trước 21:00 đúng như bản present
   khổ 1920. row-reverse chạy phải→trái nên phải justify-content: flex-end để cụm
   thẻ vẫn nằm sát mép trái. Bản present mobile KHÔNG đảo — xem responsive.css. */
.slots__row:last-child { flex-direction: row-reverse; justify-content: flex-end; }
/* Thẻ giờ đo được 95x44, chữ 18px. Nét ở đây ĐẬM hơn hẳn phần chữ còn lại của
   phiếu (so nét chữ số trên ảnh phóng 150%: dày gấp rưỡi dòng "Khung giờ mong
   muốn" ngay bên trên) nên là Medium, không phải Light như các ô nhập. Đệm ngang
   26 để bù lại phần bề ngang mà nét đậm hơn làm hụt. */
/* Bề rộng CỐ ĐỊNH 95 chứ không để đệm hai bên tự co: chữ số của Be Vietnam Pro
   không phải chữ số bảng (font-variant-numeric: tabular-nums không có tác dụng —
   "11:30" rộng 44 còn "20:30" rộng 53.7), nên đệm cố định cho ra dãy thẻ so le
   tới 10px. Bản present đo được 93…98, tức gần như đều tăm tắp. */
.slot {
    min-inline-size: 95px;
    padding: 11px 8px;
    justify-content: center;
    border: 1px solid var(--border-default); border-radius: 0;
    font-size: 18px; line-height: 20px; font-weight: 500;
}
.slot.is-active { background: var(--brand-4); color: var(--brand-2); border-color: var(--brand-4); }

/* Ô ghi chú nằm giữa hai vạch: vạch trên DÀY 5px (đo được y=1380..1384 liền một
   khối #A0968C = nâu 50%), vạch dưới mảnh 1px. */
.ticket > .field--wide {
    padding: 42px 20px 40px; gap: 11px;
    border-block: 5px solid color-mix(in srgb, var(--brand-4) 50%, transparent);
    border-block-end-width: 1px;
}
.ticket > .field--wide select,
.ticket > .field--wide input { border-block-end-color: var(--border-default); }

.ticket__foot { padding: 17px 16px 0; display: grid; justify-items: stretch; }
.ticket__note { font-size: 16px; line-height: 24px; font-weight: 300; }
/* Nút gửi: hộp 687x88 (thụt 40 mỗi bên như lưới biểu mẫu), có VIỀN KEM MẢNH lùi
   vào 8px bên trong — nét trang trí kiểu tem phiếu, thiếu nó nút chỉ là khối
   nâu trơn. */
.ticket__submit {
    margin: 59px 24px 0; justify-content: center;
    padding: 0; block-size: 88px;
    font-size: 18px; line-height: 20px; letter-spacing: normal;
    border: 8px solid var(--brand-4);
    box-shadow: inset 0 0 0 1px var(--brand-2);
}

.ticket__summary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); margin: 0; padding-inline: 40px; }
.ticket__summary dt { color: var(--text-secondary); letter-spacing: .08em; }
.ticket__summary dd { margin: var(--sp-4) 0 0; }