/* East Nest — hệ thống giao diện dùng chung */
:root {
  --muc: #0E1E2B;        /* mực đêm, nền chính */
  --dem: #05090F;        /* nền mở màn */
  --lam: #17505F;        /* lam ngọc */
  --nga: #F1E8D6;        /* ngà tổ yến */
  --nga-sang: #FBF6EC;
  --giay: #F6F0E4;
  --que: #D9AE62;        /* vàng quế */
  --que-dam: #8A6420;    /* quế đậm cho chữ trên nền sáng */
  --chu-sa: #8E2A22;
  --vien: #D8CFBD;
  --chu-phu: #3D4850;
  --chu-phu-toi: #C6CDD1;
  --serif: 'Noto Serif Display', 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', system-ui, sans-serif;
  --le: clamp(16px, 4vw, 48px);
  --tron: 999px;
  --nhanh: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--muc); background: var(--nga-sang); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--que); outline-offset: 3px; }
.an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.serif { font-family: var(--serif); font-weight: 400; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.005em; }
.hoa { text-transform: uppercase; line-height: 1.12; }
.nhan { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--que-dam); }
.toi .nhan { color: var(--que); }
.khung { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--le); }
.cho-tro { color: var(--chu-sa); font-size: .92em; } /* nội dung đang chờ chủ dự án */
.toi .cho-tro { color: #F0B4A8; }

/* Nút */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--tron); border: 1px solid currentColor; background: none; font-weight: 600; cursor: pointer; transition: background .25s, color .25s, transform .25s var(--nhanh); }
.nut:active { transform: scale(.98); }
.nut-dac { background: var(--muc); color: var(--nga); border-color: var(--muc); }
.nut-dac:hover { background: #1F3242; }
.nut-que { background: var(--que); color: var(--muc); border-color: var(--que); }
.nut-que:hover { background: #E5BE7A; }
.nut-vien:hover { background: rgba(14, 30, 43, .06); }
.toi .nut-vien:hover { background: rgba(241, 232, 214, .08); }
.nut-rong { width: 100%; }
.nut[disabled] { opacity: .45; cursor: not-allowed; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 21px; letter-spacing: .18em; white-space: nowrap; }
.logo svg { width: 40px; height: auto; }

/* Thanh trên: trang thương hiệu (tối) */
.dau-th { position: fixed; inset: 0 0 auto; z-index: 40; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--le); color: var(--nga); transition: background .4s, color .4s; }
.dau-th .logo { color: var(--que); }
.dau-th nav { display: flex; gap: 28px; font-size: 15px; }
.dau-th nav a { padding: 8px 0; border-bottom: 1px solid transparent; }
.dau-th nav a:hover, .dau-th nav a[aria-current] { border-color: currentColor; }
.dau-th .nut { min-height: 44px; padding: 0 20px; color: var(--que); }
.dau-th.sang { color: var(--muc); }
.dau-th.sang .logo { color: var(--que-dam); }
.dau-th.sang .nut { color: var(--muc); }
.dau-th.co-nen { background: rgba(14, 30, 43, .92); backdrop-filter: blur(8px); }
.nut-menu { display: none; width: 48px; height: 48px; border: 0; background: none; color: inherit; cursor: pointer; }

/* Thanh trên: cửa hàng (sáng) */
.dai-tren { background: var(--muc); color: var(--chu-phu-toi); font-size: 13px; display: flex; justify-content: center; gap: 28px; padding: 9px var(--le); text-align: center; flex-wrap: wrap; }
.dai-tren a { color: var(--que); }
.dau-ch { position: sticky; top: 0; z-index: 40; background: var(--nga-sang); border-bottom: 1px solid var(--vien); }
.dau-ch .khung { height: 72px; display: flex; align-items: center; gap: 28px; }
.dau-ch .logo { color: var(--muc); font-size: 20px; }
.dau-ch .logo svg path { stroke: #A97B2E; }
.dau-ch nav { display: flex; gap: 22px; font-weight: 500; font-size: 15px; }
.dau-ch nav a[aria-current] { color: var(--que-dam); }
.dau-ch .tim { flex: 1; display: flex; }
.dau-ch .tim input { flex: 1; height: 44px; border: 1px solid #CFC5B1; border-radius: var(--tron); background: #fff; padding: 0 18px; }
.dau-ch .goi { font-weight: 500; white-space: nowrap; }
.nut-gio { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--tron); background: var(--muc); color: var(--nga); font-weight: 600; white-space: nowrap; }
.nut-gio .dem { min-width: 22px; height: 22px; border-radius: 11px; background: var(--que); color: var(--muc); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Menu điện thoại */
.menu-dt { position: fixed; inset: 0; z-index: 60; background: var(--muc); color: var(--nga); display: flex; flex-direction: column; padding: 8px var(--le) 24px; transform: translateY(-100%); transition: transform .45s var(--nhanh); visibility: hidden; }
.menu-dt.mo { transform: none; visibility: visible; }
.menu-dt .dong { height: 60px; display: flex; align-items: center; justify-content: space-between; }
.menu-dt .logo { color: var(--que); font-size: 16px; }
.menu-dt nav { display: flex; flex-direction: column; margin-top: 12px; }
.menu-dt nav a { min-height: 60px; display: flex; align-items: center; border-bottom: 1px solid #2C3D4A; font-family: var(--serif); font-size: 26px; }
.menu-dt .cua-hang { margin: 8px 0; height: 60px; border-radius: 12px; background: var(--que); color: var(--muc); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-weight: 700; font-size: 18px; }
.menu-dt .day { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Chân trang */
.chan { background: var(--muc); color: var(--chu-phu-toi); font-size: 14px; line-height: 1.7; }
.chan .khung { padding-block: 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.chan b { color: var(--que); font-weight: 500; }
.chan h4 { margin: 0 0 8px; color: var(--nga); font-size: 14px; font-weight: 600; }
.chan ul { list-style: none; margin: 0; padding: 0; }
.chan a:hover { color: var(--nga); }
.chan .bct { display: inline-block; margin-top: 12px; padding: 6px 10px; border: 1px dashed #4A5A66; font-size: 12px; }

/* Thông báo nổi */
.bao { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: var(--muc); color: var(--nga); padding: 14px 22px; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transition: transform .4s var(--nhanh); max-width: calc(100% - 32px); }
.bao.hien { transform: translate(-50%, 0); visibility: visible; }

@media (max-width: 900px) {
  .dau-th nav, .dau-th .nut-desk, .dau-ch nav, .dau-ch .tim, .dau-ch .goi { display: none; }
  .nut-menu { display: inline-flex; align-items: center; justify-content: center; }
  .dau-th { height: 60px; }
  .dai-tren { font-size: 12px; padding-block: 7px; }
  .dai-tren span:nth-child(2), .dai-tren a { display: none; }
  .dau-ch .khung { height: 60px; gap: 8px; justify-content: space-between; }
  .chan .khung { grid-template-columns: 1fr 1fr; }
  .chan .khung > :first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}