/* =====================================================================
   5sweeties Bakery - style.css dùng chung cho cả website
   Gồm: Trang chủ, Giới thiệu, Thực đơn, Liên hệ
   Thiết kế cho điện thoại trước, từ 768px trở lên là bố cục máy tính
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500&family=Bricolage+Grotesque:wght@600;800&display=swap");

/* ===== 1. MÀU THƯƠNG HIỆU ===== */
:root {
  --butter: #FFEDAB;   /* màu bơ sáng */
  --cherry: #75070C;   /* đỏ cherry */
  --olive:  #4F6815;   /* xanh olive */
  --oat:    #F0E6DA;   /* yến mạch, nền trang */
}

/* ===== 2. CƠ BẢN ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Be Vietnam Pro", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cherry);
  background: var(--oat);
}

/* Typography: 2 phông chữ, tiêu đề to và đậm, chữ canh lề trái */
h1, h2, h3, h4 { font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif; line-height: 1.15; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 14px; }
h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 4px; }
p  { margin-bottom: 12px; max-width: 62ch; }
a  { color: inherit; }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }

/* Ảnh tự co giãn theo màn hình */
img { max-width: 100%; height: auto; display: block; }

/* Khung chứa: giới hạn chiều rộng và canh giữa trang */
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* ===== 3. DÙNG CHUNG: HEADER, MENU, ĐƯỜNG DẪN, FOOTER ===== */
header { background: var(--cherry); color: var(--butter); padding: 14px 0; }
.thanh-dau { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.nhan-hieu { display: flex; align-items: center; gap: 12px; }
header :focus-visible { outline-color: var(--butter); }

/* Câu khẩu hiệu nằm ở hàng riêng bên dưới logo và menu */
.khau-hieu { margin: 8px 0 0; font-size: .95rem; }

/* Nút hamburger: 3 vạch ngang */
.hamburger {
  width: 44px; height: 44px; padding: 12px 7px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: none; border: none; cursor: pointer;
}
.hamburger span { display: block; width: 100%; height: 3px; background: var(--butter); }

/* Điện thoại: menu ẩn, chỉ hiện khi có class "open" (script.js thêm vào) */
#main-nav { display: none; flex-direction: column; width: 100%; margin-top: 8px; }
#main-nav.open { display: flex; }
#main-nav a { padding: 10px 0; font-weight: 500; text-decoration: none; }
#main-nav a:hover { text-decoration: underline; }
#main-nav a[aria-current="page"] { text-decoration: underline; }

/* Đường dẫn (breadcrumb) và mục lục trong trang */
.duong-dan { padding: 16px 0 0; font-size: .9rem; }
.muc-luc { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 16px; margin-bottom: 4px; font-weight: 500; }

footer { margin-top: 24px; padding: 24px 0; background: var(--olive); color: var(--butter); }
footer p { margin-bottom: 0; }

/* ===== 4. DÙNG CHUNG: NỘI DUNG ===== */
section { padding: 28px 0; }
section img { border-radius: 16px; margin-bottom: 16px; }
section > h3 { margin: 8px 0 12px; }

ul, ol { margin: 0 0 12px 20px; }
li { margin-bottom: 8px; }

dl dt { font-weight: 600; margin-top: 12px; }
dl dd { margin-left: 0; }

address { font-style: normal; margin-bottom: 12px; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .95rem; }
caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
th, td { padding: 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cherry); }
thead th { background: var(--cherry); color: var(--butter); }

/* Form */
form { max-width: 520px; }
form p { max-width: none; }
label { display: block; font-weight: 500; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 12px; font: inherit; color: var(--cherry);
  background: #fff; border: 2px solid var(--cherry); border-radius: 10px;
}
button[type="submit"] {
  padding: 12px 28px; font: inherit; font-weight: 500; cursor: pointer;
  color: var(--butter); background: var(--cherry); border: 0; border-radius: 999px;
}
button[type="submit"]:hover { background: var(--olive); }

/* ===== 5. TRANG CHỦ ===== */
/* Hai nút kêu gọi: Đặt bánh ngay, Xem thực đơn */
.khung-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.nut { display: inline-block; padding: 12px 28px; border-radius: 999px; background: var(--cherry); color: var(--butter); font-weight: 500; text-decoration: none; }
.nut:hover { background: var(--olive); }
.nut.phu { background: transparent; color: var(--cherry); border: 2px solid var(--cherry); }
.nut.phu:hover { background: var(--cherry); color: var(--butter); }

/* Danh mục sản phẩm */
.khung-danh-muc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.the-danh-muc { display: block; padding: 18px; border-radius: 16px; background: var(--cherry); color: var(--butter); text-decoration: none; }
.the-danh-muc:hover { background: var(--olive); }
.the-danh-muc:focus-visible { outline-color: var(--butter); }
.the-danh-muc p { margin-bottom: 0; font-size: .95rem; }

/* Sản phẩm nổi bật và set quà (ảnh + tên) */
.khung-banh { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.the-banh { padding: 12px; border-radius: 16px; color: var(--cherry); background: var(--butter); }
.the-banh img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.the-banh h3 { font-size: 1.05rem; margin-bottom: 0; }
.the-banh h3 a { text-decoration: none; }
.the-banh h3 a:hover { text-decoration: underline; }

/* ===== TRANG CHỦ: cách đặt bánh và ghé tiệm ===== */
.khung-banh .the-banh h3 { text-align: center; }   /* tên bánh canh giữa */

/* Cách đặt bánh: 3 bước, mỗi bước một khung có số */
.cac-buoc { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.buoc { margin: 0; padding: 20px 18px; border: 2px solid var(--cherry); border-radius: 16px; background: var(--butter); }
.so-buoc { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; background: var(--cherry); color: var(--butter); font-family: "Bricolage Grotesque", "Be Vietnam Pro", sans-serif; font-size: 1.3rem; font-weight: 800; }
.buoc h3 { margin-bottom: 6px; }
.buoc p { margin-bottom: 0; }

/* Ghé tiệm: khung nền cherry nổi bật, có icon (ảnh PNG trong images/) */
.ghe-tiem { padding: 28px 24px; border-radius: 24px; background: var(--cherry); color: var(--butter); }
.ghe-tiem address { margin-bottom: 18px; }
.dong-tt { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dong-tt img { flex: none; width: 24px; height: 24px; margin: 2px 0 0; border-radius: 0; }
.nut-sang { background: var(--butter); color: var(--cherry); }
.nut-sang:hover { background: var(--olive); color: var(--butter); }
.ghe-tiem :focus-visible { outline-color: var(--butter); }

@media screen and (min-width: 768px) {
  .cac-buoc { grid-template-columns: repeat(3, 1fr); }
  .ghe-tiem { padding: 36px 40px; }
}

/* ===== 6. TRANG GIỚI THIỆU =====
   Dùng chung ul, dl, p, h2 ở mục 4, không cần luật riêng */

/* ===== 7. TRANG THỰC ĐƠN: thẻ món (ảnh, tên, giá, mô tả) =====
   Áp dụng cho cả hai cách đặt tên class:
   - khung-mon / the-mon
   - khung-banh / the-banh (khi trong khung có giá, class "gia"), nên trang chủ
     dùng cùng tên class vẫn không bị ảnh hưởng.
   Các thẻ cùng một hàng dùng chung hàng lưới (subgrid), nên ảnh, tên, giá và
   mô tả của mọi thẻ luôn thẳng hàng với nhau dù tên dài ngắn khác nhau. */
:is(.khung-mon, .khung-banh:has(.gia)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 0; margin-bottom: 20px; }
:is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh) { display: flex; flex-direction: column; margin-bottom: 16px; padding: 12px; border-radius: 16px; background: var(--butter); color: var(--cherry); text-align: center; }
:is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh) img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
:is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh) :is(h3, h4) { min-height: 2.4em; margin-bottom: 6px; font-size: 1.05rem; font-weight: 600; line-height: 1.2; text-align: center; }
:is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh) .gia { justify-self: center; align-self: center; margin-bottom: 8px; padding: 2px 12px; border-radius: 999px; background: var(--cherry); color: var(--butter); font-size: .9rem; font-weight: 500; }
:is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh) p { text-align: center; }
:is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh) .mo-ta { margin-bottom: 0; font-size: .92rem; }

/* Trình duyệt hỗ trợ subgrid: mỗi thẻ chiếm 4 hàng chung (ảnh, tên, giá, mô tả) */
@supports (grid-template-rows: subgrid) {
  :is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  :is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh) :is(h3, h4) { min-height: 0; align-self: center; }
}

/* Máy tính: 3 thẻ một hàng */
@media screen and (min-width: 768px) {
  :is(.khung-mon, .khung-banh:has(.gia)) { grid-template-columns: repeat(3, 1fr); }
}

/* Điện thoại: thẻ lẻ cuối hàng nằm bình thường (không căn giữa như trang chủ) */
@media screen and (max-width: 767px) {
  :is(.khung-mon, .khung-banh:has(.gia)) > :is(.the-mon, .the-banh):last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}

/* ===== 8. TRANG LIÊN HỆ (khung giới thiệu bên trái, form bên phải) ===== */
#contact { max-width: 960px; margin: 0 auto; padding: 28px 20px; display: grid; gap: 28px; }
.intro { padding: 0; }
.tag { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: var(--butter); font-size: .8rem; font-weight: 500; }
.info { margin-top: 16px; padding: 20px; border-radius: 16px; background: var(--butter); }
.note { margin-bottom: 0; font-weight: 500; }

.form-box { padding: 24px; border-radius: 16px; background: var(--cherry); color: var(--butter); }
.form-box form { max-width: none; }
.form-box label { margin: 14px 0 4px; }
.form-box input, .form-box select, .form-box textarea { background: var(--oat); border-color: var(--oat); }
.form-box textarea { resize: vertical; }
.form-box :focus-visible { outline-color: var(--butter); }
.form-box button[type="submit"] { margin-top: 18px; color: var(--cherry); background: var(--butter); }
.form-box button[type="submit"]:hover { background: var(--oat); }
.subtitle { margin-bottom: 8px; }
.form-row { display: grid; gap: 0 12px; }
.form-note { margin: 12px 0 0; font-size: .9rem; }

/* ===== 9. MÁY TÍNH VÀ MÀN HÌNH LỚN (từ 480px, 768px) ===== */
@media screen and (min-width: 480px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

@media screen and (min-width: 768px) {
  h1 { font-size: 2rem; }

  /* Menu ngang, ẩn hamburger */
  #main-nav { display: flex; flex-direction: row; width: auto; gap: 24px; margin-top: 0; }
  .hamburger { display: none; }

  /* Trang chủ */
  .khung-danh-muc { grid-template-columns: repeat(4, 1fr); }
  .khung-banh { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .khung-banh.khung-3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* Thực đơn */
  .khung-mon { grid-template-columns: repeat(3, 1fr); }

  /* Liên hệ */
  #contact { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Điện thoại: ô thứ 5 (hoặc ô lẻ cuối) nằm giữa hàng cuối */
@media screen and (max-width: 767px) {
  .khung-banh .the-banh:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
.banner {display: block; width: 100%;}