@charset "UTF-8";

@font-face{
  font-family:'Montserrat';
  font-style:normal;

  font-weight:100 900;

  font-display:swap;
  src:url('../fonts/montserrat-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:'Montserrat';
  font-style:normal;

  font-weight:100 900;

  font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Montserrat';
  font-style:normal;

  font-weight:100 900;

  font-display:swap;
  src:url('../fonts/montserrat-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;
}

:root{

  --nen:#131313;
  --nen-noi:#1B1B1B;
  --nen-mo-man:#171717;
  --nen-luoi:#1A1A1A;

  --chu:#EDE7E0;
  --chu-nhat:#C4BCB4;
  --chu-mo:#9C948C;

  --vien:#2C2A28;
  --vien-sang:#413D39;

  --trang:#FFFFFF;
  --nau-800:#493222;
  --dong:#CBAA7D;
  --do:#D9534F;

  --khung:1240px;
  --le:clamp(16px, 5vw, 56px);
  --khoang-muc:clamp(56px, 9vw, 104px);

  --bo:14px;
  --bo-the:18px;

  --nhanh:.18s ease;
  --vua:.32s ease;

  --chu-font:'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --dam-to:200;
  --dam-vua:300;
  --dam-thuong:400;
  --dam-nhan:500;
  --dam-nhan-manh:600;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;

  scrollbar-gutter:stable;
}
body{
  margin:0; background:var(--nen); color:var(--chu);
  font-family:var(--chu-font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul{list-style:none; margin:0; padding:0}
h1,h2,h3,p{margin:0}
del{color:var(--chu-mo)}
:focus-visible{outline:2px solid var(--dong); outline-offset:3px; border-radius:4px}

.an-nhin{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.khung{width:100%; max-width:var(--khung); margin-inline:auto; padding-inline:var(--le)}
.muc{padding-block:var(--khoang-muc)}
.muc--vien{border-top:1px solid var(--vien)}
.muc--hep{padding-block:clamp(40px, 6vw, 68px); border-top:1px solid var(--vien)}
.muc--dau-trang{padding-top:calc(var(--khoang-muc) + 96px)}

.ct.muc--dau-trang{padding-top:clamp(120px, 11vw, 150px)}

.muc--sat-banner{padding-top:clamp(26px, 3.2vw, 44px)}

.muc__dau{max-width:56ch; margin-bottom:clamp(28px, 4vw, 44px)}
.nhan{
  display:block; margin-bottom:12px;
  font-size:12px; font-weight:var(--dam-nhan); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dong);
}
.muc__dau h2{
  font-size:clamp(26px, 4.4vw, 40px); line-height:1.15;
  font-weight:var(--dam-to); letter-spacing:-.02em;
}
.muc__dau p{margin-top:14px; color:var(--chu-nhat); font-size:clamp(14.5px,1.5vw,16.5px)}
.muc__chan{margin-top:clamp(28px, 4vw, 44px); display:flex; justify-content:center}
.muc__dau--giua{margin-inline:auto; text-align:center}

.ic{
  width:24px; height:24px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic--nho{width:16px; height:16px}
.ic--to{width:30px; height:30px; stroke-width:1.4}

.nut{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; border-radius:999px;
  border:1px solid var(--vien-sang); color:var(--chu);
  font-size:15px; font-weight:var(--dam-nhan);
  transition:background var(--nhanh), border-color var(--nhanh);
}
.nut:hover{background:var(--nen-noi); border-color:var(--dong)}

.nut--dac{
  background:var(--dong); border-color:var(--dong);
  color:#231A05; font-weight:var(--dam-nhan);
}
.nut--dac:hover{background:#DCBC8E; border-color:#DCBC8E}
.nut .ic{transition:transform var(--vua)}
.nut:hover .ic{transform:translateX(4px)}

.nut-tron{
  position:relative;
  width:42px; height:42px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  transition:background var(--nhanh);
}
.nut-tron:hover{background:rgba(255,255,255,.08)}
.nut-tron__so{
  position:absolute; top:3px; right:2px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--dong); color:#231A05;
  font-size:10px; font-weight:700; line-height:17px; text-align:center;
}

.logo{display:block; color:var(--chu)}
.logo-hinh{width:auto; height:26px; fill:currentColor}
.logo--chan .logo-hinh{height:30px}

.mo-man{display:none}

html.khoa-cuon{overflow:hidden}
html.dang-mo-man .mo-man{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:transparent;
  cursor:pointer;
}
.mo-man.xong{visibility:hidden; transition:visibility 0s linear 1.25s}

.mo-man__rem{
  position:absolute; inset:0; z-index:0;
  display:flex;
}
.mo-man__rem span{
  flex:1;
  background:var(--nen-mo-man);
  will-change:transform;
  transition:transform .85s cubic-bezier(.76,0,.24,1);
}

.mo-man.xong .mo-man__rem span{transform:translateY(-101%)}
.mo-man.xong .mo-man__rem span:nth-child(even){transform:translateY(101%)}

.mo-man.xong .mo-man__rem span:nth-child(1){transition-delay:0s}
.mo-man.xong .mo-man__rem span:nth-child(2){transition-delay:.05s}
.mo-man.xong .mo-man__rem span:nth-child(3){transition-delay:.10s}
.mo-man.xong .mo-man__rem span:nth-child(4){transition-delay:.15s}
.mo-man.xong .mo-man__rem span:nth-child(5){transition-delay:.20s}
.mo-man.xong .mo-man__rem span:nth-child(6){transition-delay:.25s}
.mo-man.xong .mo-man__rem span:nth-child(7){transition-delay:.30s}
.mo-man.xong .mo-man__rem span:nth-child(8){transition-delay:.35s}

.mo-man.xong .lop-bong{display:none}

.mo-man__logo{
  position:relative; z-index:1;
  width:min(52vw, 145px); height:auto; overflow:visible;
  shape-rendering:geometricPrecision;
  will-change:opacity;
  transition:opacity .45s ease-in-out;
}
@media (min-width:600px){  .mo-man__logo{width:min(32vw, 200px)} }
@media (min-width:1024px){ .mo-man__logo{width:min(19vw, 245px)} }

.mo-man.xong .mo-man__logo{opacity:0}

.mo-man .net{
  fill-opacity:0;
  fill-rule:evenodd;
  stroke:var(--trang);
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;

  animation:mo-man-ve var(--dur) cubic-bezier(.4,0,.2,1) var(--tre) forwards,
            mo-man-to .3s ease-out var(--to) forwards;
}
@keyframes mo-man-ve{ to{stroke-dashoffset:0} }
@keyframes mo-man-to{ to{fill-opacity:1} }

.mo-man .net{fill:var(--trang)}
.mo-man .net[data-nhom="thiet-bi"]{fill:var(--nau-800)}

.mo-man .lop-bong path{
  fill:none;
  stroke:#fff;
  stroke-width:2.4px;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:.05 .95;
  stroke-dashoffset:1;
  opacity:0;
  animation:mo-man-bong var(--dur) cubic-bezier(.4,0,.2,1) var(--tre) forwards;
}
@keyframes mo-man-bong{
  0%   {opacity:0; stroke-dashoffset:1}
  12%  {opacity:1}
  80%  {opacity:1}
  100% {opacity:0; stroke-dashoffset:0}
}

@media (prefers-reduced-motion:reduce){
  .mo-man{display:none !important}
}

.thanh{
  position:fixed; z-index:90;
  top:0; left:0; right:0;
  background:transparent;
  transition:background var(--vua), box-shadow var(--vua);
}
.thanh__khung{
  width:100%;

  max-width:1600px; margin-inline:auto;
  padding-inline:var(--le);
  display:flex; align-items:center; gap:10px;
  height:72px;
  transition:height var(--vua);
}
@media (min-width:940px){ .thanh__khung{height:92px} }

.thanh.dinh{
  background:rgba(15,15,15,.92);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
.thanh.dinh .thanh__khung{height:64px}

.logo{display:flex; align-items:center; flex:none; color:var(--chu)}
.logo-hinh{width:auto; height:34px; fill:currentColor; transition:height var(--vua)}

.logo-hinh .thiet-bi{
  fill:var(--nau-800);
  stroke:currentColor;
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
}
@media (min-width:940px){ .logo-hinh{height:42px} }
.thanh.dinh .logo-hinh{height:32px}

.dh{display:none}
@media (min-width:940px){
  .dh{display:flex; align-items:center; gap:2px; margin-left:auto}
}

.dh-nut{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 13px;
  font-size:13px; font-weight:var(--dam-nhan); letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--chu);
  transition:color var(--nhanh);
}
.dh-nut:hover{color:var(--dong)}
.ic--mui{width:13px; height:13px; stroke-width:2.2; transition:transform var(--vua)}
.dh-muc:hover .ic--mui,
.dh-muc:focus-within .ic--mui{transform:rotate(180deg)}

.thanh__phai{display:flex; align-items:center; gap:4px; margin-left:auto}
@media (min-width:940px){ .thanh__phai{margin-left:14px} }

.thanh__vach{
  display:none;
  width:1px; height:22px; margin-inline:10px;
  background:rgba(255,255,255,.22);
}
@media (min-width:940px){ .thanh__vach{display:block} }

.o-tim{overflow:hidden}
.o-tim input{
  width:0; padding:0; border:0; border-bottom:1px solid transparent;
  background:none; color:var(--chu); font-size:14px;
  transition:width var(--vua), padding var(--vua), border-color var(--vua);
}
.o-tim input:focus{outline:none}
.o-tim input::placeholder{color:var(--chu-mo)}
.thanh.tim .o-tim input{
  width:min(46vw, 220px); padding:7px 2px;
  border-bottom-color:rgba(255,255,255,.3);
}

.dh-muc{position:relative}
.bang{
  position:absolute; top:100%; left:0;
  min-width:238px;
  background:#1B1B1B;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--vua), visibility var(--vua), transform var(--vua);
}
.dh-muc:hover .bang,
.dh-muc:focus-within .bang{opacity:1; visibility:visible; transform:translateY(0)}

.bang__muc{
  display:block;
  font-size:14.5px; line-height:1.4; white-space:nowrap;

  padding:.72em 1.45em;
  color:var(--chu);
  transition:color var(--nhanh), background var(--nhanh);
}
.bang__muc + .bang__muc{border-top:1px solid rgba(255,255,255,.08)}
.bang__muc:hover{color:var(--dong); background:rgba(255,255,255,.04)}

.menu-nho{
  position:fixed; inset:0; z-index:120;
  display:grid; justify-items:end;
  background:rgba(0,0,0,.6);
  opacity:0; visibility:hidden;
  transition:opacity var(--vua), visibility var(--vua);
}
.menu-nho.mo{opacity:1; visibility:visible}
.menu-nho__khay{
  width:min(360px, 88vw); height:100%; overflow-y:auto;
  padding:18px 20px 32px;
  background:#181818; border-left:1px solid var(--vien);
  display:flex; flex-direction:column; gap:4px;
  transform:translateX(100%);
  transition:transform var(--vua);
}
.menu-nho.mo .menu-nho__khay{transform:none}
.menu-nho__dau{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.menu-nho__dm{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.menu-nho__dm a{
  display:flex; flex-direction:column; gap:8px;
  padding:14px 12px;
  border:1px solid var(--vien); border-radius:var(--bo);
  font-size:13.5px; font-weight:var(--dam-thuong); line-height:1.3;
}
.menu-nho__dm .ic{color:var(--dong)}
.menu-nho__chinh{
  padding:14px 2px; font-size:16px; font-weight:var(--dam-thuong);
  border-bottom:1px solid var(--vien);
}

.banner{
  position:relative;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:var(--nen-mo-man);
}
.banner__anh{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:72% center;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
.banner__anh.hien{opacity:1}

@media (min-width:900px){
  .banner__anh{object-position:center}
}

.banner__cham{
  position:absolute; z-index:2;
  left:var(--le);
  bottom:clamp(22px, 4vw, 44px);
  display:flex; gap:10px;
}
.banner__cham button{
  width:34px; height:3px; padding:0; border-radius:2px;
  background:rgba(255,255,255,.32);
  transition:background var(--vua), width var(--vua);
}
.banner__cham button:hover{background:rgba(255,255,255,.6)}
.banner__cham button[aria-current="true"]{background:#fff; width:52px}

.banner__cuon{
  position:absolute; z-index:2;
  left:50%; translate:-50% 0;
  bottom:clamp(18px, 3.4vw, 34px);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  pointer-events:none;
  animation:cum-nhun 1.8s ease-in-out infinite;
}

.banner__chuot{
  position:relative; overflow:hidden;
  width:15px; height:24px;
  border:1.2px solid rgba(255,255,255,.62);
  border-radius:999px;
}
.banner__chuot i{
  position:absolute; top:5px; left:50%; margin-left:-1px;
  width:2px; height:5px; border-radius:1px;
  background:#fff;
  animation:banh-xe 1.8s ease-in-out infinite;
}

.banner__vach{display:flex; flex-direction:column; align-items:center; gap:3px}
.banner__vach i{
  width:2px; height:4px; border-radius:1px;
  background:#fff;
  opacity:.14;
  animation:roi-xuong 1.8s ease-in-out infinite;
}

.banner__vach i:nth-child(1){animation-delay:.55s}
.banner__vach i:nth-child(2){animation-delay:.64s}
.banner__vach i:nth-child(3){animation-delay:.73s}
.banner__vach i:nth-child(4){animation-delay:.82s}
.banner__vach i:nth-child(5){animation-delay:.91s}
.banner__vach i:nth-child(6){animation-delay:1s}

@keyframes banh-xe{
  0%   {transform:translateY(0);    opacity:0}
  14%  {opacity:1}
  48%  {transform:translateY(8px);  opacity:1}
  62%  {transform:translateY(11px); opacity:0}
  100% {transform:translateY(0);    opacity:0}
}
@keyframes roi-xuong{
  0%, 100% {opacity:.14}
  22%      {opacity:1}
}
@keyframes cum-nhun{
  0%, 100% {transform:translateY(0)}
  50%      {transform:translateY(4px)}
}

@media (max-width:420px){ .banner__cuon{display:none} }

@media (prefers-reduced-motion:reduce){
  .banner__cuon,
  .banner__chuot i,
  .banner__vach i{animation:none}
  .banner__vach i{opacity:.5}
}

.muc--sp{position:relative; padding-bottom:0; overflow:hidden}

.muc--sp::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:0; translate:-50% 0;
  width:min(1100px, 96vw); height:clamp(360px, 46vw, 560px);
  background:radial-gradient(closest-side,
             rgba(255,255,255,.09) 0%,
             rgba(255,255,255,.05) 42%,
             transparent 74%);
}
.muc--sp > *{position:relative; z-index:1}

.dau-sp{
  max-width:620px;

  margin-left:auto; margin-right:0;

  margin-bottom:clamp(52px, 7.5vw, 118px);
}
.dau-sp__td{
  margin-top:14px;

  font-size:clamp(18px, 1.7vw, 30px); line-height:1.2;
  font-weight:var(--dam-to); letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--dong);

  text-wrap:balance;
}
.dau-sp__mt{
  margin-top:20px;

  text-wrap:pretty;
  font-size:clamp(14.5px, 1.4vw, 16px); line-height:1.72;
  color:rgba(248,248,248,.86);
}

.dong-sp{
  position:relative; overflow:hidden;

  height:clamp(430px, 38vw, 520px);
  background:var(--nen);
}

.dong-sp__nen{position:absolute; inset:0; z-index:0}
.dong-sp__anh{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s ease-in-out;
}
.dong-sp__anh.hien{opacity:1}

.dong-sp__phu{
  position:absolute; inset:0; z-index:1; pointer-events:none;

  background:linear-gradient(to bottom,
             rgba(10,10,10,.20) 0%,
             rgba(10,10,10,.10) 34%,
             rgba(10,10,10,.50) 74%,
             rgba(10,10,10,.82) 100%);
}

.dong-sp__luoi{
  position:relative; z-index:2;
  display:flex;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.dong-sp__luoi::-webkit-scrollbar{display:none}

.o-sp{
  position:relative; overflow:hidden;

  flex:1 0 220px;
  scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(24px, 2.6vw, 34px) clamp(18px, 1.6vw, 26px);
  color:var(--chu);
  transition:background var(--vua);
}
.o-sp:hover{background:rgba(255,255,255,.045)}

.o-sp + .o-sp::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom,
             transparent 0%,
             rgba(255,255,255,.17) 24%,
             rgba(255,255,255,.17) 76%,
             transparent 100%);
}

.o-sp__noi{
  display:block; position:relative;
  transition:transform .5s cubic-bezier(.22,.8,.28,1);
}

.o-sp__noi::before{
  content:""; position:absolute;
  left:calc(-1 * clamp(18px, 1.6vw, 26px));
  top:0; bottom:0; width:1px;
  background:var(--dong);
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s cubic-bezier(.22,.8,.28,1);
}
.o-sp:hover .o-sp__noi::before,
.o-sp:focus-visible .o-sp__noi::before{transform:scaleY(1)}
.o-sp:hover .o-sp__noi,
.o-sp:focus-visible .o-sp__noi{transform:translateY(-34px)}

.o-sp__ten{
  display:block;
  font-size:clamp(15px, 1.25vw, 18.5px); font-weight:var(--dam-thuong);
  letter-spacing:.035em; text-transform:uppercase; line-height:1.3;
}
.o-sp__mo-ta{
  display:block; margin-top:12px;
  font-size:13px; line-height:1.62; color:rgba(237,231,224,.7);
  transition:color var(--vua);
}
.o-sp:hover .o-sp__mo-ta{color:rgba(237,231,224,.94)}

.o-sp__xem{
  display:flex; align-items:center; gap:8px;
  margin-top:16px; height:18px;
  font-size:12px; font-weight:var(--dam-nhan); letter-spacing:.1em;
  text-transform:uppercase; color:var(--dong);
  opacity:0;
  transition:opacity .4s ease .06s;
}
.o-sp:hover .o-sp__xem,
.o-sp:focus-visible .o-sp__xem{opacity:1}

@media (prefers-reduced-motion:reduce){
  .dong-sp__anh{transition:none}
  .o-sp__noi,.o-sp__noi::before,.o-sp__xem{transition:none}
}

.muc--dl{padding-bottom:clamp(56px, 7vw, 96px)}

.dau-sp--giua{
  max-width:900px;
  margin-inline:auto;
  margin-bottom:clamp(38px, 5vw, 64px);
  text-align:center;
}

.dau-sp--giua .dau-sp__td{font-size:clamp(24px, 3vw, 46px)}
.dau-sp--giua .dau-sp__mt{
  margin-inline:auto;
  font-size:clamp(13.5px, 1.15vw, 15.5px);
}

.dai-lo{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--vien);
  border-bottom:1px solid var(--vien);

  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.dai-lo__day{
  display:flex;
  width:max-content;
  animation:dai-lo-chay 34s linear infinite;
}
.dai-lo__luot{display:flex; align-items:center}

.dai-lo:hover .dai-lo__day{animation-play-state:paused}

@keyframes dai-lo-chay{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

.dai-lo__o{
  display:flex; align-items:center; justify-content:center;
  height:clamp(78px, 8vw, 104px);
  padding-inline:clamp(26px, 3.4vw, 52px);
  flex:none;
}

.dai-lo__o img{
  max-height:clamp(28px, 2.6vw, 38px);
  max-width:clamp(120px, 12vw, 158px);
  width:auto; height:auto; object-fit:contain;
  opacity:.82;
  transition:opacity var(--vua);
}
.dai-lo__o:hover img{opacity:1}

.dai-lo__chu{
  font-size:clamp(17px, 1.7vw, 23px); font-weight:var(--dam-vua);
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  color:rgba(237,231,224,.55);
  transition:color var(--vua);
}
.dai-lo__o:hover .dai-lo__chu{color:var(--dong)}

@media (prefers-reduced-motion:reduce){
  .dai-lo{overflow-x:auto}
  .dai-lo__day{animation:none}
}

.banner-cuoi{position:relative; display:block; background:var(--nen); overflow:hidden}
.banner-cuoi img{
  display:block;
  width:100%; height:auto;
}

.banner-cuoi::before,
.banner-cuoi::after{
  content:""; position:absolute; left:0; right:0; z-index:1;
  pointer-events:none;
}
.banner-cuoi::before{
  top:0; height:20%;
  background:linear-gradient(to bottom,
             var(--nen) 0%,
             rgba(19,19,19,.62) 34%,
             rgba(19,19,19,.22) 66%,
             transparent 100%);
}

.banner-cuoi::after{
  bottom:0; height:12%;
  background:linear-gradient(to top,
             #0F0F0F 0%,
             rgba(15,15,15,.4) 45%,
             transparent 100%);
}

.chan{
  background:#0F0F0F;
  font-size:14px;
  padding-top:clamp(40px, 5vw, 66px);
}

.logo--chan{display:inline-flex; margin-bottom:clamp(30px, 4vw, 48px)}
.logo--chan .logo-hinh{height:clamp(40px, 4vw, 52px)}

.chan__tren{
  display:grid; gap:clamp(30px, 4vw, 52px);
  grid-template-columns:1fr;
  padding-bottom:clamp(38px, 4.6vw, 60px);
}
@media (min-width:680px){
  .chan__tren{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1080px){

  .chan__tren{grid-template-columns:1.25fr 1.25fr 1fr}
}

.chan h2{
  margin-bottom:16px;
  font-size:15px; font-weight:var(--dam-nhan); letter-spacing:.02em;
  text-transform:uppercase; color:var(--chu);
}
.chan__ds li{margin-bottom:9px; color:var(--chu-nhat); line-height:1.65}

.chan__nhan{
  margin-top:26px; margin-bottom:8px;
  font-size:13.5px; color:var(--chu-nhat);
}
.chan__lon{
  display:inline-block;
  font-size:clamp(17px, 1.7vw, 21px); font-weight:var(--dam-thuong); letter-spacing:.01em;
  color:var(--chu);
  transition:color var(--nhanh);
}
.chan__lon:hover{color:var(--dong)}

.chan__duoi{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:10px 24px;
  padding-block:20px; border-top:1px solid var(--vien);
  font-size:12.5px; color:var(--chu-mo);
}

.bd{width:100%; max-width:296px; height:auto}

.bd-vach line{
  stroke:rgba(237,231,224,.17);
  stroke-width:2.1;
  stroke-linecap:round;
}

.bd-vach .bd-am{stroke:rgba(203,170,125,.42)}

.bd-vach .bd-nong{
  stroke:var(--dong);
  stroke-width:2.4;
  filter:drop-shadow(0 0 3px rgba(203,170,125,.45));
}

.bd-tp{fill:#F2E3CB}
.bd-tp--to circle{fill:#FFF3E0}

.bd-lan{
  fill:none; stroke:var(--dong); stroke-width:1.2;
  transform-origin:center;
  transform-box:fill-box;
  animation:bd-lan 3s ease-out infinite;
}
.bd-tp--to:nth-of-type(2) .bd-lan{animation-delay:1.5s}

@keyframes bd-lan{
  0%   {transform:scale(.45); opacity:.9}
  75%  {transform:scale(1.3); opacity:0}
  100% {transform:scale(1.3); opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .bd-lan{animation:none; opacity:.5}
}

.hero-sp{position:relative; display:block; background:var(--nen); overflow:hidden}
.hero-sp__anh{display:block; width:100%; height:auto}

.hero-sp__duoi{
  position:absolute; left:0; right:0; bottom:0;
  padding-block:clamp(14px, 2.4vw, 30px) clamp(12px, 2vw, 24px);
  background:linear-gradient(to top,
             rgba(8,8,8,.92) 0%, rgba(8,8,8,.55) 55%, transparent 100%);
}
.hero-sp__duoi .duong-dan{margin-bottom:0}

.hero-sp__duoi .duong-dan{color:var(--chu-nhat)}
.hero-sp__duoi .duong-dan a{color:var(--chu)}
.hero-sp__duoi .duong-dan [aria-current]{color:var(--dong)}

@media (max-width:520px){ .hero-sp:not(.hero-sp--dm) .hero-sp__duoi{display:none} }

.hero-sp--dm{
  display:flex; align-items:center;
  min-height:clamp(300px, 30vw, 470px);
}
.hero-sp--dm .hero-sp__anh{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;

  object-position:64% 50%;
}

.hero-sp__phu{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right,
             rgba(8,8,8,.90) 0%, rgba(8,8,8,.62) 38%,
             rgba(8,8,8,.20) 68%, rgba(8,8,8,0) 100%);
}

.hero-sp__chu{position:relative; z-index:2; width:100%}
.hero-sp__chu h1{
  font-size:clamp(28px, 4vw, 54px); line-height:1.1; font-weight:var(--dam-to);
  letter-spacing:.01em; text-transform:uppercase; color:var(--trang);
}
.hero-sp__chu p{
  margin-top:clamp(10px, 1.2vw, 16px); max-width:46ch;
  font-size:clamp(13.5px, 1.15vw, 16.5px); line-height:1.6;
  color:var(--chu-nhat);

  text-wrap:balance;
}

.hero-sp--dm .hero-sp__duoi{z-index:2}

@media (max-width:640px){

  .hero-sp__phu{background:rgba(8,8,8,.66)}
  .hero-sp--dm .hero-sp__anh{object-position:70% 50%}
  .hero-sp--dm{align-items:flex-start; padding-top:clamp(84px, 20vw, 120px)}
}

.duong-dan{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-bottom:clamp(18px, 2.2vw, 28px);
  font-size:13px; color:var(--chu-mo);
}
.duong-dan a{color:var(--chu-nhat); transition:color var(--nhanh)}
.duong-dan a:hover{color:var(--dong)}

.tieu-de-muc{
  padding-bottom:clamp(16px, 2vw, 24px);
  margin-bottom:clamp(24px, 3vw, 38px);
  border-bottom:1px solid var(--vien);
  font-size:clamp(22px, 2.8vw, 32px); font-weight:var(--dam-to);
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--dong);
}

.luoi-dm{display:grid; gap:clamp(12px, 1.5vw, 20px); grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){  .luoi-dm{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .luoi-dm{grid-template-columns:repeat(4,1fr)} }

.dm{
  position:relative; overflow:hidden; display:block;
  aspect-ratio:1 / 1;

  border-radius:0;
  background:var(--nen-noi);
}
.dm__anh{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.8,.28,1);
}
.dm:hover .dm__anh{transform:scale(1.06)}

.dm__phu{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
             rgba(10,10,10,.82) 0%,
             rgba(10,10,10,.34) 42%,
             rgba(10,10,10,.10) 100%);
}

.dm__ten{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(14px, 1.8vw, 22px);
  font-size:clamp(13px, 1.25vw, 16px); font-weight:var(--dam-nhan);
  letter-spacing:.04em; text-transform:uppercase; line-height:1.3;
  color:var(--chu);
}

.dm__mui{
  position:absolute; z-index:2; top:50%; left:50%;
  translate:-50% -50%;
  width:clamp(42px, 4vw, 56px); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%; background:var(--dong); color:#231A05;
  opacity:0; scale:.6;
  transition:opacity var(--vua), scale var(--vua);
}
.dm:hover .dm__mui,
.dm:focus-visible .dm__mui{opacity:1; scale:1}
.dm__mui .ic{width:20px; height:20px; stroke-width:2}

.loc__muc--ve{margin-top:8px; color:var(--dong)}

.ds{--cot-loc:250px}

.ds__than{display:grid; gap:clamp(24px, 3vw, 44px); grid-template-columns:1fr}
@media (min-width:900px){
  .ds__than{grid-template-columns:var(--cot-loc) minmax(0, 1fr)}
}
.ds__phai{min-width:0}

.ds__thanh{
  display:grid; gap:14px; grid-template-columns:1fr;
  padding-block:clamp(16px, 2vw, 22px);
  border-top:1px solid var(--vien);
}
@media (min-width:900px){
  .ds__thanh{
    gap:clamp(24px, 3vw, 44px);
    grid-template-columns:var(--cot-loc) minmax(0, 1fr);
    align-items:center;
  }
}

.ds__nhan{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:var(--dam-nhan);
  letter-spacing:.09em; text-transform:uppercase; color:var(--chu);
}
.ds__nhan .ic{width:18px; height:18px; color:var(--dong)}

.ds__tt{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px 20px;
}
.ds__dem{font-size:14px; color:var(--chu-nhat)}
.ds__dem b{color:var(--chu); font-weight:var(--dam-nhan);}

.ds__sap{display:flex; align-items:center; gap:10px}
.ds__sap label{font-size:13.5px; color:var(--chu-mo)}

.ds__o{position:relative; display:inline-flex; align-items:center}
.ds__o select{
  appearance:none; -webkit-appearance:none;
  padding:6px 28px 6px 0;
  border:0; background:transparent; color:var(--chu);
  font:inherit; font-size:14px; cursor:pointer;
}

.ds__o option{background:var(--nen-noi); color:var(--chu)}
.ds__o select:focus-visible{outline:2px solid var(--dong); outline-offset:3px}
.ds__o .ic{
  position:absolute; right:2px; width:16px; height:16px;
  pointer-events:none; color:var(--chu-nhat);
}

.loc__nhom{border-top:1px solid var(--vien)}
.loc__nhom:first-child{border-top:0}

.loc__nhom summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:16px; cursor:pointer;
  font-size:13px; font-weight:var(--dam-nhan);
  letter-spacing:.09em; text-transform:uppercase; color:var(--chu);
  list-style:none;
}
.loc__nhom summary::-webkit-details-marker{display:none}
.loc__nhom summary:focus-visible{outline:2px solid var(--dong); outline-offset:2px}
.loc__nhom summary .ic{
  flex:none; width:15px; height:15px; color:var(--chu-mo);
  transition:rotate var(--nhanh);
}

.loc__nhom[open] summary .ic{rotate:180deg}

.loc__ds{display:flex; flex-direction:column; gap:1px; padding-bottom:16px}

.loc__muc{
  display:flex; align-items:flex-start; gap:11px;
  padding:7px 0; cursor:pointer;
  font-size:14px; color:var(--chu-nhat);
  transition:color var(--nhanh);
}
.loc__muc:hover{color:var(--chu)}

.loc__muc input{
  position:absolute; width:1px; height:1px;
  opacity:0; margin:0; pointer-events:none;
}
.loc__o{
  flex:none; width:17px; height:17px; margin-top:1px;
  border:1px solid #7C746C; background:transparent;
  transition:background var(--nhanh), border-color var(--nhanh);
}
.loc__muc:hover .loc__o{border-color:var(--chu-nhat)}
.loc__muc input:checked + .loc__o{background:var(--dong); border-color:var(--dong)}
.loc__muc input:focus-visible + .loc__o{outline:2px solid var(--dong); outline-offset:2px}

.loc__o::after{
  content:''; display:block;
  width:4px; height:9px; margin:1px auto 0;
  border:solid #231A05; border-width:0 2px 2px 0;
  rotate:42deg;
  opacity:0; transition:opacity var(--nhanh);
}
.loc__muc input:checked + .loc__o::after{opacity:1}

.loc__ten{flex:1; line-height:1.45}
.loc__muc input:checked ~ .loc__ten{color:var(--chu)}
.loc__so{font-size:12.5px; color:var(--chu-mo)}

.loc__ap{margin-top:16px; width:100%; border-radius:0}

.loc__ap.co-doi{
  background:var(--dong); border-color:var(--dong);
  color:#231A05; font-weight:var(--dam-nhan);
}

.loc__ve{padding-block:16px; border-top:1px solid var(--vien); font-size:13.5px}
.loc__ve a{color:var(--dong)}
.loc__ve a:hover{text-decoration:underline}

.ds__phai{transition:opacity var(--nhanh)}
.ds__phai.dang-tai{opacity:.4; pointer-events:none}

.luoi-sp{display:grid; gap:clamp(12px, 1.4vw, 18px); grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .luoi-sp{grid-template-columns:repeat(3,1fr)} }

.sp{
  display:flex; flex-direction:column;
  padding:10px 10px 16px;

  border:1px solid var(--vien); border-radius:0;
  background:var(--nen-noi);
  transition:border-color var(--vua), transform var(--vua);
}
.sp:hover{border-color:var(--vien-sang); transform:translateY(-3px)}

.sp__anh{
  position:relative;
  aspect-ratio:1 / 1;
  margin-bottom:14px;
  display:grid; place-items:center; overflow:hidden;
  border-radius:0;
  background:#262626;
  background-image:
    linear-gradient(45deg,  transparent calc(50% - 1px), #333 50%, transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), #333 50%, transparent calc(50% + 1px));
}
.sp__anh img{width:100%; height:100%; object-fit:cover}
.sp__cho{
  padding:5px 11px; border-radius:0;
  background:#262626;
  font-size:12px; letter-spacing:.06em; color:var(--chu-mo);
}
.sp__giam{
  position:absolute; top:0; left:0;
  padding:5px 10px; border-radius:0;
  background:var(--do); color:#fff;
  font-size:12px; font-weight:var(--dam-nhan-manh);
}

.sp__hieu{
  font-size:11.5px; font-weight:var(--dam-nhan); letter-spacing:.12em;
  text-transform:uppercase; color:var(--chu-mo);
}
.sp__ten{
  margin:6px 0 10px; font-size:14.5px; font-weight:var(--dam-thuong); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sp__gia{margin-top:auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px}
.sp__gia b{font-size:16px; font-weight:var(--dam-nhan); color:var(--dong)}
.sp__gia del{font-size:12.5px}

.trang{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:clamp(28px, 3.4vw, 44px);
}
.trang__nut{
  min-width:40px; height:40px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--vien); border-radius:0;
  font-size:14px; color:var(--chu-nhat);
  transition:border-color var(--nhanh), color var(--nhanh), background var(--nhanh);
}
.trang__nut:hover{border-color:var(--vien-sang); color:var(--chu)}
.trang__nut.dang-chon{
  background:var(--dong); border-color:var(--dong);
  color:#231A05; font-weight:var(--dam-nhan);
}

.trong{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:clamp(48px, 7vw, 88px) 20px; text-align:center;
  border:1px dashed var(--vien); border-radius:0;
}
.trong .ic--to{color:var(--chu-mo)}
.trong p{color:var(--chu-nhat); max-width:38ch}

.luoi-chuyen{display:none}

.dang-luoi .luoi-chuyen{
  position:fixed; inset:0; z-index:210;
  display:grid; pointer-events:none;

  background:var(--nen-luoi);
}

.dang-luoi .luoi-chuyen.co-o{background:transparent}

.dang-luoi .luoi-chuyen span{
  background:var(--nen-luoi);

  box-shadow:inset 0 0 0 1px rgba(203, 170, 125, .05);

  animation:o-mo .56s cubic-bezier(.3, 0, .25, 1) forwards;
}

@keyframes o-mo{
  from{opacity:1; scale:1}
  to  {opacity:0; scale:.72}
}

.ct__tren{display:grid; gap:clamp(28px, 3.5vw, 56px); grid-template-columns:1fr}
@media (min-width:900px){

  .ct__tren{grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr)}
}

.gal__to{
  position:relative; overflow:hidden;
  aspect-ratio:4 / 3; background:var(--nen-noi);
}
.gal__to img{width:100%; height:100%; object-fit:cover; display:block}

.gal__ds{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:10px}

.gal__nho{
  position:relative; overflow:hidden;
  aspect-ratio:1 / 1; padding:0;
  border:1px solid var(--vien); background:var(--nen-noi);
  cursor:pointer;
  transition:border-color var(--nhanh);
}
.gal__nho img{width:100%; height:100%; object-fit:cover; display:block}
.gal__nho:hover{border-color:var(--vien-sang)}
.gal__nho.dang-chon{border-color:var(--dong)}
.gal__nho:focus-visible{outline:2px solid var(--dong); outline-offset:2px}

.gal__nho--cho{
  display:grid; place-items:center;
  font-size:11px; line-height:1.3; text-align:center; color:var(--chu-mo);
  background-color:#232323;
  background-image:
    linear-gradient(45deg,  transparent calc(50% - 1px), #303030 50%, transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), #303030 50%, transparent calc(50% + 1px));
}

.ct__nhan{
  display:inline-block; margin-bottom:14px;
  padding:5px 11px; background:var(--do); color:#fff;
  font-size:11.5px; font-weight:var(--dam-nhan-manh); letter-spacing:.1em; text-transform:uppercase;
}
.ct__hieu{
  font-size:11.5px; font-weight:var(--dam-nhan); letter-spacing:.14em;
  text-transform:uppercase; color:var(--chu-mo);
}
.ct__ten{
  margin:8px 0 18px;
  font-size:clamp(22px, 2.6vw, 32px); line-height:1.25; font-weight:var(--dam-vua);
  letter-spacing:-.01em;
  text-wrap:balance;
}

.ct__gia{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px}
.ct__gia b{font-size:clamp(24px, 2.8vw, 32px); font-weight:var(--dam-thuong); color:var(--dong)}
.ct__gia del{font-size:15px}
.ct__bot{
  padding:4px 10px; background:rgba(203,170,125,.12);
  font-size:12.5px; color:var(--dong);
}

.ct__con{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:16px; font-size:14px; color:var(--chu-mo);
}

.ct__con b{
  padding:5px 13px; border-radius:5px;
  background:#008000; color:#fff;
  font-size:13.5px; font-weight:var(--dam-nhan); line-height:1.35;
}

.ct__noi-bat{
  margin-top:clamp(20px, 2.4vw, 28px);
  padding-top:clamp(20px, 2.4vw, 28px);
  border-top:1px solid var(--vien);
  display:flex; flex-direction:column; gap:10px;
}
.ct__noi-bat li{
  position:relative; padding-left:22px;
  font-size:14.5px; line-height:1.55; color:var(--chu-nhat);
}

.ct__noi-bat li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--dong);
}

.ct__dat{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(22px, 2.6vw, 30px);
}

.dem{display:inline-flex; align-items:stretch; border:1px solid var(--vien)}
.dem__nut{
  width:42px; background:none; border:0; cursor:pointer;
  color:var(--chu-nhat); font-size:17px; line-height:1;
  transition:background var(--nhanh), color var(--nhanh);
}
.dem__nut:hover{background:rgba(255,255,255,.05); color:var(--chu)}
.dem__nut:focus-visible{outline:2px solid var(--dong); outline-offset:-2px}
.dem input{
  width:52px; padding:12px 0;
  border:0; border-inline:1px solid var(--vien);
  background:none; color:var(--chu);
  font:inherit; font-size:15px; text-align:center;
}

.dem input::-webkit-outer-spin-button,
.dem input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.dem input[type=number]{-moz-appearance:textfield}

.ct__them{flex:1 1 220px; border-radius:0; justify-content:center}
.ct__goi{flex:1 1 100%; border-radius:0; justify-content:center}
@media (min-width:520px){ .ct__goi{flex:1 1 200px} }

.cam-ket{
  margin-top:clamp(24px, 3vw, 34px);
  padding-top:clamp(20px, 2.4vw, 26px);
  border-top:1px solid var(--vien);
  display:flex; flex-direction:column; gap:13px;
}
.cam-ket li{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--chu-nhat)}
.cam-ket .ic{flex:none; width:22px; height:22px; color:var(--dong)}

.tab__nav{display:none}
.co-js .tab__nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(18px, 3vw, 44px);
  margin-bottom:clamp(28px, 3.4vw, 44px);
  border-bottom:1px solid var(--vien);
}
.co-js .tab__o{display:none}
.co-js .tab__o.hien{display:block}
.co-js .tab__o > h2{

  position:absolute; width:1px; height:1px;
  margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.tab__nut{
  position:relative; padding:0 0 15px;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:14px; letter-spacing:.05em;
  color:var(--chu-mo);
  transition:color var(--nhanh);
}
.tab__nut:hover{color:var(--chu)}
.tab__nut.dang-chon{color:var(--chu)}

.tab__nut::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--dong);
  scale:0 1; transform-origin:left;
  transition:scale var(--vua);
}
.tab__nut.dang-chon::after{scale:1 1}
.tab__nut:focus-visible{outline:2px solid var(--dong); outline-offset:3px}

.tab__o h2{margin-bottom:18px; font-size:20px; font-weight:var(--dam-vua);}
.tab__o p{max-width:74ch; color:var(--chu-nhat); line-height:1.75}
.tab__o p + p{margin-top:14px}
.tab__o:focus-visible{outline:2px solid var(--dong); outline-offset:6px}

.luoi-tn{display:grid; gap:18px 24px; grid-template-columns:repeat(2, 1fr)}
@media (min-width:700px){ .luoi-tn{grid-template-columns:repeat(3, 1fr)} }
@media (min-width:1024px){ .luoi-tn{grid-template-columns:repeat(4, 1fr); gap:22px 28px} }
.luoi-tn li{
  display:flex; align-items:center; gap:13px;
  font-size:13.5px; line-height:1.4; color:var(--chu-nhat);
}
.luoi-tn .ic{width:26px; height:26px; color:var(--dong); stroke-width:1.4}

.bang-ts{width:100%; max-width:720px; border-collapse:collapse; font-size:14px}
.bang-ts th,
.bang-ts td{padding:13px 16px; text-align:left; vertical-align:top}
.bang-ts th{
  width:42%; font-weight:400; color:var(--chu-mo);
}
.bang-ts td{color:var(--chu)}

.bang-ts tr:nth-child(odd){background:var(--nen-noi)}

.thong-bao{
  display:flex; align-items:center; gap:12px;
  margin-bottom:clamp(20px, 2.4vw, 30px);
  padding:14px 18px;
  border-left:3px solid var(--dong);
  background:rgba(203, 170, 125, .10);
  font-size:14.5px; color:var(--chu);
}
.thong-bao .ic{flex:none; width:20px; height:20px; color:var(--dong)}

.bang-dl{width:100%; border-collapse:collapse; font-size:14px}

.bang-dl thead th{
  padding:0 14px 14px;
  border-bottom:1px solid var(--vien);
  text-align:left; font-size:11.5px; font-weight:var(--dam-nhan);
  letter-spacing:.12em; text-transform:uppercase; color:var(--chu-mo);
}
.bang-dl tbody td{
  padding:18px 14px;
  border-bottom:1px solid var(--vien);
  vertical-align:middle;
}
.bang-dl tbody tr:last-child td{border-bottom:0}

@media (min-width:761px){
  .bang-dl tbody td{white-space:nowrap}
  .bang-dl tbody td[data-nhan="Sản phẩm"]{white-space:normal}
}

.bang-dl__anh{width:1%; padding-left:0 !important}
.bang-dl__cuoi{width:1%; padding-right:0 !important; text-align:right}
.bang-dl__anh .sp__anh{width:84px; margin:0; aspect-ratio:1 / 1; font-size:10px}

@media (max-width:760px){
  .bang-dl thead{
    position:absolute; width:1px; height:1px;
    clip-path:inset(50%); overflow:hidden;
  }
  .bang-dl,
  .bang-dl tbody,
  .bang-dl tr,
  .bang-dl td{display:block; width:auto}

  .bang-dl tr{
    position:relative;
    padding:18px 0 18px 100px;
    border-bottom:1px solid var(--vien);
    min-height:112px;
  }
  .bang-dl tbody td{padding:5px 0; border:0}

  .bang-dl__anh{position:absolute; left:0; top:18px; padding:0 !important}
  .bang-dl__anh .sp__anh{width:84px}

  .bang-dl td[data-nhan]::before{
    content:attr(data-nhan) ": ";
    color:var(--chu-mo);
  }

  .bang-dl td[data-nhan="Sản phẩm"]::before{content:none}

  .bang-dl__cuoi{position:absolute; right:0; top:18px; padding:0 !important}
}

.gio__bo-cuc{display:grid; gap:clamp(28px, 3.4vw, 48px); grid-template-columns:1fr}
@media (min-width:980px){
  .gio__bo-cuc{grid-template-columns:minmax(0, 1fr) 330px; align-items:start}
}
.gio__ds{min-width:0}

.gio__hieu{
  display:block; margin-bottom:5px;
  font-size:11px; font-weight:var(--dam-nhan); letter-spacing:.12em;
  text-transform:uppercase; color:var(--chu-mo);
}
.gio__ten{
  display:block; max-width:34ch;
  font-size:14.5px; line-height:1.45; color:var(--chu);
  transition:color var(--nhanh);
}
.gio__ten:hover{color:var(--dong)}
.gio__tien{font-weight:var(--dam-nhan); color:var(--dong); white-space:nowrap}

.dem__so{
  min-width:44px; padding:11px 0;
  display:inline-flex; align-items:center; justify-content:center;
  border-inline:1px solid var(--vien);
  font-size:15px; color:var(--chu);
}

.gio__bo{
  width:34px; height:34px;
  display:inline-grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:var(--chu-mo);
  transition:color var(--nhanh), background var(--nhanh);
}
.gio__bo:hover{background:rgba(255,255,255,.06); color:var(--do)}
.gio__bo:focus-visible{outline:2px solid var(--dong); outline-offset:2px}
.gio__bo .ic{width:17px; height:17px}

.gio__tiep{margin-top:clamp(22px, 2.6vw, 30px); border-radius:0}

.gio__tiep .ic{rotate:180deg}
.gio__tiep:hover .ic{transform:translateX(-4px)}

.tong{
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--vien); background:var(--nen-noi);
}
@media (min-width:980px){

  .tong{position:sticky; top:110px}
}
.tong h2{
  margin-bottom:18px; padding-bottom:16px;
  border-bottom:1px solid var(--vien);
  font-size:12px; font-weight:var(--dam-nhan); letter-spacing:.14em;
  text-transform:uppercase; color:var(--chu-mo);
}
.tong__ds > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:14px;
}
.tong__ds > div + div{margin-top:12px}
.tong__ds dt{color:var(--chu-nhat)}
.tong__ds dd{color:var(--chu); white-space:nowrap}
.tong__mien{color:#4FB477}

.tong__cong{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--vien);
  font-size:14px; color:var(--chu-nhat);
}
.tong__cong b{font-size:21px; font-weight:var(--dam-nhan); color:var(--dong); white-space:nowrap}

.tong__dat{width:100%; margin-top:20px; border-radius:0; justify-content:center}
.tong__ghi{margin-top:14px; font-size:12.5px; line-height:1.55; color:var(--chu-mo)}

.o-nhap + .o-nhap,
.o-doi + .o-nhap,
.o-nhap + .o-doi,
.o-doi + .o-doi{margin-top:clamp(16px, 1.8vw, 20px)}

.o-nhap label{
  display:block; margin-bottom:8px;
  font-size:12.5px; font-weight:var(--dam-nhan); letter-spacing:.04em;
  color:var(--chu-nhat);
}

.o-nhap input[type="text"],
.o-nhap input[type="email"],
.o-nhap input[type="tel"],
.o-nhap input[type="password"],
.o-nhap input[type="number"],
.o-nhap select,
.o-nhap textarea{
  width:100%; padding:13px 15px;
  border:1px solid var(--vien); border-radius:0;
  background:var(--nen); color:var(--chu);
  font:inherit; font-size:15px;
  transition:border-color var(--nhanh), background var(--nhanh);
}
.o-nhap textarea{min-height:120px; resize:vertical}

.o-nhap input::placeholder,
.o-nhap textarea::placeholder{color:var(--chu-mo)}

.o-nhap input:hover,
.o-nhap select:hover,
.o-nhap textarea:hover{border-color:var(--vien-sang)}

.o-nhap input:focus,
.o-nhap select:focus,
.o-nhap textarea:focus{
  outline:none;
  border-color:var(--dong); background:var(--nen-noi);
}

.o-nhap input:focus-visible,
.o-nhap select:focus-visible,
.o-nhap textarea:focus-visible{box-shadow:0 0 0 3px rgba(203, 170, 125, .18)}

.o-nhap__goi{
  display:block; margin-top:7px;
  font-size:12.5px; color:var(--chu-mo);
}

.o-doi{display:grid; gap:clamp(16px, 1.8vw, 20px); grid-template-columns:1fr}
@media (min-width:620px){ .o-doi{grid-template-columns:1fr 1fr} }
.o-doi > .o-nhap{margin-top:0}

.o-tich{
  display:flex; align-items:flex-start; gap:11px;
  margin-top:clamp(18px, 2vw, 22px); cursor:pointer;
  font-size:14px; line-height:1.5; color:var(--chu-nhat);
}
.o-tich input{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.o-tich__o{
  flex:none; width:17px; height:17px; margin-top:2px;
  border:1px solid #7C746C; background:transparent;
  transition:background var(--nhanh), border-color var(--nhanh);
}
.o-tich:hover .o-tich__o{border-color:var(--chu-nhat)}
.o-tich input:checked + .o-tich__o{background:var(--dong); border-color:var(--dong)}
.o-tich input:focus-visible + .o-tich__o{outline:2px solid var(--dong); outline-offset:2px}
.o-tich__o::after{
  content:''; display:block;
  width:4px; height:9px; margin:1px auto 0;
  border:solid #231A05; border-width:0 2px 2px 0;
  rotate:42deg; opacity:0; transition:opacity var(--nhanh);
}
.o-tich input:checked + .o-tich__o::after{opacity:1}
.o-tich a{color:var(--dong)}
.o-tich a:hover{text-decoration:underline}

.field-validation-error{
  display:block; margin-top:7px;
  font-size:13px; line-height:1.5; color:var(--do);
}
.field-validation-valid{display:none}

.o-nhap input.input-validation-error,
.o-nhap select.input-validation-error,
.o-nhap textarea.input-validation-error{border-color:var(--do)}

.loi-chung{margin-bottom:clamp(18px, 2vw, 24px)}
.loi-chung ul{
  padding:14px 18px;
  border-left:3px solid var(--do);
  background:rgba(224, 78, 78, .10);
  font-size:14px; line-height:1.6; color:var(--chu);
}
.loi-chung li + li{margin-top:6px}

.validation-summary-valid{display:none}

.khung--hep{max-width:660px}

.the-tk{
  padding:clamp(26px, 3.2vw, 40px);
  border:1px solid var(--vien); background:var(--nen-noi);
}

.the-tk__gui{width:100%; margin-top:clamp(22px, 2.6vw, 28px); border-radius:0; justify-content:center}

.the-tk__doi{
  margin-top:clamp(20px, 2.4vw, 26px); padding-top:clamp(18px, 2.2vw, 24px);
  border-top:1px solid var(--vien);
  text-align:center; font-size:14px; color:var(--chu-nhat);
}
.the-tk__doi a{color:var(--dong)}
.the-tk__doi a:hover{text-decoration:underline}

.o-tich--dieu-khoan{margin-top:clamp(22px, 2.6vw, 28px)}

.van-ban{max-width:74ch}

.van-ban-bao{max-width:74ch}

.van-ban h2{
  margin-top:clamp(30px, 3.4vw, 44px); margin-bottom:14px;
  font-size:clamp(17px, 1.5vw, 20px); font-weight:var(--dam-vua); line-height:1.35;
  color:var(--chu);
}
.van-ban h2:first-child{margin-top:0}

.van-ban p{font-size:15px; line-height:1.8; color:var(--chu-nhat)}
.van-ban p + p{margin-top:13px}

.van-ban ul + p{margin-top:15px}

.van-ban ul{margin-top:13px; display:flex; flex-direction:column; gap:9px}
.van-ban li{
  position:relative; padding-left:22px;
  font-size:15px; line-height:1.7; color:var(--chu-nhat);
}
.van-ban li::before{
  content:''; position:absolute; left:0; top:.78em;
  width:9px; height:1px; background:var(--dong);
}

.van-ban a{color:var(--dong)}
.van-ban a:hover{text-decoration:underline}

.van-ban__ngay{
  margin-top:clamp(34px, 4vw, 52px); padding-top:20px;
  border-top:1px solid var(--vien);
  font-size:13.5px; color:var(--chu-mo) !important;
}

.chan__lk{display:flex; flex-wrap:wrap; gap:8px 22px}
.chan__lk a{color:var(--chu-nhat); transition:color var(--nhanh)}
.chan__lk a:hover{color:var(--dong)}

.co-js .hien-dan,
.co-js .hien-dan-nhom > *{
  opacity:0;
  translate:0 24px;

  transition:opacity .62s cubic-bezier(.22, .8, .28, 1),
             translate .62s cubic-bezier(.22, .8, .28, 1);
}

.co-js .hien-dan.da-hien,
.co-js .hien-dan-nhom.da-hien > *{opacity:1; translate:0 0}

.co-js .hien-dan-nhom.da-hien > *{transition-delay:calc(var(--i, 0) * 55ms)}

.hien-het .hien-dan,
.hien-het .hien-dan-nhom > *{opacity:1 !important; translate:none !important}

@media (prefers-reduced-motion: reduce){
  .co-js .hien-dan,
  .co-js .hien-dan-nhom > *{
    opacity:1; translate:none; transition:none;
  }
}

.dat__nhom{
  margin-bottom:clamp(16px, 1.8vw, 22px);
  padding-bottom:14px; border-bottom:1px solid var(--vien);
  font-size:12px; font-weight:var(--dam-nhan);
  letter-spacing:.14em; text-transform:uppercase; color:var(--chu-mo);
}
.dat__nhom + *{margin-top:0}
.gio__ds > .dat__nhom:not(:first-child){margin-top:clamp(30px, 3.6vw, 44px)}

.o-chon__ds{display:flex; flex-direction:column; gap:12px}

.o-chon{
  display:flex; align-items:flex-start; gap:13px;
  padding:16px 18px; cursor:pointer;
  border:1px solid var(--vien); background:var(--nen-noi);
  transition:border-color var(--nhanh);
}
.o-chon:hover{border-color:var(--vien-sang)}
.o-chon input{position:absolute; width:1px; height:1px; opacity:0; margin:0}

.o-chon:has(input:checked){border-color:var(--dong)}

.o-chon__o{
  flex:none; width:18px; height:18px; margin-top:2px;
  border:1px solid #7C746C; border-radius:50%;
  display:grid; place-items:center;
  transition:border-color var(--nhanh);
}
.o-chon input:checked + .o-chon__o{border-color:var(--dong)}
.o-chon input:focus-visible + .o-chon__o{outline:2px solid var(--dong); outline-offset:2px}
.o-chon__o::after{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--dong);
  scale:0; transition:scale var(--nhanh);
}
.o-chon input:checked + .o-chon__o::after{scale:1}

.o-chon__chu{display:flex; flex-direction:column; gap:5px}
.o-chon__chu b{font-size:14.5px; font-weight:var(--dam-nhan); color:var(--chu)}
.o-chon__chu span{font-size:13px; line-height:1.55; color:var(--chu-nhat)}

.dat__ds{
  display:flex; flex-direction:column; gap:14px;
  margin-bottom:20px; padding-bottom:20px;
  border-bottom:1px solid var(--vien);
}
.dat__ds li{
  display:grid; gap:4px 12px;
  grid-template-columns:1fr auto;
  font-size:13.5px;
}
.dat__ten{color:var(--chu); line-height:1.45}
.dat__sl{color:var(--chu-mo); text-align:right}
.dat__tien{grid-column:2; color:var(--dong); white-space:nowrap}

.hoa-don{
  padding:clamp(24px, 3vw, 38px);
  border:1px solid var(--vien); background:var(--nen-noi);
}

.hoa-don__dau{
  display:flex; align-items:center; gap:16px;
  padding-bottom:clamp(20px, 2.4vw, 28px);
  border-bottom:1px solid var(--vien);
}
.hoa-don__dau .ic{flex:none; color:#4FB477}
.hoa-don__ma{font-size:15px; color:var(--chu-nhat)}
.hoa-don__ma b{font-size:19px; font-weight:var(--dam-nhan); color:var(--dong); letter-spacing:.04em}
.hoa-don__ngay{margin-top:5px; font-size:13px; color:var(--chu-mo)}

.hoa-don__cot{
  display:grid; gap:clamp(20px, 2.6vw, 32px);
  grid-template-columns:1fr;
  padding-block:clamp(22px, 2.8vw, 32px);
}
@media (min-width:680px){ .hoa-don__cot{grid-template-columns:repeat(3, 1fr)} }
.hoa-don__cot h2{
  margin-bottom:11px;
  font-size:11.5px; font-weight:var(--dam-nhan);
  letter-spacing:.13em; text-transform:uppercase; color:var(--chu-mo);
}
.hoa-don__cot p{font-size:14px; line-height:1.6; color:var(--chu)}
.hoa-don__ghi{color:var(--chu-nhat) !important}

.hoa-don__bang{border-top:1px solid var(--vien)}
.hoa-don__bang thead th{padding-top:18px}

.hoa-don__cong{margin-top:0; border-top:1px solid var(--vien)}

.hoa-don__nut{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(22px, 2.6vw, 30px);
}
.hoa-don__nut .nut{flex:1 1 200px; border-radius:0; justify-content:center}

@media print{

  html, body{background:#fff !important; color:#000 !important}

  .thanh, .chan, .hero-sp, .menu-nho, .luoi-chuyen, .mo-man,
  .hoa-don__nut, .duong-dan{display:none !important}

  .muc{padding:0 !important}
  .khung{max-width:none !important; padding:0 !important}

  .hoa-don{
    border:1px solid #999 !important; background:#fff !important;
    padding:0 !important;
  }
  .hoa-don *{color:#000 !important}
  .hoa-don__ma b, .tong__cong b, .gio__tien{color:#000 !important}
  .bang-dl thead th, .bang-dl tbody td{border-color:#bbb !important}
  .hoa-don__dau .ic{color:#000 !important}

  .hien-dan, .hien-dan-nhom > *{opacity:1 !important; translate:none !important}

  .bang-dl thead{position:static !important; width:auto !important; height:auto !important;
                 clip-path:none !important}
  .bang-dl, .bang-dl tbody, .bang-dl tr, .bang-dl td{display:revert !important}
  .bang-dl tr{padding:0 !important; min-height:0 !important}
  .bang-dl td[data-nhan]::before{content:none !important}
}

.loi__so{
  font-size:clamp(56px, 9vw, 96px); line-height:1;
  font-weight:var(--dam-to); letter-spacing:.02em;
  color:var(--dong);
}
.loi__chu{
  margin-top:clamp(14px, 1.8vw, 20px); max-width:46ch;
  font-size:15px; line-height:1.75; color:var(--chu-nhat);
  text-wrap:pretty;
}
.loi__nut{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px, 3vw, 32px)}
.loi__nut .nut{border-radius:0; justify-content:center}