:root {
  --nen: #FBF8F4;
  --nen-2: #FFFFFF;
  --nen-3: #F3EDE4;
  --muc: #241B12;
  --muc-2: #5F5145;

  --muc-3: #77685A;
  --vien: #E6DCCF;
  --vien-dam: #D3C4B1;
  --nhan: #7A5230;
  --nhan-dam: #5C3D22;
  --nhan-nhat: #A8794E;
  --vang: #8C6222;
  --xanh: #2E6A4C;
  --do: #A8362F;

  --chan-nen: #2A2019;
  --chan-muc: #C9BBAE;
  --chan-nhat: #A3958A;

  --bk: 12px;
  --bk-nho: 8px;
  --bong: 0 1px 2px rgba(36, 27, 18, .05), 0 6px 20px rgba(36, 27, 18, .06);
  --bong-cao: 0 2px 6px rgba(36, 27, 18, .08), 0 18px 40px rgba(36, 27, 18, .12);
  --khung: 1240px;
  --chu: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
         "Noto Sans", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--chu);
  font-size: 16px;
  line-height: 1.65;
  color: var(--muc);
  background: var(--nen);
  overflow-wrap: break-word;
}

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--nhan); text-decoration: none; }
a:hover { color: var(--nhan-dam); text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.05rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }

.khung { width: 100%; max-width: var(--khung); margin-inline: auto; padding-inline: 20px; }
.giua { text-align: center; }
.an-di {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bo-qua {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--nhan); color: #fff; padding: 10px 16px;
}
.bo-qua:focus { left: 8px; top: 8px; }

.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 650; font-size: .97rem; line-height: 1.2; cursor: pointer;
  text-decoration: none; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.nut:hover { text-decoration: none; transform: translateY(-1px); }
.nut:active { transform: translateY(0); }
.nut--chinh { background: var(--nhan); color: #fff; box-shadow: 0 6px 18px rgba(122, 82, 48, .28); }
.nut--chinh:hover { background: var(--nhan-dam); color: #fff; }
.nut--vien { border-color: var(--vien-dam); color: var(--muc); background: transparent; }
.nut--vien:hover { border-color: var(--nhan); color: var(--nhan); background: #fff; }
.nut--sang { background: #fff; color: var(--nhan-dam); }
.nut--sang:hover { background: #fff; color: var(--nhan-dam); }
.nut--vien-sang { border-color: rgba(255, 255, 255, .55); color: #fff; }
.nut--vien-sang:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .12); }
.nut--nho { padding: 9px 17px; font-size: .9rem; }

.thanh-tren { background: var(--nhan-dam); color: #EFE3D6; font-size: .86rem; }
.thanh-tren__trong {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; min-height: 38px; flex-wrap: wrap;
}
.thanh-tren__diachi { opacity: .85; }

.thanh-tren__lienhe { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

@media (max-width: 620px) {
  .thanh-tren a.thanh-tren__so2 { display: none; }
}
.thanh-tren a { color: #EFE3D6; }
.thanh-tren a:hover { color: #fff; }
.thanh-tren .manh { font-weight: 700; color: #fff; }

.dau-trang {
  position: sticky; top: 0; z-index: 40;

  background: var(--nen);
  background: color-mix(in srgb, var(--nen) 95%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--vien);
}
.dau-trang__trong { display: flex; align-items: center; gap: 20px; min-height: 72px; }

.dau-trang:has(:hover), .dau-trang:has(:focus-within) { z-index: 45; }

.hieu { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hieu:hover { text-decoration: none; }
.hieu img { flex-shrink: 0; }
.hieu__chu { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.hieu__chu strong {
  font-size: 1.06rem; color: var(--muc); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hieu__chu small {
  font-size: .76rem; color: var(--muc-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dieu-huong { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.dieu-huong > a, .co-con > a {
  padding: 9px 13px; border-radius: var(--bk-nho); color: var(--muc-2);
  font-weight: 550; font-size: .96rem; white-space: nowrap;
}
.dieu-huong > a:hover, .co-con > a:hover { background: var(--nen-3); color: var(--muc); text-decoration: none; }
.dieu-huong .dang-o { color: var(--nhan); background: var(--nen-3); }

.dieu-huong > a.nut--chinh { color: #fff; }
.dieu-huong > a.nut--chinh:hover { color: #fff; background: var(--nhan-dam); }
.dieu-huong > a.nut--vien { color: var(--nhan); }

.co-con { position: relative; }
.co-con > a::after { content: " ▾"; font-size: .75em; opacity: .6; }
.menu-con {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--vien); border-radius: var(--bk);
  box-shadow: var(--bong-cao); padding: 8px; display: none; z-index: 50;
}
.co-con:hover .menu-con, .co-con:focus-within .menu-con { display: block; }
.menu-con a { display: block; padding: 9px 12px; border-radius: var(--bk-nho); color: var(--muc-2); font-size: .94rem; }
.menu-con a:hover { background: var(--nen-3); color: var(--nhan); text-decoration: none; }

.menu-con--rong { display: none; gap: 4px 10px; }
.co-con:hover .menu-con--rong, .co-con:focus-within .menu-con--rong { display: flex; }
.menu-con__cot { min-width: 208px; }
.menu-con__cot + .menu-con__cot { border-left: 1px solid var(--vien); padding-left: 10px; }
.menu-con__nhan {
  margin: 6px 0 2px; padding: 0 12px; font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muc-2);

}

.o-tim { display: flex; margin-left: 6px; }
.o-tim input {
  width: 190px; padding: 9px 13px; font: inherit; font-size: .92rem;
  border: 1px solid var(--vien-dam); border-right: 0;
  border-radius: 999px 0 0 999px; background: #fff; color: var(--muc);
}
.o-tim input:focus { outline: 2px solid var(--nhan-nhat); outline-offset: -1px; }
.o-tim button {
  padding: 9px 15px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--vien-dam); border-left: 0; border-radius: 0 999px 999px 0;
  background: var(--nen-3); color: var(--muc-2);
}
.o-tim button:hover { background: var(--nhan); color: #fff; border-color: var(--nhan); }

.nut-menu {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px;
  background: transparent; border: 1px solid var(--vien-dam); border-radius: var(--bk-nho); cursor: pointer;
}
.nut-menu span { display: block; height: 2px; background: var(--muc); border-radius: 2px; }
.nut-menu span + span { margin-top: 5px; }

.hero { background: linear-gradient(180deg, var(--nen-3) 0%, var(--nen) 100%); border-bottom: 1px solid var(--vien); }
.hero__trong {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  padding-block: clamp(40px, 6vw, 80px);
}
.nhan-nho {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vang); margin-bottom: 14px;
}
.hero__mota { font-size: 1.08rem; color: var(--muc-2); max-width: 52ch; }
.hero__nut { display: flex; gap: 12px; flex-wrap: wrap; margin-block: 26px 34px; }
.hero__diem { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hero__diem li { display: flex; flex-direction: column; padding-left: 13px; border-left: 3px solid var(--vang); }
.hero__diem strong { font-size: .96rem; }
.hero__diem span { font-size: .85rem; color: var(--muc-3); }

.hero__anh {
  position: relative; overflow: visible;
  aspect-ratio: 3 / 4; max-width: 470px; margin-inline: auto;
  border-radius: 18px; box-shadow: var(--bong-cao);
  background-color: var(--nen-3);
  background-image: url("/img/hero.jpg");
  background-image: image-set(url("/img/hero.webp") type("image/webp"), url("/img/hero.jpg") type("image/jpeg"));
  background-size: cover; background-position: center;
}

.phan { padding-block: clamp(44px, 5.5vw, 78px); }
.phan--nen { background: var(--nen-3); border-block: 1px solid var(--vien); }
.phan__dau { max-width: 62ch; margin-bottom: 32px; }
.phan__dau p { color: var(--muc-2); margin: 0; }

.luoi-dm { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.the-dm {
  display: flex; flex-direction: column; background: var(--nen-2);
  border: 1px solid var(--vien); border-radius: var(--bk); overflow: hidden;
  box-shadow: var(--bong); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.the-dm:hover { transform: translateY(-3px); box-shadow: var(--bong-cao); border-color: var(--vien-dam); text-decoration: none; }
.the-dm__anh { aspect-ratio: 4 / 3; background: var(--nen-3); overflow: hidden; }
.the-dm__anh img { width: 100%; height: 100%; object-fit: cover; }
.the-dm__chu { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.the-dm__chu h3, .the-dm__chu h4 { color: var(--muc); margin-bottom: 4px; font-size: 1.12rem; }

.nhom-dm + .nhom-dm { margin-top: 40px; }
.nhom-dm__dau {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px;
  margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--nhan);
}
.nhom-dm__dau h3 {
  margin: 0; font-size: 1.34rem; letter-spacing: .01em; color: var(--muc);
}
.nhom-dm__dau p { margin: 0; flex: 1 1 260px; font-size: .92rem; color: var(--muc-2); }
.nhom-dm__so {
  font-size: .8rem; font-weight: 700; color: var(--nhan);
  background: var(--nen-3); border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.the-dm__phu { font-size: .86rem; color: var(--vang); font-weight: 600; margin: 0 0 8px; }
.the-dm__mota { font-size: .9rem; color: var(--muc-2); margin: 0 0 14px; flex: 1; }
.the-dm__so { font-size: .82rem; color: var(--muc-3); font-weight: 600; }

.luoi-sp { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 20px; }

.the-sp {
  content-visibility: auto; contain-intrinsic-size: auto 380px;
  display: flex; flex-direction: column; background: var(--nen-2);
  border: 1px solid var(--vien); border-radius: var(--bk); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.the-sp:hover { transform: translateY(-3px); box-shadow: var(--bong-cao); border-color: var(--vien-dam); }
.the-sp__anh { position: relative; aspect-ratio: 1 / 1; background: var(--nen-3); overflow: hidden; }
.the-sp__lien { display: block; width: 100%; height: 100%; }
.the-sp__anh img { width: 100%; height: 100%; object-fit: cover; }
.the-sp__ma {
  position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(36, 27, 18, .78); color: #fff; font-size: .76rem; font-weight: 700;
  letter-spacing: .02em; backdrop-filter: blur(4px);
}
.the-sp__than { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.the-sp__than h3 { font-size: 1rem; margin-bottom: 5px; }
.the-sp__than h3 a { color: var(--muc); }
.the-sp__than h3 a:hover { color: var(--nhan); text-decoration: none; }
.the-sp__tom { font-size: .87rem; color: var(--muc-2); margin: 0 0 6px; }
.the-sp__quy { font-size: .82rem; color: var(--muc-3); margin: 0 0 12px; }
.the-sp__hanh-dong {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.the-sp__bao { font-size: .87rem; font-weight: 650; white-space: nowrap; }
.the-sp__bao::after { content: " →"; }

.nut-gio {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-weight: 650;
}
.nut-gio .nut-gio__xong { display: none; }
.nut-gio.da-chon .nut-gio__bt { display: none; }
.nut-gio.da-chon .nut-gio__xong { display: block; }

.nut-gio--nho {
  padding: 7px 13px; border: 1px solid var(--vien-dam); border-radius: 999px;
  background: #fff; color: var(--muc-2); font-size: .85rem;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.nut-gio--nho:hover { border-color: var(--nhan); color: var(--nhan); }
.nut-gio--nho.da-chon { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nut-gio--nho.da-chon:hover { background: #24563d; border-color: #24563d; color: #fff; }
.nut-gio.nut--chinh.da-chon { background: var(--xanh); box-shadow: 0 6px 18px rgba(46, 106, 76, .28); }
.nut-gio.nut--chinh.da-chon:hover { background: #24563d; }

.luoi-diem { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.diem { padding: 22px; background: var(--nen-2); border: 1px solid var(--vien); border-radius: var(--bk); }
.diem h3 { color: var(--nhan-dam); }
.diem p { margin: 0; font-size: .93rem; color: var(--muc-2); }

.dai-goi { background: var(--nhan-dam); color: #F6EDE3; }
.dai-goi__trong {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap; padding-block: 42px;
}
.dai-goi h2 { color: #fff; margin-bottom: 6px; }
.dai-goi p { margin: 0; opacity: .85; }
.dai-goi__nut { display: flex; gap: 12px; flex-wrap: wrap; }

.chan-trang { background: var(--chan-nen); color: var(--chan-muc); font-size: .92rem; }
.chan-trang__luoi {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-block: 48px 36px;
}
.chan-cot h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.chan-cot ul { list-style: none; margin: 0 0 22px; padding: 0; }
.chan-cot li { margin-bottom: 8px; }
.chan-trang a { color: var(--chan-muc); }
.chan-trang a:hover { color: #fff; }
.hieu--chan .hieu__chu strong { color: #fff; }
.hieu--chan .hieu__chu small { color: var(--chan-nhat); }
.chan-mota { margin: 16px 0 18px; max-width: 46ch; }
.chan-tt { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: .88rem; }
.chan-tt dt { color: var(--chan-nhat, #6E6055); }
.chan-tt dd { margin: 0; }
.chan-cuoi {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .09); font-size: .85rem; color: var(--chan-nhat, #6E6055);
}
.chan-cuoi a { color: var(--chan-nhat, #6E6055); }

.lien-he-nhanh {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.lhn {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .82rem;
  box-shadow: var(--bong-cao);
}

.lhn[hidden], .lhn__so[hidden] { display: none; }
.lhn:hover { color: #fff; text-decoration: none; transform: scale(1.05); }
.lhn--goi { background: var(--xanh); }

.lhn--zalo {
  background: #0068FF; width: auto; border-radius: 999px;
  padding: 0 18px; gap: 8px; font-size: .88rem; letter-spacing: -.01em;
}
.lhn--gio { background: var(--nhan); position: relative; }

button.lhn { border: 0; font: inherit; font-weight: 700; cursor: pointer; }

.lhn-tro { position: relative; }
.bang-tro {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  width: max-content; max-width: min(320px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border-radius: 14px;
  background: var(--nen-2); border: 1px solid var(--vien);
  box-shadow: var(--bong-cao);

  z-index: 61;
}
.bang-tro[hidden] { display: none; }
.bang-tro__dau {
  margin: 0 2px 4px; font-size: .76rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muc-2); opacity: .7;
}
.bang-tro__nut {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: .93rem; color: #fff; white-space: nowrap;
}
.bang-tro__nut b { font-weight: 800; letter-spacing: .01em; }
.bang-tro__nut:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }
.bang-tro__nut:focus-visible { outline: 2px solid var(--muc); outline-offset: 2px; }
.bang-tro__nut--goi { background: var(--xanh); }
.bang-tro__nut--zalo { background: #0068FF; }
.lhn__so {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;

  border-radius: 999px; background: var(--vang); color: #fff;
  font-size: .74rem; font-weight: 800; border: 2px solid var(--nen);
}

@media (max-width: 820px) {
  .lien-he-nhanh {
    right: 0;

    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  .lhn {
    width: 46px; height: 46px;
    border-radius: 999px 0 0 999px;
  }
  .lhn--zalo { width: auto; padding: 0 13px 0 16px; border-radius: 999px 0 0 999px; }

  .bang-tro { border-radius: 14px 0 0 14px; border-right: 0; }

  .lhn--gio .lhn__so { right: auto; left: -6px; }

  .lhn:hover { transform: none; }
}

.lien-gio { position: relative; }
.lien-gio__so {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; margin-left: 7px; padding: 0 6px;
  border-radius: 999px; background: rgba(255, 255, 255, .25);
  font-size: .78rem; font-weight: 800;
}
.lien-gio__so[hidden] { display: none; }

.bao-nho {
  position: fixed; left: 50%; bottom: 24px; z-index: 210;
  transform: translate(-50%, 12px); opacity: 0;
  max-width: min(92vw, 460px); padding: 12px 20px; border-radius: 999px;
  background: #2A2019; color: #F6EDE3; font-size: .92rem; font-weight: 550;
  box-shadow: var(--bong-cao); text-align: center;
  transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.bao-nho.hien { opacity: 1; transform: translate(-50%, 0); }

.trang-trong { padding-bottom: clamp(44px, 5vw, 72px); }
.duong-dan { font-size: .86rem; color: var(--muc-3); padding-block: 18px 0; }
.duong-dan a { color: var(--muc-2); }
.duong-dan span { margin-inline: 6px; opacity: .5; }

.dau-muc { padding-block: 14px 26px; border-bottom: 1px solid var(--vien); margin-bottom: 28px; }
.dau-muc h1 { margin-bottom: 8px; }
.dau-muc__phu { color: var(--vang); font-weight: 600; margin: 0 0 6px; }
.dau-muc p { color: var(--muc-2); max-width: 72ch; margin: 0; }

.thanh-loc {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  justify-content: space-between; margin-bottom: 24px;
}
.thanh-loc__dem { color: var(--muc-3); font-size: .9rem; }
.o-tim-lon { display: flex; max-width: 380px; width: 100%; }
.o-tim-lon input {
  flex: 1; padding: 11px 16px; font: inherit; font-size: .95rem;
  border: 1px solid var(--vien-dam); border-right: 0; border-radius: var(--bk-nho) 0 0 var(--bk-nho); background: #fff;
}
.o-tim-lon button {
  padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--nhan); background: var(--nhan); color: #fff;
  border-radius: 0 var(--bk-nho) var(--bk-nho) 0;
}
.o-tim-lon button:hover { background: var(--nhan-dam); }

.the-loc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.the-loc a {
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--vien-dam);
  font-size: .89rem; color: var(--muc-2); background: #fff;
}
.the-loc a:hover { border-color: var(--nhan); color: var(--nhan); text-decoration: none; }
.the-loc .dang-o { background: var(--nhan); border-color: var(--nhan); color: #fff; }

.the-loc a.dang-o:hover { color: #fff; }

.loc-tong { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.loc-tong__nut {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 8px; border-radius: 999px; border: 1px solid var(--vien-dam);
  font-size: .87rem; color: var(--muc-2); background: #fff; line-height: 1.4;
}
.loc-tong__nut:hover { border-color: var(--nhan); color: var(--nhan); text-decoration: none; }
.loc-tong .dang-o { background: var(--nhan); border-color: var(--nhan); color: #fff; }

.loc-tong a.dang-o:hover { color: #fff; }

.loc-tong__cham {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .22); box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .12);
}

.loc-tong__cham--trang { background: #f2f1ee; }
.loc-tong__cham--xam { background: #9b9691; }
.loc-tong__cham--den { background: #242424; }
.loc-tong__cham--go-sang { background: #d9c6a6; }
.loc-tong__cham--go-vang { background: #b8905c; }
.loc-tong__cham--nau { background: #75593f; }
.loc-tong__cham--nau-dam { background: #41291d; }
.loc-tong__cham--do { background: #8d3630; }
.loc-tong__cham--vang { background: #cbb04a; }
.loc-tong__cham--xanh-la { background: #6f8f5c; }
.loc-tong__cham--xanh-duong { background: #5f87a6; }
.loc-tong__cham--tim { background: #c39ab5; }
.loc-tong__so { opacity: .62; font-size: .82em; }
.loc-tong .dang-o .loc-tong__cham { border-color: rgba(255, 255, 255, .55); }

.mau-gan { display: flex; gap: 10px; flex-wrap: wrap; }
.mau-gan__o { width: 96px; }
.mau-gan__anh {
  display: block; width: 96px; height: 96px; border-radius: var(--bk-nho);
  overflow: hidden; border: 1px solid var(--vien);
}
.mau-gan__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mau-gan__ten {
  display: block; margin-top: 5px; font-size: .8rem; color: var(--muc-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mau-gan__ten:hover { color: var(--nhan); }

.trong-rong { text-align: center; padding: 60px 20px; color: var(--muc-3); }

.phan-trang { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.phan-trang a, .phan-trang span {
  min-width: 42px; padding: 9px 13px; text-align: center; border-radius: var(--bk-nho);
  border: 1px solid var(--vien-dam); background: #fff; color: var(--muc-2); font-size: .92rem;
}
.phan-trang a:hover { border-color: var(--nhan); color: var(--nhan); text-decoration: none; }
.phan-trang .dang-o { background: var(--nhan); border-color: var(--nhan); color: #fff; font-weight: 700; }
.phan-trang .cach { border: 0; background: transparent; }

.sp-chi-tiet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding-block: 10px 20px; }

.sp-anh__chinh {
  width: fit-content; max-width: 100%; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--vien); border-radius: var(--bk); overflow: hidden;
  background: var(--nen-3); box-shadow: var(--bong);
}
.sp-anh__chinh > picture { display: block; }
.sp-anh__chinh img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(62vh, 620px);
  object-fit: contain;
}
.sp-anh__nho { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 9px; margin-top: 12px; }
.sp-anh__nho button {
  padding: 0; border: 2px solid var(--vien); border-radius: var(--bk-nho); overflow: hidden;
  background: none; cursor: pointer; aspect-ratio: 1 / 1;
}
.sp-anh__nho button img { width: 100%; height: 100%; object-fit: cover; }
.sp-anh__nho .dang-chon { border-color: var(--nhan); }

.sp-anh__cong-cu {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; gap: 8px; align-items: flex-start;
}

.sp-anh__cong-cu[hidden] { display: none; }
.sp-anh__cong-cu .nut-phong-to { position: static; }

.nut-3d {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border: 0; border-radius: 999px;
  background: rgba(122, 82, 48, .88); color: #fff;
  font: inherit; font-size: .87rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s ease, transform .12s ease;
}
.nut-3d:hover { background: var(--nhan-dam); transform: scale(1.04); }
.nut-3d:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nut-3d[hidden] { display: none; }

.sp-3d {
  position: absolute; inset: 0; z-index: 4;
  background: radial-gradient(120% 100% at 50% 0%,
    var(--n3d-giua, #3B2E22) 0%, var(--n3d-chinh, #241B12) 70%, var(--n3d-ria, #17110A) 100%);
  transition: background .45s ease;
  cursor: grab; touch-action: none;
}
.sp-3d.dang-keo { cursor: grabbing; }
.sp-3d[hidden] { display: none; }

.sp-3d canvas { position: absolute; inset: 0; z-index: 2; }
.sp-3d:focus-visible { outline: 2px solid var(--vang); outline-offset: -3px; }

.sp-3d__cho {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center;
  color: var(--n3d-chu, #E8B45C);
  font-size: clamp(1.1rem, 1.6vw + .6rem, 1.7rem);
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 0 22px rgba(232, 180, 92, .45), 0 2px 10px rgba(0, 0, 0, .6);
  transition: color .45s ease;
  pointer-events: none;
}

.sp-3d.nen-sang .sp-3d__cho { text-shadow: 0 1px 8px rgba(255, 255, 255, .75); }
.sp-3d__nut {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.sp-3d__n {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border: 1px solid var(--n3d-nut-vien, rgba(255, 255, 255, .28)); border-radius: 999px;
  background: var(--n3d-nut-nen, rgba(0, 0, 0, .45)); color: var(--n3d-nut-chu, #fff);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s ease, border-color .15s ease, color .45s ease;
}
.sp-3d__n:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); }

.sp-3d__n--ve { background: rgba(0, 0, 0, .3); color: #D8CBBD; }
.sp-3d__n--ve:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.sp-3d.nen-sang .sp-3d__n--ve { background: rgba(255, 255, 255, .5); color: #4A3B2C; }
.sp-3d.nen-sang .sp-3d__n:hover { background: rgba(0, 0, 0, .12); border-color: rgba(0, 0, 0, .4); }
.sp-3d.nen-sang .sp-3d__n--ve:hover { background: rgba(0, 0, 0, .1); color: #20160E; }

.sp-3d__n--vuong { padding: 0; width: 38px; height: 38px; justify-content: center; }
.sp-3d__n--vuong .ic-nho { display: none; }
.sp-3d__n--vuong.dang-to .ic-to { display: none; }
.sp-3d__n--vuong.dang-to .ic-nho { display: block; }
.sp-3d__n:focus-visible { outline: 2px solid var(--vang); outline-offset: 2px; }

dialog.hop-3d {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
}

dialog.hop-3d::backdrop { background: rgba(8, 6, 4, .97); }

.sp-3d.toan-man {
  position: absolute; inset: 0; border-radius: 0;
  background: radial-gradient(70% 60% at 50% 45%,
    var(--n3d-giua, #2A2019) 0%, var(--n3d-chinh, #16100A) 55%, var(--n3d-ria, #0B0805) 100%);
}
.sp-3d.toan-man .sp-3d__cho { font-size: clamp(1.4rem, 3.4vw, 3rem); letter-spacing: .18em; }
.sp-3d.toan-man .sp-3d__nut { top: 18px; right: 20px; }
.sp-3d.toan-man .sp-3d__meo { padding: 16px; font-size: .88rem; }
.sp-3d__meo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; margin: 0;
  padding: 10px; text-align: center; font-size: .8rem; color: var(--n3d-meo, #C9BBAE);
  background: linear-gradient(0deg, rgba(0, 0, 0, .45), transparent);
  transition: color .45s ease;
  pointer-events: none;
}
.sp-3d.nen-sang .sp-3d__meo { background: linear-gradient(0deg, rgba(255, 255, 255, .55), transparent); }

.hero__khung { position: relative; }

.hero__anh.co-3d {
  background-image: none;
  background: radial-gradient(120% 100% at 50% 0%,
    var(--n3d-giua, #3B2E22) 0%, var(--n3d-chinh, #241B12) 68%, var(--n3d-ria, #17110A) 100%);
  transition: background .6s ease;
  z-index: 41;
  pointer-events: none;
}

.hero__tran { position: absolute; inset: -12% 0; z-index: 1; pointer-events: none; }
.hero__tran canvas { display: block; width: 100%; height: 100%; }

.hero__moi {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 470px; margin: 14px auto 0;
  padding: 12px 18px; border-radius: 14px;
  background: var(--nen-2); color: var(--muc);
  border: 1px solid var(--vien); box-shadow: var(--bong);
  transition: background .18s ease, border-color .18s ease, transform .16s ease;
}
.hero__moi:hover {
  background: var(--nhan); border-color: var(--nhan);
  color: #fff; text-decoration: none; transform: translateY(-2px);
}
.hero__moi__chinh { font-size: .93rem; font-weight: 700; letter-spacing: -.005em; }
.hero__moi__phu {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 650; color: var(--vang); white-space: nowrap;
}
.hero__moi:hover .hero__moi__phu { color: #fff; }
.hero__moi__mui { display: inline-block; transition: transform .18s ease; }
.hero__moi:hover .hero__moi__mui { transform: translateX(4px); }

@media (max-width: 560px) {
  .hero__moi { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; }
  .hero__moi__chinh { font-size: .86rem; }
}

.luoi-sp, .luoi-dm, .luoi-diem { perspective: 1100px; }

.the-sp, .the-dm, .diem {
  transform: rotateX(var(--nghieng-x, 0deg)) rotateY(var(--nghieng-y, 0deg));
  transition: transform .32s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease, border-color .16s ease;
}
.the-sp.dang-nghieng, .the-dm.dang-nghieng, .diem.dang-nghieng {
  transition: transform .08s linear, box-shadow .25s ease;
  box-shadow: var(--bong-cao);
}

.the-sp.dang-nghieng:hover, .the-dm.dang-nghieng:hover { transform: rotateX(var(--nghieng-x, 0deg)) rotateY(var(--nghieng-y, 0deg)); }

.sp-anh__chinh { position: relative; }
.sp-anh__chinh.co-phong-to { cursor: zoom-in; }

.nut-phong-to {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border: 0; border-radius: 999px;
  background: rgba(36, 27, 18, .74); color: #fff;
  font: inherit; font-size: .87rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s ease, transform .12s ease, opacity .15s ease;
}
.nut-phong-to:hover { background: var(--nhan); transform: scale(1.06); }
.nut-phong-to:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }

.nut-phong-to--vuong { padding: 0; width: 38px; height: 38px; }

body.khoa-cuon { overflow: hidden; }

dialog.phong-to {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; color: #fff;
  overflow: hidden;
}
dialog.phong-to::backdrop { background: rgba(20, 15, 10, .94); }

dialog.phong-to.khong-co-dialog:not([open]) { display: none; }
dialog.phong-to.khong-co-dialog.dang-mo {
  position: fixed; inset: 0; z-index: 200;
  display: block; background: rgba(20, 15, 10, .94);
}

.phong-to__thanh {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 100%);
}
.phong-to__dem { font-size: .92rem; font-weight: 600; opacity: .9; }
.phong-to__thanh-nut { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.phong-to__thanh-nut .phong-to__nut { padding: 9px 16px; }

.phong-to__nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  background: rgba(0, 0, 0, .45); color: #fff;
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s ease, border-color .15s ease;
}
.phong-to__nut:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }
.phong-to__nut:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.phong-to__dong { padding: 9px 18px; }

.phong-to__lui, .phong-to__toi {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; padding: 0; font-size: 1.9rem; line-height: 1;
}
.phong-to__lui { left: 16px; }
.phong-to__toi { right: 16px; }
.phong-to__lui[hidden], .phong-to__toi[hidden] { display: none; }

.phong-to__khung {
  width: 100%; height: 100%; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 62px 16px 54px;
  -webkit-overflow-scrolling: touch;
}
.phong-to__anh {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; cursor: zoom-in; margin: auto;
  border-radius: 4px;
}
.phong-to__anh.co-that {
  max-width: none; max-height: none; width: auto; cursor: zoom-out;
}

.phong-to__meo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0;
  padding: 12px 18px; text-align: center; font-size: .84rem; opacity: .75;
  background: linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.sp-ma { font-size: .84rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vang); }
.dai-sach {
  display: flex; align-items: center; gap: 14px; margin-top: 20px;
  padding: 16px 18px; border-radius: var(--bk);
  border: 1px solid var(--vien-dam); background: var(--nen-3); color: var(--muc);
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.dai-sach:hover {
  text-decoration: none; border-color: var(--nhan); background: #fff;
  transform: translateY(-1px); box-shadow: var(--bong);
}
.dai-sach svg { color: var(--nhan); flex-shrink: 0; }
.dai-sach__chu { display: flex; flex-direction: column; line-height: 1.35; flex: 1; }
.dai-sach__chu strong { font-size: 1rem; }
.dai-sach__chu small { font-size: .86rem; color: var(--muc-2); }
.dai-sach__mui { font-size: 1.5rem; color: var(--nhan); line-height: 1; }

.sp-thong-so { width: 100%; border-collapse: collapse; margin-block: 20px 26px; font-size: .94rem; }
.sp-thong-so th, .sp-thong-so td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--vien); vertical-align: top; }
.sp-thong-so th { width: 34%; color: var(--muc-3); font-weight: 550; }
.sp-nut { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }

.sp-ghi-chu { font-size: .89rem; color: var(--muc-2); background: var(--nen-3); border-radius: var(--bk-nho); padding: 14px 16px; }
.sp-mo-ta { margin-top: 34px; }
.sp-mo-ta h2 { font-size: 1.25rem; }
.sp-mo-ta p { color: var(--muc-2); }

.luoi-mau { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }

.o-mau { content-visibility: auto; contain-intrinsic-size: auto 250px; }
.o-mau {
  display: flex; flex-direction: column; border: 1px solid var(--vien);
  border-radius: var(--bk-nho); overflow: hidden; background: #fff;
}
.o-mau:hover { border-color: var(--nhan); box-shadow: var(--bong); }
.o-mau__anh { position: relative; aspect-ratio: 1 / 1.35; background: var(--nen-3); overflow: hidden; }
.o-mau__anh > a { display: block; width: 100%; height: 100%; }
.o-mau__anh img { width: 100%; height: 100%; object-fit: cover; }
.o-mau__ten {
  display: block; padding: 8px 10px 6px; font-size: .82rem; font-weight: 650;
  color: var(--muc); text-align: center;
}
.o-mau__ten:hover { color: var(--nhan); }
.o-mau .nut-gio--nho {
  margin: 0 8px 8px; justify-content: center; padding: 6px 10px; font-size: .78rem;
}

.pc-khoi { margin: 26px 0 0; content-visibility: auto; contain-intrinsic-size: auto 320px; }
.pc-khoi__ten {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding-bottom: 8px; font-size: 1.06rem;
  border-bottom: 1px solid var(--vien);
}
.pc-khoi__ten a { color: var(--muc); }
.pc-khoi__ten a:hover { color: var(--nhan); }
.pc-khoi__ten small { font-weight: 400; font-size: .86rem; color: var(--muc-2); }

.pc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pc-o {
  display: block; padding: 0; border: 1px solid var(--vien); background: var(--nen-3);
  border-radius: var(--bk-nho); overflow: hidden; cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.pc-o img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-o:hover { border-color: var(--nhan); box-shadow: var(--bong); }
.pc-o:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }

.khung-hep { max-width: 780px; }
.bieu-mau { display: grid; gap: 16px; }
.hang-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.o-nhap { display: flex; flex-direction: column; gap: 6px; }
.o-nhap label { font-size: .89rem; font-weight: 600; color: var(--muc-2); }
.o-nhap .bat-buoc { color: var(--do); }
.o-nhap input, .o-nhap textarea, .o-nhap select {
  padding: 11px 14px; font: inherit; font-size: .96rem; color: var(--muc);
  border: 1px solid var(--vien-dam); border-radius: var(--bk-nho); background: #fff; width: 100%;
}
.o-nhap textarea { min-height: 120px; resize: vertical; }
.o-nhap input:focus, .o-nhap textarea:focus, .o-nhap select:focus {
  outline: 2px solid var(--nhan-nhat); outline-offset: -1px; border-color: var(--nhan-nhat);
}
.o-nhap small { font-size: .82rem; color: var(--muc-3); }
.o-ong { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bao-loi { background: #FCEFEE; border: 1px solid #E9C4C0; color: #8C2F27; padding: 13px 16px; border-radius: var(--bk-nho); }
.bao-loi ul { margin: 0; padding-left: 20px; }
.bao-ok { background: #EAF5EF; border: 1px solid #B9DBC8; color: #23553D; padding: 18px 20px; border-radius: var(--bk-nho); }
.bao-ok h2 { color: #23553D; font-size: 1.2rem; }

.luoi-lien-he { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.the-tt { background: #fff; border: 1px solid var(--vien); border-radius: var(--bk); padding: 24px; }
.the-tt dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; margin: 0; }
.the-tt dt { color: var(--muc-3); font-size: .89rem; }
.the-tt dd { margin: 0; font-size: .96rem; }
.ban-do { border: 1px solid var(--vien); border-radius: var(--bk); overflow: hidden; aspect-ratio: 16 / 10; }
.ban-do iframe { width: 100%; height: 100%; border: 0; display: block; }
.ban-do__nut { margin: 12px 0 0; }

.gio-bang {
  border: 1px solid var(--vien); border-radius: var(--bk);
  background: #fff; overflow: hidden; margin-bottom: 34px;
}
.gio-hang-muc {
  display: grid;
  grid-template-columns: 64px minmax(160px, 1.6fr) auto minmax(180px, 1.4fr) 36px;
  gap: 14px; align-items: center; padding: 12px 14px;
  border-bottom: 1px solid var(--vien);
}
.gio-hang-muc:last-child { border-bottom: 0; }
.gio-hang-muc:nth-child(even) { background: #FDFBF8; }

.gio-anh { width: 64px; height: 64px; border-radius: var(--bk-nho); overflow: hidden; background: var(--nen-3); }
.gio-anh img { width: 100%; height: 100%; object-fit: cover; }

.gio-ten { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gio-ten strong { font-size: .88rem; color: var(--vang); letter-spacing: .02em; }
.gio-ten a { font-size: .95rem; color: var(--muc); }
.gio-ten a:hover { color: var(--nhan); }

.gio-sl { display: flex; gap: 8px; align-items: center; }
.gio-sl input[type="number"] { width: 88px; text-align: right; }
.gio-sl select { width: 84px; }
.gio-sl input, .gio-sl select, .gio-gc input {
  padding: 9px 11px; font: inherit; font-size: .93rem; color: var(--muc);
  border: 1px solid var(--vien-dam); border-radius: var(--bk-nho); background: #fff;
}
.gio-gc input { width: 100%; }
.gio-sl input:focus, .gio-sl select:focus, .gio-gc input:focus {
  outline: 2px solid var(--nhan-nhat); outline-offset: -1px;
}

.gio-bo {
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--vien-dam); border-radius: 50%;
  background: #fff; color: var(--muc-3); font-size: .95rem; line-height: 1;
}
.gio-bo:hover { border-color: var(--do); color: var(--do); background: #FDF4F3; }

.gio-form { max-width: 780px; }
.gio-form h2 { font-size: 1.2rem; margin-bottom: 6px; }
.nut-lien {
  background: none; border: 0; padding: 0; font: inherit; font-size: .89rem;
  color: var(--nhan); cursor: pointer;
}
.nut-lien:hover { text-decoration: underline; }
.nut-lien--do { color: var(--do); }

.trang-loi { text-align: center; padding-block: 90px; }
.trang-loi .ma { font-size: 4.5rem; font-weight: 800; color: var(--vien-dam); line-height: 1; }

@media (max-width: 1000px) {
  .hero__trong { grid-template-columns: 1fr; gap: 32px; }

  .hero__anh { order: -1; aspect-ratio: 4 / 5; max-width: 360px; }
  .sp-chi-tiet { grid-template-columns: 1fr; gap: 28px; }
  .chan-trang__luoi { grid-template-columns: 1fr 1fr; }
  .chan-cot--rong { grid-column: 1 / -1; }
  .luoi-lien-he { grid-template-columns: 1fr; }
}

@media (max-width: 1140px) {
  .nut-menu { display: block; }

  .dieu-huong {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--nen-2); border-bottom: 1px solid var(--vien);
    box-shadow: var(--bong-cao); padding: 12px 16px 18px;
    max-height: 78vh;
    max-height: 78dvh;
    overflow-y: auto;

    overscroll-behavior: contain;
  }
  .dieu-huong.mo { display: flex; }
  .dieu-huong > a, .co-con > a { padding: 12px 10px; }
  .co-con { position: static; }
  .menu-con { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; }

  .menu-con--rong { display: block; }
  .co-con:hover .menu-con--rong, .co-con:focus-within .menu-con--rong { display: block; }
  .menu-con__cot + .menu-con__cot { border-left: 0; padding-left: 0; margin-top: 6px; }
  .o-tim { margin: 8px 0; }
  .o-tim input { width: 100%; }
}

@media (max-width: 820px) {
  .thanh-tren__diachi { display: none; }
  .hero__diem { grid-template-columns: 1fr; gap: 12px; }
  .hang-2 { grid-template-columns: 1fr; }

  .gio-hang-muc {
    grid-template-columns: 64px 1fr 32px;
    grid-template-areas: "anh ten bo" "anh sl sl" "gc gc gc";
    row-gap: 10px;
  }
  .gio-anh { grid-area: anh; }
  .gio-ten { grid-area: ten; }
  .gio-sl { grid-area: sl; }
  .gio-gc { grid-area: gc; }
  .gio-bo { grid-area: bo; }
}

@media (max-width: 560px) {
  .nut-phong-to { right: 8px; top: 8px; padding: 8px 13px; font-size: .82rem; }
  .phong-to__lui { left: 8px; }
  .phong-to__toi { right: 8px; }
  .phong-to__lui, .phong-to__toi { width: 42px; height: 42px; font-size: 1.6rem; }
  .phong-to__khung { padding: 58px 8px 48px; }
  .phong-to__meo { font-size: .78rem; }
  .luoi-sp { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
  .luoi-mau { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .chan-trang__luoi { grid-template-columns: 1fr; gap: 26px; }
  .dai-goi__trong { padding-block: 32px; }
}

@media (max-width: 420px) {
  .khung { padding-inline: 12px; }
  .dau-trang__trong { gap: 10px; min-height: 62px; }

  .hieu__chu small { display: none; }
  .hieu__chu strong { font-size: .96rem; }
  .hieu img { width: 34px; height: 34px; }
  .thanh-tren { font-size: .78rem; }
  .thanh-tren__lienhe { gap: 10px; }

  .the-tt dl, .chan-tt, .yc-tt { grid-template-columns: 1fr; gap: 2px; }
  .the-tt dt, .chan-tt dt { margin-top: 9px; }
  .the-tt dd, .chan-tt dd, .gio-ten a { overflow-wrap: anywhere; }
  .the-tt { padding: 18px 16px; }

  .chan-cot li { margin-bottom: 4px; }
  .chan-cot a, .thanh-tren a, .the-sp__bao, .duong-dan a, .chan-cuoi a {
    display: inline-block; padding: 6px 0;
  }
  .thanh-tren__trong { min-height: 44px; }
  .thanh-tren .manh { font-weight: 800; font-size: .92rem; }

  .luoi-mau { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .luoi-sp { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .nut { padding: 12px 18px; font-size: .93rem; }
  .hero__nut .nut, .sp-nut .nut, .sp-nut .nut-gio { width: 100%; }
  .dai-goi__nut { width: 100%; }
  .dai-goi__nut .nut { flex: 1; }
}

@media (max-width: 340px) {
  .khung { padding-inline: 10px; }
  .hieu__chu strong { font-size: .9rem; }
  .luoi-mau { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .luoi-sp { grid-template-columns: 1fr; }
  .o-tim input { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }

.nhom-gia { margin: 28px 0; }
.nhom-gia h2 { font-size: 1.15rem; margin: 0 0 12px; }
.nhom-gia h2 small { font-weight: 400; color: var(--muc-3); font-size: .8em; }

.bang-gia { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 620px; }
.bang-gia th, .bang-gia td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--vien);
}
.bang-gia thead th {
  background: var(--nen-2); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muc-2); white-space: nowrap;
}
.bang-gia tbody tr:hover { background: var(--nen-2); }
.bang-gia .phai { text-align: right; }
.bang-gia .ma-hang { font-weight: 600; white-space: nowrap; }
.bang-gia .gia { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bang-gia .gia small { color: var(--muc-3); font-weight: 400; }
.bang-gia .gia__ghi { display: block; font-size: .78rem; }

.rao-gia {
  background: #FFF6E5; border: 1px solid #E9D4A8; border-radius: var(--bk-nho);
  padding: 14px 18px; margin: 18px 0 24px; font-size: .92rem; line-height: 1.6;
}
.rao-gia--duoi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 560px) {
  .bang-gia { font-size: .86rem; min-width: 0; }
  .bang-gia th, .bang-gia td { padding: 8px 10px; }
  .bang-gia .ten-dai { display: none; }
}
.nhom-gia__quy-cach { margin: -6px 0 12px; font-size: .87rem; color: var(--muc-3); }