/* ==========================================================================
   GƯƠNG SOI TOÀN THÂN HOME TÂN LỘC — bảng màu & kiểu chữ
   Ý tưởng: "cạnh mài vát". Mọi khung trên trang đều có viền đôi giống
   đường vát quanh mép một tấm gương thật. Nền trắng ngà ấm và điểm nhấn
   nâu óc chó, để ảnh khung gỗ tự nhiên nổi lên thay vì bị nền cạnh tranh.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Be+Vietnam+Pro:wght@300;400;500;600&display=swap&subset=vietnamese');

:root {
  /* Màu */
  --nen:        #F5F1EA;   /* nền trang — trắng ngà như tường vữa */
  --nen-sau:    #EDE7DC;   /* nền đoạn chìm và chân trang */
  --the:        #FDFBF7;   /* mặt thẻ */
  --the-trang:  #FFFFFF;
  --muc:        #1F1B16;   /* chữ chính — nâu gần đen */
  --muc-vua:    #5A5145;
  --muc-nhat:   #6E6559;
  --canh:       #6B4A2F;   /* nâu óc chó — điểm nhấn chính */
  --canh-sang:  #9A7550;
  --vach:       #E0D8CB;   /* nét kẻ mảnh */
  --vach-mo:    #EDE7DD;

  --tren-nau:   #FAF6EF;   /* chữ sáng đặt trên nền nâu đậm */
  --nau-dam:    #503626;   /* nút nâu khi rê chuột */

  --o-anh: linear-gradient(155deg, #E8E0D4, #F7F2E9 48%, #E2D9CB);
  --bong:  0 18px 34px -22px rgba(31, 27, 22, .34);

  /* Chữ */
  --serif: "EB Garamond", "Times New Roman", serif;
  --sans:  "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;

  /* Khoảng cách */
  --lot:    clamp(20px, 5vw, 64px);
  --rong:   1240px;
  --doan:   clamp(64px, 9vw, 128px);
  --vat:    11px;                       /* độ rộng đường vát */
}

/* --------------------------------------------------------------------------
   Nền tảng
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nen);
  color: var(--muc);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--canh); outline-offset: 3px; }

.boc { max-width: var(--rong); margin-inline: auto; padding-inline: var(--lot); }

.an-mat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   CHẶN TRÀN NGANG
   Mặc định, một ô trong lưới hoặc trong hàng ngang KHÔNG được phép co nhỏ
   hơn nội dung bên trong nó. Chỉ cần một dòng chữ hơi dài là ô đó đẩy cả
   trang rộng ra, khiến điện thoại trượt ngang được và chữ bị cắt cụt.
   Dòng min-width: 0 cho phép ô co lại và chữ tự xuống dòng.
   -------------------------------------------------------------------------- */
.sp-luoi > *, .dm-luoi > *, .ct-luoi > *,
.buoc > *, .ly-do > *, .dg-luoi > *,
.hero-luoi > *, .lh-luoi > *, .chan-luoi > *, .goi-y-trong > * { min-width: 0; }

.hieu, .hieu-chu, .sp-chan > *, .sp-bang li > *, .chan-day > * { min-width: 0; }

/* Tên cửa hàng: cho xuống dòng nếu chật, KHÔNG cắt cụt.
   Chỉ dòng chữ nhỏ bên dưới mới được cắt bớt khi hết chỗ. */
.hieu-chu b { overflow-wrap: anywhere; }
.hieu-chu span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lưới an toàn cuối cùng — nếu còn sót chỗ nào tràn thì cũng không
   trượt ngang được nữa. Dùng "clip" chứ không dùng "hidden" để thanh
   đầu trang vẫn dính khi cuộn. */
body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Kiểu chữ
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Serif chỉ dùng ở cỡ lớn. Nhỏ hơn 1.7rem thì dùng sans cho sắc nét.
   EB Garamond không có nét mảnh 300, nhẹ nhất là 400 — và thân chữ to hơn
   Cormorant nên cỡ chữ phải hạ xuống, dòng phải giãn ra cho dấu tiếng Việt
   (ầ, ừ, ị) có chỗ mà không đụng dòng trên. */
.hoa-van {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.tieu-de-lon  { font-size: clamp(2.15rem, 4.8vw, 4.6rem); }
.tieu-de-doan { font-size: clamp(1.8rem, 3.2vw, 2.75rem); }

.nhan {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--canh);
}
.nhan-mo { color: var(--muc-nhat); }

.dan { max-width: 56ch; color: var(--muc-vua); font-weight: 300; font-size: 1.02rem; }

.dau-doan { margin-bottom: clamp(34px, 5vw, 56px); }
.dau-doan .nhan { display: block; margin-bottom: 14px; }
.dau-doan .dan  { margin: 16px 0 0; }

/* --------------------------------------------------------------------------
   CHỮ KÝ CỦA TRANG: đường mài vát
   Viền ngoài + viền trong lùi vào 11px = mặt cắt của cạnh gương.
   -------------------------------------------------------------------------- */
.vat {
  position: relative;
  background: var(--the);
  border: 1px solid var(--vach);
}
.vat::before {
  content: "";
  position: absolute;
  inset: var(--vat);
  border: 1px solid var(--vach-mo);
  pointer-events: none;
  z-index: 4;          /* nằm trên cả ảnh, để đường vát chạy liền quanh mép */
}
/* vệt sáng dọc cạnh trên và cạnh trái, như ánh sáng đọng trên đường vát */
.vat::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), transparent var(--vat)),
    linear-gradient(90deg,  rgba(255,255,255,.72), transparent var(--vat));
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Nút
   -------------------------------------------------------------------------- */
.nut {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  border: 1px solid var(--canh);
  background: var(--canh);
  color: var(--tren-nau);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.nut:hover { background: var(--nau-dam); border-color: var(--nau-dam); }
.nut:active { transform: translateY(1px); }

.nut-vien { background: transparent; color: var(--canh); }
.nut-vien:hover { background: var(--canh); color: var(--tren-nau); }

.nut svg { width: 15px; height: 15px; flex: none; }

.lien-ket {
  display: inline-block;
  color: var(--canh);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--canh-sang);
  padding-bottom: 2px;
  transition: border-color .25s, color .25s;
}
.lien-ket:hover { color: var(--muc); border-color: var(--muc); }

/* --------------------------------------------------------------------------
   Thanh điều hướng
   -------------------------------------------------------------------------- */
.dinh {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 241, 234, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vach);
}
.dinh-trong {
  max-width: var(--rong);
  margin-inline: auto;
  padding: 0 var(--lot);
  height: 76px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.hieu { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.hieu-logo {
  width: 42px; height: 42px;
  flex: none;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.hieu:hover .hieu-logo { transform: rotate(-6deg) scale(1.05); }

.hieu-chu { display: flex; flex-direction: column; line-height: 1.15; }
.hieu-chu b {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hieu-chu span { font-size: .66rem; letter-spacing: .1em; color: var(--muc-nhat); text-transform: uppercase; }

.menu { display: flex; align-items: center; gap: 30px; }
.menu a {
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--muc-vua);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .22s, border-color .22s;
}
.menu a:hover        { color: var(--muc); }
.menu a[aria-current]{ color: var(--muc); border-bottom-color: var(--canh); }

.dinh .nut { padding: 11px 20px; }

/* Nút đổi ngôn ngữ */
.doi-nn {
  flex: none;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--muc-vua);
  border: 1px solid var(--vach);
  padding: 7px 11px;
  transition: border-color .22s, color .22s;
}
.doi-nn:hover { border-color: var(--canh); color: var(--canh); }

.mo-menu {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--vach);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.mo-menu i { display: block; width: 17px; height: 1px; background: var(--muc); margin: 4px auto; transition: transform .25s, opacity .2s; }
.mo-menu[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.mo-menu[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.mo-menu[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero — tấm gương lớn, có vệt sáng chạy qua
   -------------------------------------------------------------------------- */
.hero { padding: clamp(48px, 7vw, 92px) 0 var(--doan); }
.hero-luoi {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(30px, 4vw, 56px);
}

.hero-chu { position: relative; z-index: 5; }
.hero-chu .nhan { display: block; margin-bottom: 22px; }
.hero-chu h1 { margin: 0 0 26px; }
.hero-chu .dan { max-width: 42ch; }
.hero-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-kinh {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 3.9;        /* khớp tỉ lệ ảnh gương chụp dọc */
  background: var(--o-anh);
}
.hero-kinh > img {
  position: absolute;
  inset: var(--vat);
  width: calc(100% - var(--vat) * 2);
  height: calc(100% - var(--vat) * 2);
  object-fit: cover;
  object-position: center 38%;  /* giữ đỉnh gương, cắt bớt sàn nhà */
}
.hero-kinh .anh-sang {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 34%,
    rgba(255,255,255,.50) 46%,
    rgba(255,255,255,.14) 53%,
    transparent 66%);
  transform: translateX(-125%);
  animation: luot 2.7s cubic-bezier(.24,.72,.2,1) .45s both;
}
@keyframes luot { to { transform: translateX(125%); } }

/* --------------------------------------------------------------------------
   Ô danh mục — có ảnh đại diện
   -------------------------------------------------------------------------- */
.dm-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
}
.dm-the {
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.dm-the:hover {
  transform: translateY(-5px);
  border-color: var(--canh-sang);
  box-shadow: var(--bong);
}
.dm-anh {
  position: relative;
  margin: var(--vat) var(--vat) 0;
  aspect-ratio: 3 / 4;      /* khớp tỉ lệ ảnh gương chụp dọc — không cắt mất đỉnh và chân */
  overflow: hidden;
  background: var(--o-anh);
  z-index: 3;
}
.dm-anh img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.dm-the:hover .dm-anh img { transform: scale(1.05); }

.dm-than {
  position: relative;
  z-index: 3;
  padding: 17px calc(var(--vat) + 11px) calc(var(--vat) + 16px);
}
.dm-than h3 {
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 500;
  margin: 0 0 7px;
}
.dm-than p { margin: 0; font-size: .81rem; font-weight: 300; color: var(--muc-vua); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Thẻ sản phẩm
   -------------------------------------------------------------------------- */
.sp-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: 16px;
}

.sp {
  display: flex;
  flex-direction: column;
  transition: border-color .35s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.sp:hover {
  border-color: var(--canh-sang);
  transform: translateY(-5px);
  box-shadow: var(--bong);
}

/* Khung ảnh dọc — gương chụp dọc, để ngang là cắt mất đỉnh và chân */
.sp-anh {
  position: relative;
  margin: var(--vat) var(--vat) 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--o-anh);
  z-index: 3;
}
.sp-anh img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* phải cắt thì cắt bớt sàn nhà, giữ lại đỉnh gương */
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.sp:hover .sp-anh img { transform: scale(1.045); }

/* Khi chưa có ảnh thật: hiện ô ngà kèm TÊN FILE cần thêm vào */
.sp-anh.trong img, .ct-anh.trong img, .dm-anh.trong img { display: none; }
.sp-anh.trong::after, .ct-anh.trong::after, .dm-anh.trong::after {
  content: "Cần ảnh: " attr(data-file);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--muc-nhat);
  word-break: break-all;
}

/* Nhãn dán góc ảnh — dùng khi ảnh không phải ảnh chụp hàng thật */
.nhan-anh {
  position: absolute;
  right: 9px; bottom: 9px;
  z-index: 4;
  padding: 5px 10px;
  background: rgba(31, 27, 22, .62);
  color: var(--tren-nau);
  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sp-than {
  position: relative;
  z-index: 3;
  padding: 18px calc(var(--vat) + 11px) calc(var(--vat) + 14px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sp-than > .nhan { font-size: .61rem; color: var(--muc-nhat); margin-bottom: 8px; }
.sp-ten {
  font-family: var(--sans);
  font-size: .99rem;
  font-weight: 500;
  line-height: 1.38;
  margin: 0 0 5px;
}
.sp-kt { font-size: .77rem; color: var(--muc-nhat); margin: 0 0 9px; }
.sp-mo-ta { font-size: .81rem; font-weight: 300; color: var(--muc-vua); line-height: 1.58; margin: 0 0 15px; }

.sp-chan {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--vach-mo);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* Bảng "cỡ — giá" khi sản phẩm có nhiều kích thước */
.sp-bang {
  margin: auto 0 0;          /* tự đẩy xuống đáy thẻ */
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--vach-mo);
}
.sp-bang li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--vach-mo);
}
.sp-bang span { font-size: .8rem; color: var(--muc-vua); }
.sp-bang b {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--canh);
  white-space: nowrap;
}
.sp-chan-goi {
  margin-top: 0;
  padding-top: 12px;
  border-top: 0;
  justify-content: flex-end;
}

.sp-gia {
  font-family: var(--serif);
  font-size: 1.46rem;
  font-weight: 500;
  color: var(--canh);
  letter-spacing: .01em;
}
.sp-gia small { font-family: var(--sans); font-size: .68rem; font-weight: 400; letter-spacing: .04em; color: var(--muc-nhat); }

/* --------------------------------------------------------------------------
   Bộ lọc trang sản phẩm
   -------------------------------------------------------------------------- */
.loc {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--vach);
}
.loc button {
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: .79rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--muc-vua);
  background: transparent;
  border: 1px solid var(--vach);
  cursor: pointer;
  transition: background .22s, border-color .22s, color .22s;
}
.loc button:hover { border-color: var(--canh-sang); color: var(--muc); }
.loc button[aria-pressed="true"] {
  background: var(--canh);
  border-color: var(--canh);
  color: var(--tren-nau);
}
.dem-sp { font-size: .8rem; color: var(--muc-nhat); margin: -18px 0 30px; }

/* --------------------------------------------------------------------------
   Lý do chọn — nhãn bằng chữ, không đánh số
   -------------------------------------------------------------------------- */
.ly-do { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 52px); }
.ly-do > div { padding-top: 22px; border-top: 1px solid var(--muc); }
.ly-do .nhan { display: block; margin-bottom: 18px; }
.ly-do h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.28;
  margin: 0 0 12px;
}
.ly-do p { margin: 0; font-size: .89rem; font-weight: 300; color: var(--muc-vua); line-height: 1.68; }

/* --------------------------------------------------------------------------
   Quy trình — đây là các bước có thứ tự nên đánh số là hợp lý
   -------------------------------------------------------------------------- */
.buoc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--vach); border: 1px solid var(--vach); }
.buoc > div { background: var(--the); padding: clamp(24px, 2.6vw, 34px); }
.buoc-so {
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 400;
  color: var(--canh-sang);
  line-height: 1;
  display: block;
  margin-bottom: 20px;
}
.buoc h3 { font-family: var(--sans); font-size: 1rem; font-weight: 500; margin: 0 0 9px; }
.buoc p  { margin: 0; font-size: .85rem; font-weight: 300; color: var(--muc-vua); line-height: 1.62; }

/* --------------------------------------------------------------------------
   Công trình
   -------------------------------------------------------------------------- */
.ct-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.ct {
  display: flex;
  flex-direction: column;
  transition: border-color .35s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.ct:hover { border-color: var(--canh-sang); transform: translateY(-5px); box-shadow: var(--bong); }
.ct-anh {
  position: relative;
  margin: var(--vat) var(--vat) 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--o-anh);
  z-index: 3;
}
.ct-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ct:hover .ct-anh img { transform: scale(1.04); }
.ct-than { position: relative; z-index: 3; padding: 20px calc(var(--vat) + 11px) calc(var(--vat) + 18px); }
.ct-than .nhan { font-size: .62rem; color: var(--muc-nhat); }
.ct-than h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 500; margin: 11px 0 8px; line-height: 1.4; }
.ct-than p { margin: 0; font-size: .85rem; font-weight: 300; color: var(--muc-vua); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Đánh giá
   -------------------------------------------------------------------------- */
.dg-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 44px); }
.dg { padding-left: 24px; border-left: 1px solid var(--canh-sang); }
.dg blockquote {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 1.26rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.56;
  color: var(--muc);
}
.dg cite { font-style: normal; font-size: .82rem; font-weight: 500; display: block; }
.dg span { font-size: .78rem; color: var(--muc-nhat); }

/* --------------------------------------------------------------------------
   Câu hỏi thường gặp
   -------------------------------------------------------------------------- */
.ch { max-width: 820px; border-top: 1px solid var(--vach); }
.ch details { border-bottom: 1px solid var(--vach); }
.ch summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-size: 1.02rem;
  font-weight: 500;
  transition: color .2s;
}
.ch summary::-webkit-details-marker { display: none; }
.ch summary:hover { color: var(--canh); }
.ch summary::after {          /* nét ngang của dấu cộng */
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 13px; height: 1px;
  background: var(--canh);
}
.ch summary::before {         /* nét dọc — biến mất khi mở ra */
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 1px; height: 13px;
  margin-top: -6px;
  background: var(--canh);
  transition: transform .25s, opacity .25s;
}
.ch details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.ch details p {
  margin: 0;
  padding: 0 60px 26px 0;
  font-size: .92rem;
  font-weight: 300;
  color: var(--muc-vua);
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   Dải kêu gọi liên hệ
   -------------------------------------------------------------------------- */
.goi-y { background: var(--canh); color: #E9DCCC; }
.goi-y-trong {
  max-width: var(--rong);
  margin-inline: auto;
  padding: clamp(56px, 7vw, 88px) var(--lot);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.goi-y .nhan { color: #C9AE92; display: block; margin-bottom: 16px; }
.goi-y h2 { color: var(--tren-nau); }
.goi-y p { margin: 16px 0 0; max-width: 46ch; font-weight: 300; color: #D8C8B4; font-size: .98rem; }
.goi-y-nut { display: flex; flex-direction: column; gap: 11px; }
.goi-y-nut .nut {
  justify-content: center;
  background: var(--tren-nau); border-color: var(--tren-nau); color: var(--canh);
  padding: 16px 26px;
}
.goi-y-nut .nut:hover { background: transparent; color: var(--tren-nau); }
.goi-y-nut .nut-vien { background: transparent; color: var(--tren-nau); border-color: #A98A6A; }
.goi-y-nut .nut-vien:hover { background: var(--tren-nau); color: var(--canh); }

/* --------------------------------------------------------------------------
   Trang liên hệ
   -------------------------------------------------------------------------- */
.lh-luoi { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.lh-danh { border-top: 1px solid var(--muc); }
.lh-danh > div { padding: 22px 0; border-bottom: 1px solid var(--vach); }
.lh-danh .nhan { display: block; margin-bottom: 7px; font-size: .64rem; color: var(--muc-nhat); }
.lh-danh strong { font-size: 1.06rem; font-weight: 500; }
.lh-danh a strong { transition: color .2s; }
.lh-danh a:hover strong { color: var(--canh); }
.lh-danh p { margin: 0; font-size: .96rem; font-weight: 300; color: var(--muc-vua); }
.ban-do { width: 100%; aspect-ratio: 1 / 1; border: 0; display: block; position: relative; z-index: 3; }
.ban-do-khung { padding: var(--vat); }

/* --------------------------------------------------------------------------
   Chân trang
   -------------------------------------------------------------------------- */
.chan {
  background: var(--nen-sau);
  border-top: 1px solid var(--vach);
  margin-top: var(--doan);
  padding: clamp(48px, 6vw, 72px) 0 0;
}
/* dải liên hệ nằm ngay trên chân trang thì không chừa khoảng trống */
.goi-y + .chan { margin-top: 0; }

.chan-luoi {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 48px;
}
.chan h4 { font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muc-nhat); margin: 0 0 18px; }
.chan ul { list-style: none; margin: 0; padding: 0; }
.chan li { margin-bottom: 11px; font-size: .87rem; font-weight: 300; color: var(--muc-vua); }
.chan a:hover { color: var(--canh); }
.chan-hieu { font-family: var(--serif); font-size: 1.76rem; font-weight: 400; margin: 0 0 14px; line-height: 1.22; }
.chan-hieu + p { margin: 0; font-size: .88rem; font-weight: 300; color: var(--muc-vua); max-width: 34ch; }
.chan-day {
  border-top: 1px solid var(--vach);
  padding: 22px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: .76rem;
  color: var(--muc-nhat);
}

/* --------------------------------------------------------------------------
   Nút liên hệ nổi
   -------------------------------------------------------------------------- */
.noi {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.noi a {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--canh);
  color: var(--tren-nau);
  box-shadow: 0 4px 18px rgba(31, 27, 22, .22);
  transition: transform .22s, background .22s;
}
.noi a:hover { transform: scale(1.07); background: var(--nau-dam); }
.noi svg { width: 21px; height: 21px; }
.noi .zalo { background: #0068FF; }
.noi .zalo:hover { background: #0052CC; }
.noi .mess { background: #0866FF; }
.noi .mess:hover { background: #0052CC; }
.noi .wa { background: #25D366; }
.noi .wa:hover { background: #1DA851; }
.noi .zalo b { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .02em; }

.thanh-duoi { display: none; }

/* --------------------------------------------------------------------------
   Hiện dần khi cuộn tới — chỉ ẩn khi trình duyệt bật JavaScript
   -------------------------------------------------------------------------- */
.js .hien     { opacity: 0; transform: translateY(14px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.js .hien.roi { opacity: 1; transform: none; }

section { padding-bottom: var(--doan); }
section.lien { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Màn hình nhỏ
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-luoi   { grid-template-columns: 1fr; }
  /* Một cột: ĐƯA ẢNH LÊN TRÊN chữ. Khách mở web bán gương thì màn hình
     đầu tiên phải thấy cái gương, không phải một trang toàn chữ.
     Chặn bề ngang và hạ chiều cao để phần chữ bên dưới cũng ló ra. */
  .hero-kinh   {
    order: -1;
    max-width: 420px;
    margin-inline: auto;
    aspect-ratio: 4 / 4.3;
  }
  .hero-chu    { margin-top: 30px; }
  .dm-luoi     { grid-template-columns: repeat(2, 1fr); }
  .ly-do       { grid-template-columns: 1fr; gap: 30px; }
  .buoc        { grid-template-columns: repeat(2, 1fr); }
  .dg-luoi     { grid-template-columns: 1fr; }
  .goi-y-trong { grid-template-columns: 1fr; }
  .lh-luoi     { grid-template-columns: 1fr; }
  .chan-luoi   { grid-template-columns: 1fr 1fr; }
  .chan-luoi > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 15px; padding-bottom: 54px; }

  .menu {
    position: fixed;
    inset: 76px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nen);
    border-bottom: 1px solid var(--vach);
    padding: 8px var(--lot) 24px;
    transform: translateY(-118%);
    transition: transform .32s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 18px 30px -18px rgba(31, 27, 22, .3);
  }
  .menu[data-mo="1"] { transform: none; }
  .menu a { padding: 15px 0; border-bottom: 1px solid var(--vach-mo); font-size: .95rem; }
  .menu a[aria-current] { border-bottom-color: var(--canh); }

  .mo-menu { display: block; }
  .dinh .nut { display: none; }

  /* Header chật hơn: thu logo và giãn chữ ít lại cho vừa một dòng */
  .dinh-trong { gap: 14px; }
  .hieu { gap: 9px; }
  .hieu-logo { width: 36px; height: 36px; }
  .hieu-chu b { font-size: .86rem; letter-spacing: .1em; }
  .hieu-chu span { font-size: .6rem; letter-spacing: .05em; }

  .dm-luoi { grid-template-columns: 1fr; }
  .buoc    { grid-template-columns: 1fr; }
  .sp-luoi { grid-template-columns: 1fr; }
  .ct-luoi { grid-template-columns: 1fr; }
  .chan-luoi { grid-template-columns: 1fr; }
  .ch details p { padding-right: 0; }

  /* Trên điện thoại: đổi nút nổi thành thanh gọi cố định dưới đáy */
  .noi { display: none; }
  .thanh-duoi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset: auto 0 0;
    z-index: 80;
    border-top: 1px solid var(--vach);
  }
  .thanh-duoi a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 10px;
    font-size: .87rem;
    font-weight: 500;
    letter-spacing: .03em;
    background: var(--canh);
    color: var(--tren-nau);
  }
  .thanh-duoi a.zalo { background: #0068FF; }
  .thanh-duoi a.wa   { background: #25D366; }
  .thanh-duoi svg { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   Điện thoại hẹp (dưới 560px) — chỗ trên thanh đầu trang không đủ cho
   logo + tên + dòng phụ + nút EN + nút menu, nên bỏ bớt dòng phụ.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Vẫn giữ dòng chữ nhỏ dưới tên — chỉ thu lại cho vừa, đừng ẩn đi */
  .hieu-chu span { font-size: .55rem; letter-spacing: .03em; }
  .hieu-chu b    { font-size: .82rem; letter-spacing: .08em; }
  .hieu-logo     { width: 34px; height: 34px; }
  .dinh-trong    { gap: 10px; height: 68px; }
  .menu          { inset: 68px 0 auto; }
  .doi-nn        { padding: 6px 9px; font-size: .64rem; letter-spacing: .1em; }
  .mo-menu       { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   Tôn trọng cài đặt giảm chuyển động của máy khách
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-kinh .anh-sang { display: none; }
  .js .hien { opacity: 1; transform: none; }
}