/* Kiểu chung cho cửa hàng đồ cưới: trang chủ, danh sách sản phẩm,
   chi tiết sản phẩm, giới thiệu và liên hệ. Không tải thêm tài nguyên
   ngoài, không dùng phông chữ từ mạng, không đặt cookie, không theo dõi. */

/* Phông chữ tự lưu trữ (self-hosted) trong assets/fonts/: Playfair Display 600
   và Be Vietnam Pro 400/600/700, hai tập con latin và vietnamese cho mỗi cỡ.
   Nguồn và giấy phép SIL OFL 1.1: xem assets/img/sp/CREDITS.md.
   Không dùng Google Fonts CDN hay máy chủ phông ngoài nào. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfair-display-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfair-display-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FDF8F1;
  color: #2B2118;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img, iframe, video { max-width: 100%; }
img { display: block; }

a { color: #7A3E1F; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #7A3E1F;
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: #2B2118;
  margin: 0 0 0.6em;
}
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.25; }
h3 { font-size: 20px; line-height: 1.3; }
p { margin: 0 0 1em; overflow-wrap: break-word; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* Thanh thông báo dữ liệu mẫu: ở đầu mọi trang, ngay trên đầu trang. */
.thong-bao-mau {
  background: #F5EDE1;
  color: #2B2118;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  padding: 10px 16px;
  margin: 0;
}

.site-header { background: #FFFFFF; border-bottom: 1px solid #D8CFC2; }
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 24px; padding-top: 12px; padding-bottom: 12px;
}
.site-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px; font-weight: 600; color: #2B2118;
  text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center;
}
.nut-menu {
  min-width: 44px; min-height: 44px; padding: 8px 14px; cursor: pointer;
  background: #FFFFFF; color: #2B2118; border: 1px solid #D8CFC2;
  border-radius: 4px; font: inherit; font-weight: 600;
}
.nav { display: none; width: 100%; flex-direction: column; }
.nav.mo { display: flex; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 12px; color: #2B2118; text-decoration: none; border-radius: 4px;
}
.nav a:hover, .nav a[aria-current="page"] { background: #F5EDE1; color: #7A3E1F; }

main { padding: 24px 0 48px; }
section { margin-bottom: 48px; }
section:last-child { margin-bottom: 0; }

.site-footer { background: #2B2118; color: #FDF8F1; padding: 24px 0; }
.site-footer a { color: #FDF8F1; }
.site-footer p { overflow-wrap: anywhere; }

/* Viền kép đồng mảnh: đường ngoài 1 px, đường trong 1 px, cách nhau 6 px, bo góc 2 px. */
.khung-doi {
  border: 1px solid #7A3E1F; border-radius: 2px;
  padding: 6px; background: #FFFFFF;
}
.khung-doi > img, .khung-doi > .product-placeholder {
  border: 1px solid #7A3E1F; border-radius: 2px;
}

.hero { background: #F5EDE1; border: 1px solid #D8CFC2; border-radius: 4px; padding: 24px; margin-bottom: 32px; }
.hero-media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: #F5EDE1; }
.anh-gioi-thieu { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: #F5EDE1; }

.product-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.product-card { background: #FFFFFF; border: 1px solid #D8CFC2; border-radius: 4px; overflow: hidden; }
.product-card > a { color: inherit; text-decoration: none; display: block; }
.product-card h3 a:hover { color: #7A3E1F; }
.product-body { padding: 16px; }
.product-media { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: #F5EDE1; }

/* Khối giữ chỗ khi ảnh lỗi: giữ đúng tỉ lệ, hiển thị tên sản phẩm. */
.product-placeholder {
  aspect-ratio: 4 / 5; width: 100%; background: #F5EDE1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 16px;
}
.product-placeholder strong {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 16px; font-weight: 600; color: #2B2118;
}
.product-placeholder span { font-size: 14px; color: #5C4F45; }
.product-placeholder.ty-le-16-9 { aspect-ratio: 16 / 9; }

.badge {
  display: inline-block; min-height: 28px; padding: 4px 10px;
  background: #F5EDE1; border: 1px solid #D8CFC2; border-radius: 20px;
  font-size: 14px; line-height: 1.5; color: #5C4F45;
}
.price { font-size: 18px; font-weight: 700; line-height: 1.4; color: #2B2118; }
.muted { color: #5C4F45; }
.sample-note { color: #5C4F45; font-size: 14px; line-height: 1.5; }
.nhan { color: #5C4F45; font-size: 14px; line-height: 1.5; }

.filters { background: #FFFFFF; border: 1px solid #D8CFC2; border-radius: 4px; padding: 16px; margin-bottom: 24px; }
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group button {
  min-height: 44px; min-width: 44px; padding: 8px 14px; cursor: pointer;
  background: #FFFFFF; color: #2B2118; border: 1px solid #D8CFC2;
  border-radius: 4px; font: inherit;
}
.filter-group button[aria-pressed="true"] { background: #7A3E1F; color: #FFFFFF; border-color: #7A3E1F; }

/* Trạng thái danh sách trống sau khi lọc. */
.empty {
  background: #F5EDE1; border: 1px solid #D8CFC2; border-radius: 4px;
  padding: 32px 16px; text-align: center; color: #5C4F45;
}
.empty h2 { color: #2B2118; }

.detail { display: grid; grid-template-columns: 1fr; gap: 24px; }
.detail-media img, .detail-media .product-placeholder { width: 100%; }
.detail-info h2 { margin-top: 24px; }
.detail-info dl { margin: 0; }
.detail-info dt { font-weight: 700; margin-top: 12px; }
.detail-info dd { margin: 0; color: #5C4F45; }
.lua-chon { display: flex; flex-wrap: wrap; gap: 8px; }
.lua-chon button {
  min-height: 44px; min-width: 44px; padding: 8px 14px; cursor: pointer;
  background: #FFFFFF; color: #2B2118; border: 1px solid #D8CFC2;
  border-radius: 4px; font: inherit;
}
.lua-chon button[aria-pressed="true"] { border: 2px solid #7A3E1F; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 18px;
  background: #7A3E1F; color: #FFFFFF; text-decoration: none;
  border: 1px solid #7A3E1F; border-radius: 4px; cursor: pointer;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.4;
}
.btn-rong { width: 100%; }
.btn-secondary { background: #FFFFFF; color: #7A3E1F; }
/* Liên kết tel:/mailto: luôn đạt vùng chạm tối thiểu 44×44 px
   (khối liên hệ, chân trang, dòng liên hệ ở trang chi tiết). */
.contact-box a[href^="tel:"], .contact-box a[href^="mailto:"],
.site-footer a[href^="tel:"], .site-footer a[href^="mailto:"],
.detail-info a[href^="tel:"], .detail-info a[href^="mailto:"] {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px;
}
.contact-box { background: #FFFFFF; border: 1px solid #D8CFC2; border-radius: 4px; padding: 16px; margin-top: 20px; }
.contact-box p { overflow-wrap: anywhere; }

.map { width: 100%; height: 300px; border: 1px solid #D8CFC2; border-radius: 4px; }

form label { display: block; font-weight: 600; margin-bottom: 4px; }
form input, form textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: #FFFFFF; color: #2B2118; border: 1px solid #D8CFC2;
  border-radius: 4px; font: inherit; margin-bottom: 16px;
}
form textarea { min-height: 120px; }

@media (min-width: 768px) {
  body { font-size: 17px; line-height: 1.65; }
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  .container { padding: 0 24px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .detail { grid-template-columns: 1fr 1fr; }
  section { margin-bottom: 64px; }
}

@media (min-width: 1024px) {
  h1 { font-size: 56px; line-height: 1.15; }
  h2 { font-size: 36px; line-height: 1.2; }
  h3 { font-size: 24px; }
  .price { font-size: 20px; }
  .container { padding: 0 32px; }
  .nut-menu { display: none; }
  .nav { display: flex; width: auto; flex-direction: row; flex-wrap: wrap; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 32px; }
  main { padding: 32px 0 80px; }
  .map { height: 400px; }
}

@media (min-width: 1440px) {
  .container { max-width: 1280px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}