@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-vietnamese-500-normal.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:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-vietnamese-600-normal.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:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-vietnamese-700-normal.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:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-vietnamese-500-italic.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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-latin-ext-500-italic.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-latin-500-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-vietnamese-600-italic.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:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-latin-ext-600-italic.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-latin-600-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/be-vietnam-pro-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/be-vietnam-pro-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/be-vietnam-pro-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/be-vietnam-pro-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Ý tưởng: "Mộc bản trên giấy dó, hoạ tiết lấy từ chính men gốm".
   Nền giấy dó, hoạ tiết in kiểu khắc gỗ (nét mực đậm nhạt, mép sần), viền cánh sen – hồi văn lấy từ bát hương, lộc bình,
   con dấu triện đỏ son, dải lụa đỏ cho Bộ sưu tập. 5 màu: chàm · cam (chỉ cho nút mua) · vàng kim · đỏ son · giấy. */
:root{
  --paper:#f3ead8; --bg:#f3ead8; --surface:#fbf6ec; --ink:#16123a; --muted:#564c62; --line:#ddd0b8;
  --navy:#080131; --accent:#f07a24; --accent-ink:#080131; --gold:#f4ca64; --gold-d:#9a6a1f; --son:#a3301c; --son-ink:#fbf1e1;
  --soft:#ece2cd; --warn:#fff1df; --warn-ink:#7a3d0c; --silk:#6e1a12;
  --f-display:"Playfair Display", "Times New Roman", serif;
  --f-body:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:10px;
  --sen:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2236%22 viewBox=%220 0 48 36%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.07%22 numOctaves=%222%22 seed=%224%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.8%22/%3E%3C/filter%3E%3Cg filter=%22url(%23f)%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M2 33C2 18 12 7 24 2C36 7 46 18 46 33%22 stroke=%22%23a3301c%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M11 33C11 23 16 15 24 11C32 15 37 23 37 33%22 stroke=%22%23b07d2c%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M24 17V31%22 stroke=%22%23b07d2c%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M-2 34H50%22 stroke=%22%23a3301c%22 stroke-width=%222.2%22/%3E%3C/g%3E%3C/svg%3E"); --hoi:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2230%22 viewBox=%220 0 28 30%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.07%22 numOctaves=%222%22 seed=%224%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.8%22/%3E%3C/filter%3E%3Cg filter=%22url(%23f)%22 fill=%22none%22 stroke=%22%23a3301c%22 stroke-width=%222%22 stroke-linecap=%22square%22%3E%3Cpath d=%22M0 2H28M0 28H28%22/%3E%3Cpath d=%22M0 24H21V7H7V19H16V12H12%22/%3E%3Cpath d=%22M21 24H28%22/%3E%3C/g%3E%3C/svg%3E"); --hoig:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2230%22 viewBox=%220 0 28 30%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.07%22 numOctaves=%222%22 seed=%224%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.8%22/%3E%3C/filter%3E%3Cg filter=%22url(%23f)%22 fill=%22none%22 stroke=%22%23f4ca64%22 stroke-width=%222%22 stroke-linecap=%22square%22%3E%3Cpath d=%22M0 2H28M0 28H28%22/%3E%3Cpath d=%22M0 24H21V7H7V19H16V12H12%22/%3E%3Cpath d=%22M21 24H28%22/%3E%3C/g%3E%3C/svg%3E"); --song:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2234%22 viewBox=%220 0 60 34%22%3E%3Cpath d=%22M-30.0 34A30.0 30.0 0 0 1 30.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-25.0 34A25.0 25.0 0 0 1 25.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-20.0 34A20.0 20.0 0 0 1 20.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-15.0 34A15.0 15.0 0 0 1 15.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-10.0 34A10.0 10.0 0 0 1 10.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-5.0 34A5.0 5.0 0 0 1 5.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M30.0 34A30.0 30.0 0 0 1 90.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M35.0 34A25.0 25.0 0 0 1 85.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M40.0 34A20.0 20.0 0 0 1 80.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M45.0 34A15.0 15.0 0 0 1 75.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M50.0 34A10.0 10.0 0 0 1 70.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M55.0 34A5.0 5.0 0 0 1 65.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M0.0 34A30.0 30.0 0 0 1 60.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M5.0 34A25.0 25.0 0 0 1 55.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M10.0 34A20.0 20.0 0 0 1 50.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M15.0 34A15.0 15.0 0 0 1 45.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M20.0 34A10.0 10.0 0 0 1 40.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M25.0 34A5.0 5.0 0 0 1 35.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3C/svg%3E"); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --fib:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.012 .22%22 numOctaves=%222%22 seed=%229%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 -2.4 1.25%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%22.11%22/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0e0938; --bg:#0e0938; --surface:#171048; --ink:#f1e9d8; --muted:#bdb3c9; --line:#2e2765;
  --navy:#060128; --accent:#f58a2e; --gold:#f4ca64; --gold-d:#e2b65a; --son:#ec8a6c; --son-ink:#1a0f0a;
  --soft:#1d1652; --warn:#2e1d0c; --warn-ink:#ffcf96; --silk:#4a0f0a;
  --sen:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2236%22 viewBox=%220 0 48 36%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.07%22 numOctaves=%222%22 seed=%224%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.8%22/%3E%3C/filter%3E%3Cg filter=%22url(%23f)%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M2 33C2 18 12 7 24 2C36 7 46 18 46 33%22 stroke=%22%23e0745a%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M11 33C11 23 16 15 24 11C32 15 37 23 37 33%22 stroke=%22%23f4ca64%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M24 17V31%22 stroke=%22%23f4ca64%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M-2 34H50%22 stroke=%22%23e0745a%22 stroke-width=%222.2%22/%3E%3C/g%3E%3C/svg%3E"); --hoi:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2230%22 viewBox=%220 0 28 30%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.07%22 numOctaves=%222%22 seed=%224%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.8%22/%3E%3C/filter%3E%3Cg filter=%22url(%23f)%22 fill=%22none%22 stroke=%22%23f4ca64%22 stroke-width=%222%22 stroke-linecap=%22square%22%3E%3Cpath d=%22M0 2H28M0 28H28%22/%3E%3Cpath d=%22M0 24H21V7H7V19H16V12H12%22/%3E%3Cpath d=%22M21 24H28%22/%3E%3C/g%3E%3C/svg%3E"); --song:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2234%22 viewBox=%220 0 60 34%22%3E%3Cpath d=%22M-30.0 34A30.0 30.0 0 0 1 30.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-25.0 34A25.0 25.0 0 0 1 25.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-20.0 34A20.0 20.0 0 0 1 20.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-15.0 34A15.0 15.0 0 0 1 15.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-10.0 34A10.0 10.0 0 0 1 10.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-5.0 34A5.0 5.0 0 0 1 5.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M30.0 34A30.0 30.0 0 0 1 90.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M35.0 34A25.0 25.0 0 0 1 85.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M40.0 34A20.0 20.0 0 0 1 80.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M45.0 34A15.0 15.0 0 0 1 75.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M50.0 34A10.0 10.0 0 0 1 70.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M55.0 34A5.0 5.0 0 0 1 65.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M0.0 34A30.0 30.0 0 0 1 60.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M5.0 34A25.0 25.0 0 0 1 55.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M10.0 34A20.0 20.0 0 0 1 50.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M15.0 34A15.0 15.0 0 0 1 45.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M20.0 34A10.0 10.0 0 0 1 40.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M25.0 34A5.0 5.0 0 0 1 35.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3C/svg%3E"); color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0e0938; --bg:#0e0938; --surface:#171048; --ink:#f1e9d8; --muted:#bdb3c9; --line:#2e2765;
  --navy:#060128; --accent:#f58a2e; --gold:#f4ca64; --gold-d:#e2b65a; --son:#ec8a6c; --son-ink:#1a0f0a;
  --soft:#1d1652; --warn:#2e1d0c; --warn-ink:#ffcf96; --silk:#4a0f0a;
  --sen:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2236%22 viewBox=%220 0 48 36%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.07%22 numOctaves=%222%22 seed=%224%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.8%22/%3E%3C/filter%3E%3Cg filter=%22url(%23f)%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M2 33C2 18 12 7 24 2C36 7 46 18 46 33%22 stroke=%22%23e0745a%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M11 33C11 23 16 15 24 11C32 15 37 23 37 33%22 stroke=%22%23f4ca64%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M24 17V31%22 stroke=%22%23f4ca64%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M-2 34H50%22 stroke=%22%23e0745a%22 stroke-width=%222.2%22/%3E%3C/g%3E%3C/svg%3E"); --hoi:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2230%22 viewBox=%220 0 28 30%22%3E%3Cfilter id=%22f%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.07%22 numOctaves=%222%22 seed=%224%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 scale=%221.8%22/%3E%3C/filter%3E%3Cg filter=%22url(%23f)%22 fill=%22none%22 stroke=%22%23f4ca64%22 stroke-width=%222%22 stroke-linecap=%22square%22%3E%3Cpath d=%22M0 2H28M0 28H28%22/%3E%3Cpath d=%22M0 24H21V7H7V19H16V12H12%22/%3E%3Cpath d=%22M21 24H28%22/%3E%3C/g%3E%3C/svg%3E"); --song:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2234%22 viewBox=%220 0 60 34%22%3E%3Cpath d=%22M-30.0 34A30.0 30.0 0 0 1 30.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-25.0 34A25.0 25.0 0 0 1 25.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-20.0 34A20.0 20.0 0 0 1 20.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-15.0 34A15.0 15.0 0 0 1 15.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-10.0 34A10.0 10.0 0 0 1 10.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M-5.0 34A5.0 5.0 0 0 1 5.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M30.0 34A30.0 30.0 0 0 1 90.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M35.0 34A25.0 25.0 0 0 1 85.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M40.0 34A20.0 20.0 0 0 1 80.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M45.0 34A15.0 15.0 0 0 1 75.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M50.0 34A10.0 10.0 0 0 1 70.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M55.0 34A5.0 5.0 0 0 1 65.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M0.0 34A30.0 30.0 0 0 1 60.0 34Z%22 fill=%22%235f8f88%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M5.0 34A25.0 25.0 0 0 1 55.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M10.0 34A20.0 20.0 0 0 1 50.0 34Z%22 fill=%22%23c59a4c%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M15.0 34A15.0 15.0 0 0 1 45.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M20.0 34A10.0 10.0 0 0 1 40.0 34Z%22 fill=%22%23b5543a%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M25.0 34A5.0 5.0 0 0 1 35.0 34Z%22 fill=%22%23f3e3c4%22 stroke=%22%234a2a18%22 stroke-width=%221.1%22/%3E%3C/svg%3E"); color-scheme:dark }
*{box-sizing:border-box}
html{scroll-padding-top:76px}
body{margin:0;background:var(--bg);background-image:var(--fib),var(--grain);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);line-height:1.18;text-wrap:balance;margin:0;font-weight:600}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.price{font-variant-numeric:tabular-nums;font-weight:700}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.proto{background:var(--warn);color:var(--warn-ink);font-size:14px}
.proto .wrap{padding-block:8px}

/* ---------- Đầu trang ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--navy)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--navy);color:#fff;border-bottom:1px solid rgba(244,202,100,.35)}
header .wrap{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .sao{width:36px;height:auto}
.logo .chu{height:38px;width:auto}
nav{display:flex;gap:20px;margin-left:auto;font-size:14.5px}
nav a{text-decoration:none;opacity:.85;padding-block:4px;border-bottom:1px solid transparent}
nav a:hover{opacity:1;border-bottom-color:var(--gold)}
.cartbtn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:8px 14px;font-weight:600;display:flex;gap:6px;align-items:center}
.cartbtn span{background:rgba(0,0,0,.18);border-radius:999px;padding:0 7px;font-size:13px}
@media (max-width:860px){ nav{display:none} .cartbtn{margin-left:auto} }

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:6px;padding:12px 20px;font-weight:600;border:1.5px solid transparent;text-decoration:none;font-size:15.5px}
.btn-p{background:var(--accent);color:var(--accent-ink)}
.btn-p:hover{filter:brightness(1.06)}
.btn-g{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-g:hover{background:var(--ink);color:var(--bg)}
.btn-o{border-color:var(--line);background:var(--surface);color:var(--ink)}

/* ---------- Tiêu đề mục: thống nhất một kiểu ---------- */
section{padding-block:72px}
.dm-head{text-align:center;margin-bottom:36px}
.dm-brand,.kicker{display:inline-flex;align-items:center;gap:12px;color:var(--son);font-weight:600;letter-spacing:.22em;font-size:13px;text-transform:uppercase}
.dm-brand::before,.dm-brand::after,.kicker::before,.kicker::after{content:"";width:40px;height:1.5px;background:currentColor;opacity:.7}
.dm-head h2,h2{font-size:clamp(28px,3.8vw,44px);color:var(--ink);margin-top:10px;letter-spacing:-.005em}
.dm-flour{display:block;margin:12px auto 0;width:88px;height:auto}
.dm-sub{color:var(--muted);max-width:60ch;margin:12px auto 0}

/* ---------- Hoạ tiết dùng chung ---------- */
.cloud{position:absolute;pointer-events:none;overflow:visible}
.band{height:36px;background-repeat:repeat-x;background-position:center bottom}
.band.sen{background-image:var(--sen);background-size:48px 36px}
.band.song{background-image:var(--song);background-size:60px 34px;height:34px}
.band.hoi{background-image:var(--hoi);background-size:28px 30px;height:30px}
.trien{display:block;width:84px;height:84px}

/* ---------- Mở đầu: tranh cuộn trên giấy dó ---------- */
.hero{position:relative;overflow:hidden;padding-block:56px 64px}
.hero .nui-mo{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;opacity:.55;pointer-events:none}
.cuon .cloud{z-index:5;height:auto}
.cuon .cloud.c1{left:-20%;top:2%;width:38%}
.cuon .cloud.c2{left:-15%;bottom:20%;width:27%}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero .eyebrow{color:var(--son);font-weight:600;letter-spacing:.2em;font-size:13px;text-transform:uppercase}
.hero h1{font-size:clamp(34px,5vw,62px);margin:14px 0 0;color:var(--ink);line-height:1.08}
.hero h1 em{font-style:italic;color:var(--son);font-weight:500;font-size:1.18em;line-height:1.05}
.hero-sep{display:flex;align-items:center;gap:10px;margin:22px 0 0}
.hero-sep span{width:44px;border-top:1.5px dashed var(--gold-d)}
.hero-sep i{width:9px;height:9px;border:1.5px solid var(--gold-d);transform:rotate(45deg)}
@media (max-width:860px){.hero-sep{justify-content:center;order:1;margin:-8px 0 0}}
.hero .lead{max-width:48ch;color:var(--muted);font-size:17px;margin:18px 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .sign{display:flex;align-items:center;gap:14px;margin-top:30px;color:var(--muted);font-size:14.5px}
.hero .sign svg{width:46px;height:46px;flex:none}
/* tranh cuộn */
.cuon{position:relative;justify-self:center;width:min(100%,520px);padding:22px 0}
.cuon .sun{position:absolute;right:-16%;top:-12%;width:52%;aspect-ratio:1}
.cuon .truc{position:absolute;left:-5%;right:-5%;height:16px;border-radius:8px;background:linear-gradient(180deg,#5a3520,#2c170c 60%,#4a2a18);box-shadow:0 3px 8px rgba(0,0,0,.25);z-index:3}
.cuon .truc::before,.cuon .truc::after{content:"";position:absolute;top:-3px;width:16px;height:22px;border-radius:5px;background:linear-gradient(180deg,#f4ca64,#9a6a1f)}
.cuon .truc::before{left:-10px} .cuon .truc::after{right:-10px}
.cuon .truc.t{top:12px} .cuon .truc.b{bottom:12px}
.cuon .to{position:relative;z-index:2;background:#efe2c4;background-image:var(--fib);padding:26px 22px 30px;box-shadow:0 18px 40px rgba(8,1,49,.22)}
.cuon .khung{border:1.5px solid #9a6a1f;padding:8px;position:relative}
.cuon .khung::before{content:"";position:absolute;inset:3px;border:1px solid rgba(154,106,31,.5);pointer-events:none}
.cuon img{display:block;width:100%;height:auto;aspect-ratio:4/3.1;object-fit:cover;object-position:center 60%}
.cuon .chu{display:flex;justify-content:space-between;align-items:end;margin-top:12px;font-family:var(--f-display);color:#3a2a1c;font-style:italic;font-size:15px}
.cuon .trien{position:absolute;right:16px;bottom:22px;width:62px;height:62px;transform:rotate(-6deg);z-index:4}
@media (max-width:860px){
  .hero{padding-block:28px 44px}
  .hero .wrap{grid-template-columns:1fr;gap:26px;text-align:center}
  .cuon{order:-1;width:min(88%,420px)}
  .hero .lead{margin-inline:auto;font-size:16px}
  .hero .cta{justify-content:center}
  .hero .sign{justify-content:center}
  .cuon .cloud.c1{left:-10%;width:36%} .cuon .cloud.c2{left:-8%;width:26%} .cuon .sun{right:-10%;top:-8%;width:46%}
  .hero .nui-mo{height:30%}
}

/* ---------- Dải cam kết ---------- */
.usp{border-block:3px double rgba(163,48,28,.45);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.usp .it{display:flex;gap:14px;align-items:center;padding:22px 18px;border-right:1px solid var(--line)}
.usp .it:last-child{border-right:0}
.usp svg{width:44px;height:44px;flex:none;color:var(--son)}
.usp b{display:block;font-family:var(--f-display);font-size:17px;color:var(--ink)}
.usp small{color:var(--muted);font-size:14px;line-height:1.45;display:block}
@media (max-width:900px){ .usp .wrap{grid-template-columns:repeat(2,1fr)} .usp .it:nth-child(2){border-right:0} .usp .it:nth-child(-n+2){border-bottom:1px solid var(--line)} }
@media (max-width:480px){ .usp .it{padding:14px 10px;gap:10px;flex-direction:column;align-items:flex-start} .usp svg{width:34px;height:34px} .usp b{font-size:15.5px} }

/* ---------- Câu chuyện thương hiệu ---------- */
.story{position:relative;overflow:hidden;padding-block:84px 0;background:transparent}
.story .sun{position:absolute;left:calc(50% + 330px);top:150px;width:130px;aspect-ratio:1}
.story .cloud{height:auto}
.story .cloud.a{left:4%;top:80px;width:220px}
.story .cloud.b{right:3%;top:210px;width:250px}
.story-in{position:relative;z-index:2;text-align:center}
.story h2{font-size:clamp(46px,7vw,84px);line-height:1;margin:16px 0 8px;color:var(--son)}
.story h2 i{display:block;font-weight:500;font-size:.5em;color:var(--ink);margin-top:10px}
.story .lead{max-width:60ch;margin:22px auto 0;font-size:17.5px;color:var(--ink)}
.dnl{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:52px auto 0;max-width:1000px}
.dnl .el{background:var(--surface);border:1.5px solid var(--son);border-radius:999px 999px 6px 6px;padding:36px 24px 28px;position:relative;box-shadow:6px 6px 0 rgba(163,48,28,.12)}
.dnl .el::before{content:"";position:absolute;inset:6px;border:1px solid rgba(163,48,28,.35);border-radius:999px 999px 3px 3px;pointer-events:none}
.dnl svg{width:72px;height:72px;display:block;margin:0 auto 10px}
.dnl b{display:block;font-family:var(--f-display);font-size:38px;color:var(--son);line-height:1;font-weight:600}
.dnl span{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);font-weight:700;margin:8px 0 10px}
.dnl p{margin:0;color:var(--ink);font-size:15.5px}
.tuyen-wrap{position:relative;max-width:760px;margin:64px auto 0}
.tuyen{font-family:var(--f-display);font-style:italic;font-size:clamp(24px,3.2vw,38px);color:var(--ink);margin:0 auto;line-height:1.32;max-width:26ch}
.tuyen-by{color:var(--son);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-top:12px}
.tuyen-wrap .trien{position:absolute;right:-10px;bottom:-26px;width:76px;height:76px;transform:rotate(-6deg)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1000px;margin:56px auto 0;text-align:left}
.how div{border-top:2px solid var(--son);padding-top:14px;position:relative}
.how div::before{content:attr(data-n);position:absolute;top:-15px;left:0;background:var(--son);color:var(--son-ink);font-family:var(--f-display);font-size:14px;width:28px;height:28px;display:grid;place-items:center;border-radius:4px}
.how b{font-family:var(--f-display);font-size:20px;color:var(--ink);display:block;margin:10px 0 6px;font-weight:600}
.how p{margin:0;color:var(--muted);font-size:15px}
.nui{position:relative;margin-top:44px}
.mountains{display:block;width:100%;height:clamp(180px,22vw,320px)}
.essence{position:absolute;left:0;right:0;bottom:16%;z-index:2;text-align:center;font-family:var(--f-display);font-style:italic;color:#2b1a10;font-size:clamp(19px,2.5vw,30px);padding-inline:16px}
@media (max-width:860px){
  .story{padding-top:56px}
  .story .cloud.a{width:120px;top:18px;left:-14px} .story .cloud.b{width:130px;top:auto;bottom:46%;right:-18px} .story .sun{left:auto;right:3%;top:130px;width:60px}
  .dnl{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .dnl .el{border-radius:80px 8px 8px 80px;display:grid;grid-template-columns:72px 1fr;column-gap:14px;text-align:left;padding:16px 18px;align-items:center}
  .dnl .el::before{border-radius:76px 5px 5px 76px}
  .dnl .el svg{grid-row:span 3;width:60px;height:60px;margin:0}
  .dnl b{font-size:28px} .dnl span{margin:4px 0 4px}
  .how{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:-16px;padding:20px 16px 8px}
  .how div{flex:0 0 80%;scroll-snap-align:start;background:var(--surface);padding:22px 16px 16px;border:1px solid var(--line);border-top:2px solid var(--son)}
  .how div::before{left:16px}
  .tuyen-wrap .trien{right:0;bottom:-40px;width:60px;height:60px}
  .essence{bottom:14%}
}

/* ---------- Danh mục ---------- */
.dm{position:relative;padding-top:56px}
.dm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dmc{position:relative;display:block;aspect-ratio:4/4.4;overflow:hidden;border:0;outline:1.5px solid var(--ink);outline-offset:4px;background:var(--navy);color:#fff;text-align:left;padding:0;border-radius:2px;margin:5px}
.dmc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.dmc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,1,49,0) 40%,rgba(8,1,49,.6) 66%,rgba(8,1,49,.94) 100%)}
.dmc::before{content:"";position:absolute;inset:12px;border:1px solid rgba(244,202,100,.55);z-index:2;pointer-events:none}
.dmc .tx{position:absolute;left:28px;right:28px;bottom:26px;z-index:3}
.dmc .no{font-family:var(--f-display);font-style:italic;color:var(--gold);font-size:18px}
.dmc h3{font-size:clamp(22px,2.2vw,27px);margin:2px 0 6px;color:#fff}
.dmc p{margin:0;font-size:14.5px;line-height:1.5;opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dmc:hover,.dmc:focus-visible{outline-color:var(--son)}
@media (prefers-reduced-motion:no-preference){ .dmc:hover img{transform:scale(1.05)} }
@media (max-width:900px){ .dm-grid{grid-template-columns:repeat(2,1fr);gap:16px} }
@media (max-width:560px){ .dm-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:6px 16px 10px;margin-inline:-16px} .dmc{flex:0 0 76%;scroll-snap-align:start} }

/* ---------- Bộ sưu tập: lụa đỏ ---------- */
.bst{position:relative;overflow:hidden;color:#fbefd8;background-color:var(--silk);
  background-image:
    linear-gradient(112deg,rgba(255,196,150,0) 18%,rgba(255,196,150,.13) 34%,rgba(255,196,150,0) 48%,rgba(255,170,120,.09) 70%,rgba(255,170,120,0) 86%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 50% 0%,rgba(150,40,24,.9),rgba(60,10,6,.9));
  padding-block:96px}
.bst::before,.bst::after{content:"";position:absolute;left:0;right:0;height:30px;background-image:var(--hoig);background-size:28px 30px;background-repeat:repeat-x;opacity:.85}
.bst::before{top:22px} .bst::after{bottom:22px}
.bst .dm-brand{color:var(--gold)} .bst .dm-head h2{color:#fbefd8} .bst .dm-sub{color:rgba(251,239,216,.8)} .bst .dm-flour{color:var(--gold)}
.bst .cloud{height:auto;opacity:.9}
.bst .cloud.a{left:-40px;top:80px;width:260px}
.bst .cloud.b{right:-30px;bottom:80px;width:220px}
@media (max-width:760px){ .bst .cloud.a{width:150px;top:60px} .bst .cloud.b{width:130px} }
.bst .wrap{position:relative;z-index:1}
.bst-grid{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:20px}
.bsc{position:relative;border:0;padding:0;overflow:hidden;min-height:240px;color:#fff;text-align:left;background:#2a0805;border-radius:2px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.bsc:first-child{grid-row:span 2;min-height:500px}
.bsc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bsc::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,6,3,.9),rgba(40,6,3,.2) 72%)}
.bsc::before{content:"";position:absolute;inset:10px;border:1px solid rgba(244,202,100,.6);z-index:2;pointer-events:none}
.bsc .tx{position:absolute;z-index:3;left:30px;bottom:28px;right:30px}
.bsc small{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:13px;font-weight:600}
.bsc h3{font-size:clamp(26px,2.8vw,36px);margin:6px 0 8px;color:#fff}
.bsc p{margin:0 0 16px;max-width:36ch;opacity:.92;font-size:15px}
.bsc .go{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--gold);color:var(--gold);font-weight:600;border-radius:4px;padding:8px 16px;font-size:14.5px;transition:background .2s,color .2s}
.bsc:hover .go,.bsc:focus-visible .go{background:var(--gold);color:var(--navy)}
@media (prefers-reduced-motion:no-preference){ .bsc:hover img{transform:scale(1.04)} }
@media (max-width:760px){ .bst{padding-block:80px} .bst-grid{grid-template-columns:1fr;grid-template-rows:none} .bsc:first-child{grid-row:auto;min-height:320px} .bsc{min-height:250px} }

/* ---------- Sản phẩm ---------- */
.patt{background-image:none}
.search{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);margin-bottom:12px}
.search:focus{border-color:var(--son);outline:none}
.fsheet{margin-bottom:18px}
.fs-head{display:none}
.filters{display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px 18px;box-shadow:0 4px 18px rgba(8,1,49,.05)}
.frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.frow > span{width:96px;font-size:14px;color:var(--muted);font-weight:600}
.chip{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:6px 13px;font-size:14px}
.chip:hover{border-color:var(--son)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip:disabled{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.fbtn{display:none}
.fbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:14px}
.linkbtn{border:0;background:none;color:var(--son);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:0}
select{font:inherit;font-size:14px;padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
@media (max-width:760px){
  .fbtn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:6px;padding:9px 14px;font-weight:600;font-size:15px}
  .fbtn b{background:var(--son);color:var(--son-ink);border-radius:999px;padding:0 7px;font-size:13px}
  .fsheet{position:fixed;left:0;right:0;bottom:0;z-index:22;background:var(--surface);border-radius:16px 16px 0 0;max-height:80vh;overflow:auto;margin:0;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 -10px 30px rgba(0,0,0,.25);visibility:hidden}
  .fsheet.open{transform:none;visibility:visible}
  .fs-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--surface);padding:14px 0 10px;border-bottom:1px solid var(--line);margin-bottom:10px;z-index:1}
  .fs-head b{font-family:var(--f-display);font-size:20px}
  .filters{border:0;box-shadow:none;padding:0}
  .frow > span{width:100%}
  .fbar{margin-bottom:4px}
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:border-color .2s, box-shadow .2s}
.card:hover{border-color:var(--gold-d);box-shadow:0 12px 28px rgba(8,1,49,.12)}
.card .pic{background:var(--soft);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;border:0;padding:0;width:100%;position:relative;overflow:hidden}
.card .pic::after{content:"";position:absolute;inset:8px;border:1px solid rgba(244,202,100,0);transition:border-color .3s;pointer-events:none}
.card:hover .pic::after{border-color:rgba(244,202,100,.8)}
.card .pic svg{height:74%;width:auto}
.card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:no-preference){ .card:hover .pic img{transform:scale(1.04)} }
.tag{position:absolute;top:12px;left:12px;font-size:12.5px;background:var(--son);color:var(--son-ink);border-radius:2px;padding:2px 9px;letter-spacing:.04em;font-weight:600}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:18.5px;color:var(--ink)}
.meta{font-size:14px;color:var(--muted)}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;gap:8px}
.card .price{font-size:16.5px;color:var(--son)}
.add{border:1.5px solid var(--navy);background:transparent;color:var(--navy);border-radius:4px;padding:6px 11px;font-size:14px;font-weight:600}
.add:hover{background:var(--navy);color:#fff}
:root[data-theme="dark"] .add{border-color:var(--ink);color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .add{border-color:var(--ink);color:var(--ink)} }
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
@media (max-width:520px){ .grid{grid-template-columns:repeat(2,1fr);gap:12px} .card .body{padding:10px 10px 12px} .card h3{font-size:16px} .card .meta{display:none} .card .row{flex-direction:column;align-items:stretch} .card .price{font-size:15px} .add{text-align:center} }

/* ---------- Chọn cỡ ---------- */
.alt{background:transparent;border-block:0}
.measure{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.measure svg{width:100%;max-width:480px;height:auto}
.measure ol{padding-left:22px;margin:16px 0}
.measure li{margin-bottom:8px}
.measure .dm-brand{justify-content:flex-start}
.sizes{width:100%;border-collapse:collapse;font-size:15px;margin-top:14px}
.sizes th,.sizes td{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left}
.sizes td:last-child,.sizes th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.note{font-size:14px;color:var(--muted)}
.todo{background:var(--warn);color:var(--warn-ink);border-radius:4px;padding:0 5px;font-size:14px}
@media (max-width:760px){ .measure{grid-template-columns:1fr} }


/* ---------- Chọn cỡ theo ban thờ ---------- */
.cocban{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px}
.cb-lab{font-size:16px;font-weight:700;color:var(--ink)}
.cb-in{display:flex;align-items:center;gap:8px;margin:8px 0 12px}
.cb-in input{width:150px;font-size:18px;font-weight:600}
.cb-in span{color:var(--muted)}
.cb-or{font-size:14px;color:var(--muted);margin-bottom:8px}
.cb-chips{display:flex;flex-wrap:wrap;gap:8px}
.cb-tab{margin-top:16px;font-size:15.5px}
.cb-tab caption{text-align:left;font-family:var(--f-display);font-size:19px;color:var(--son);padding-bottom:6px}
.cb-tab th{width:40%;color:var(--muted);font-weight:600}
.cb-tab td{font-weight:600;color:var(--ink);text-align:left!important}
.cb-note{background:var(--warn);color:var(--warn-ink);border-radius:6px;padding:8px 10px;font-size:14px;margin:12px 0 0}
.cb-lb{margin:16px 0 6px;padding:10px 12px;border-left:3px solid var(--son);background:rgba(163,48,28,.06);font-size:15px}
.measure{align-items:start}

.fb-wrap{position:relative}
.fb-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none}
.fb-grid::-webkit-scrollbar{display:none}
.fb{flex:0 0 calc((100% - 48px)/4);scroll-snap-align:start;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:zoom-in;display:flex;flex-direction:column}
.fb-nav{position:absolute;top:38%;z-index:2;width:46px;height:46px;border-radius:50%;border:1.5px solid #c99a3b;background:#fbf3e2;color:var(--son);font-size:30px;line-height:1;display:grid;place-items:center;box-shadow:0 4px 12px rgba(60,35,20,.2)}
.fb-nav.prev{left:-22px} .fb-nav.next{right:-22px}
.fb-nav:disabled{opacity:.35;cursor:default}
.fb{position:relative}
.fb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.fb-n{position:absolute;top:10px;right:10px;background:rgba(40,20,10,.72);color:#fbefd8;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px}
.lb-view{flex-direction:column;gap:10px}
.lb-view .lbn{position:absolute;top:50%;translate:0 -50%;width:50px;height:50px;border-radius:50%;border:1.5px solid #e3b55a;background:rgba(251,243,226,.95);color:#a3301c;font-size:32px;line-height:1;display:grid;place-items:center;cursor:pointer}
.lb-view .lbn.p{left:14px} .lb-view .lbn.n{right:14px}
.lb-view .lbc{color:#fbefd8;font-size:14px}
.lb-view .lbx{position:absolute;top:12px;right:14px;background:none;border:0;color:#fbefd8;font-size:34px;cursor:pointer}
.lb-view img{max-height:calc(100% - 40px)}
.fb figcaption{padding:9px 12px 11px;font-size:14.5px;color:var(--ink);font-weight:500;display:flex;justify-content:space-between;gap:8px}
.fb figcaption span{color:var(--son);font-size:13px;font-weight:600;white-space:nowrap}
.fb.has-q figcaption{display:block}
.fb-stack img+img{aspect-ratio:16/7;border-top:2px solid var(--surface)}
.fb-duo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.fb-duo img{aspect-ratio:2/3}
.fb-sp{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--son);margin-bottom:6px}
.fb blockquote{margin:0 0 8px;font-family:var(--f-display);font-style:italic;font-size:16px;line-height:1.45;color:var(--ink)}
.fb cite{display:flex;justify-content:space-between;gap:8px;font-style:normal;font-weight:700;font-size:14px;color:var(--ink)}
@media (max-width:560px){ .fb blockquote{font-size:14px} .fb cite{flex-direction:column;gap:0} }
.reviews:empty{display:none}
.reviews{margin-top:18px}
.lb-view{position:fixed;inset:0;z-index:30;background:rgba(20,10,5,.88);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.lb-view img{max-width:100%;max-height:100%;border-radius:2px}
@media (max-width:900px){ .fb{flex-basis:calc((100% - 16px)/2)} }
@media (max-width:560px){ .fb{flex-basis:82%} .fb-nav{width:38px;height:38px;font-size:24px} .fb-nav.prev{left:-6px} .fb-nav.next{right:-6px} .fb figcaption{font-size:13px;flex-direction:column;gap:2px;padding:7px 9px 9px} }

/* ---------- Quy trình làm gốm ---------- */
#quy-trinh{padding-top:56px}
.qt-grid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none;counter-reset:qt}
.qt-grid::-webkit-scrollbar{display:none}
.qt{flex:0 0 calc((100% - 54px)/4);scroll-snap-align:start;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:zoom-in}
.qt-pic{position:relative}
.qt-pic img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.qt-no{position:absolute;left:12px;bottom:-18px;width:40px;height:40px;border-radius:50%;background:var(--son);color:#fbefd8;font-family:var(--f-display);font-size:20px;display:grid;place-items:center;border:3px solid var(--surface)}
.qt figcaption{padding:26px 14px 16px}
.qt b{font-family:var(--f-display);font-size:19px;color:var(--ink);display:block;margin-bottom:4px}
.qt p{margin:0;font-size:14.5px;color:var(--muted)}
@media (max-width:900px){ .qt{flex-basis:calc((100% - 18px)/2)} }
@media (max-width:560px){ .qt{flex-basis:72%} .qt-pic img{aspect-ratio:4/5} }

/* ---------- Bảo hành ---------- */
.bh{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:start;margin-top:28px;background:var(--surface);border:1.5px solid #c99a3b;border-radius:6px;padding:28px;position:relative}
.bh-badge{float:right;margin:0 0 10px 16px;width:96px;height:96px;border-radius:50%;background:var(--son);color:#fbefd8;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 3px var(--son),inset 0 0 0 5px #e3b55a}
.bh-badge b{font-family:var(--f-display);font-size:38px;line-height:1}
.bh-badge span{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.bh h3{font-size:clamp(24px,2.6vw,32px);color:var(--son);margin-bottom:8px}
.bh-lead{font-size:16.5px;margin:0 0 14px}
.bh h4{font-family:var(--f-display);font-size:18px;margin:16px 0 6px;color:var(--ink)}
.bh ul{margin:0;padding-left:20px} .bh li{margin-bottom:4px}
.bh p{margin:0 0 6px}
.bh-img{margin:0;cursor:zoom-in}
.bh-img img{width:100%;height:auto;display:block;box-shadow:0 10px 26px rgba(60,35,20,.18)}
.bh-img figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px}
@media (max-width:760px){ .bh{grid-template-columns:1fr;padding:20px} .bh-badge{width:78px;height:78px} .bh-badge b{font-size:30px} }
/* ---------- Đánh giá, chính sách ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rslot{border:1px dashed var(--line);border-radius:4px;padding:18px;color:var(--muted);font-size:14.5px;display:grid;gap:10px;background:var(--surface)}
.rslot .ph{aspect-ratio:4/3;background:var(--soft);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:14px}
.rev{border:1px solid var(--line);border-radius:4px;padding:16px;background:var(--surface);display:grid;gap:8px;align-content:start}
.rev img{border-radius:2px;aspect-ratio:4/3;object-fit:cover;width:100%}
.rev .who{font-size:14px;color:var(--muted)}
@media (max-width:760px){ .reviews{grid-template-columns:1fr} }
.policy{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pol{background:var(--surface);border:1px solid var(--line);border-top:3px double var(--son);border-radius:2px;padding:20px}
.pol h3{font-size:19px;margin-bottom:6px}
.pol p{margin:0;color:var(--muted)}
@media (max-width:760px){ .policy{grid-template-columns:1fr} }

/* ---------- Chân trang ---------- */
.footer-nui{display:block;width:100%;height:150px;margin-bottom:-1px}
footer{background:var(--navy);color:#d6d2ea;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding-block:40px}
footer .flogo{height:84px;width:auto;margin-bottom:8px}
footer h4{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin:0 0 10px}
footer p{margin:5px 0}
footer .brandrow{display:flex;align-items:center;gap:18px}
footer .trien{width:64px;height:64px;transform:rotate(-6deg)}
.bct{border:1px dashed rgba(255,255,255,.35);border-radius:6px;padding:8px 10px;font-size:13px;display:inline-block;margin-top:10px}
@media (max-width:760px){ footer .wrap{grid-template-columns:1fr} }

/* ---------- Zalo, thanh menu điện thoại ---------- */
.zalo{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:8;background:var(--navy);color:var(--gold);border:1.5px solid var(--gold);border-radius:999px;padding:11px 18px;font-weight:700;box-shadow:0 8px 22px rgba(8,1,49,.35);text-decoration:none;display:flex;gap:8px;align-items:center}
.zalo svg{width:20px;height:20px}
.tabbar{display:none}
@media (max-width:760px){
  .zalo{display:none}
  header .cartbtn{display:none}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--navy);border-top:1px solid rgba(244,202,100,.4);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:62px;color:#efe7d6;background:none;border:0;text-decoration:none;font-size:12.5px;font-weight:600;position:relative}
  .tabbar svg{width:23px;height:23px;color:var(--gold)}
  .tabbar .z{color:var(--gold)}
  .tabbar .cnt{position:absolute;top:7px;left:calc(50% + 6px);background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:11.5px;padding:0 6px;line-height:17px}
}

/* ---------- Giỏ hàng, chi tiết ---------- */
.scrim{position:fixed;inset:0;background:rgba(5,10,20,.5);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);z-index:23;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.dhead h3{font-size:21px}
.x{border:0;background:transparent;color:var(--ink);font-size:24px;line-height:1;padding:4px 8px}
.dbody{padding:16px 18px;overflow:auto;flex:1;display:grid;gap:14px;align-content:start}
.line{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center}
.line svg{width:52px;height:60px;background:var(--soft);border-radius:6px;padding:4px}
.qty{display:flex;align-items:center;gap:8px;font-size:14px}
.qty button{width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.total{display:flex;justify-content:space-between;font-size:18px;border-top:1px solid var(--line);padding-top:12px}
form{display:grid;gap:10px}
label{font-size:14px;font-weight:600;display:grid;gap:4px}
input,textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.ok{background:var(--soft);border-radius:var(--r);padding:14px}
.modal{position:fixed;inset:0;z-index:23;display:flex;align-items:center;justify-content:center;padding:16px}
.mbox{background:var(--surface);border-radius:6px;max-width:900px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr}
.mpic{background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;position:relative;min-height:320px;gap:12px}
.mpic svg{height:300px;width:auto;max-width:100%}
.mpic img{max-height:440px;width:auto;max-width:100%;border-radius:2px}
.mpic .tag{top:14px;left:14px}
.minfo{padding:24px;display:grid;gap:12px;align-content:start}
.minfo h3{font-size:27px}
.minfo .eyebrow{color:var(--son);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.spec{font-size:15px;border-collapse:collapse;width:100%}
.spec td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{color:var(--muted);width:40%}
.thumbs{display:flex;gap:6px;flex-wrap:wrap}
.thumbs button{width:58px;height:58px;padding:0;border:2px solid transparent;border-radius:4px;overflow:hidden;background:var(--soft)}
.thumbs button[aria-pressed="true"]{border-color:var(--son)}
.thumbs img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){ .mbox{grid-template-columns:1fr} .mpic{min-height:240px} .mpic svg{height:220px} .mpic img{max-height:56vh} .modal{padding:0;align-items:flex-end} .mbox{max-height:94vh;border-radius:14px 14px 0 0} }


/* ---------- Hoạ tiết rồng, mây di sản (ảnh chị Hà cung cấp) ---------- */
.chim{position:absolute;pointer-events:none;user-select:none;height:auto;z-index:0}
.chim-wrap{position:relative;overflow:hidden}
.chim-wrap > .wrap{position:relative} /* không đặt z-index: để ngăn bộ lọc (fixed) nổi trên lớp phủ */
.hero .rong-ly{left:-6%;top:50%;width:min(620px,52vw);translate:0 -50%;opacity:.09}
.hero .dao-mac{position:absolute;left:-4%;bottom:-70px;width:min(760px,62vw);height:auto;opacity:.16;pointer-events:none}
.cuon .cloud.c1{left:-26%;top:-2%;width:44%;height:auto;z-index:5;filter:drop-shadow(0 6px 10px rgba(8,1,49,.15))}
.story .goc{position:absolute;top:14px;width:clamp(90px,12vw,170px);height:auto;opacity:.9;pointer-events:none;z-index:1}
.story .goc.tl{left:14px} .story .goc.tr{right:14px;transform:scaleX(-1)}
.story .rong-ly-s{left:50%;top:10px;width:min(560px,80vw);translate:-50% 0;opacity:.08}
.story .cloud.ns{left:0;top:340px;width:clamp(150px,17vw,250px);height:auto}
.tuyen-wrap .rong-nho{display:block;width:120px;height:auto;margin:0 auto 10px}
.bst .rong-tran{left:50%;top:30px;width:min(640px,92vw);translate:-50% 0;opacity:.34}
.bst .dao-mac{position:absolute;right:-6%;bottom:30px;width:min(700px,70vw);height:auto;opacity:.28;pointer-events:none}
#san-pham .phuong{right:-40px;top:20px;width:min(380px,40vw);opacity:.08}
#danh-gia .rong-le{left:-60px;top:30px;width:min(420px,45vw);opacity:.08}
footer{position:relative;overflow:hidden}
footer .wrap{position:relative;z-index:1}
footer .rong-le-f{right:-30px;bottom:-40px;width:min(380px,50vw);opacity:.12;transform:scaleX(-1)}
.dm-flour{display:block;margin:14px auto 0;width:min(230px,60vw);height:auto}
.bst .dm-flour{filter:brightness(1.05)}
/* biển chữ đỏ cho nhãn mục */
.dm-brand,.kicker{background:url(/motif/bien-do.webp) center/100% 100% no-repeat;color:#f8dc93;min-width:250px;height:58px;justify-content:center;padding:0 76px;letter-spacing:.18em;font-size:12.5px}
.dm-brand::before,.dm-brand::after,.kicker::before,.kicker::after{display:none}
.bst .dm-brand{color:#f8dc93}
.measure .dm-brand{justify-content:center}
/* góc hoa văn trên thẻ danh mục */
.dmc .gl,.dmc .gr{position:absolute;top:8px;width:60px;height:67px;background:url(/motif/goc-lon.webp) 0 0/100% 100% no-repeat;z-index:3;pointer-events:none}
.dmc .gl{left:8px} .dmc .gr{right:8px;transform:scaleX(-1)}
@media (max-width:760px){
  .hero .rong-ly{left:50%;top:auto;bottom:0;translate:-50% 0;width:90vw;opacity:.07}
  .hero .dao-mac{width:110vw;opacity:.14;bottom:-40px}
  .story .cloud.ns{display:none}
  .cuon .cloud.c1{left:-14%;width:40%}
  .dm-brand,.kicker{min-width:220px;height:52px;padding:0 62px;font-size:11.5px;letter-spacing:.14em}
}
/*FIX1 mây nhỏ, nhạt, đối xứng hai góc trên*/
.cuon .cloud.c1,.cuon .cloud.c2{top:-14px;bottom:auto;width:19%;height:auto;opacity:.5;filter:saturate(.45) sepia(.25);z-index:1}
.cuon .cloud.c1{left:-11%} .cuon .cloud.c2{left:auto;right:-11%;transform:scaleX(-1)}
@media (max-width:860px){ .cuon .cloud.c1,.cuon .cloud.c2{width:17%} .cuon .cloud.c1{left:-8%} .cuon .cloud.c2{right:-8%} }
/*ENDFIX*/
/*FIX2 con dấu nhỏ, nằm cuối dòng chú thích, góc dưới phải khung ảnh*/
.cuon .chu{align-items:center;gap:12px}
.cuon .chu .trien{position:static;flex:none;width:38px;height:38px;transform:rotate(-6deg)}
/*ENDFIX*/
/*FIX3 trục cuộn mỏng, màu gỗ sáng*/
.cuon .truc{height:7px;left:-3%;right:-3%;border-radius:4px;background:linear-gradient(180deg,#c4a07a,#9c7550);box-shadow:0 1px 3px rgba(60,35,20,.18)}
.cuon .truc::before,.cuon .truc::after{top:-2px;width:9px;height:11px;border-radius:3px;background:#d6b77e}
.cuon .truc::before{left:-6px} .cuon .truc::after{right:-6px}
.cuon .truc.t{top:18px} .cuon .truc.b{bottom:18px}
/*ENDFIX*/
/*FIX4 ảnh to hơn, bỏ bớt lớp viền*/
.hero .wrap{grid-template-columns:.92fr 1.08fr;gap:48px}
.cuon{width:min(100%,620px)}
.cuon .to{padding:12px 12px 10px;box-shadow:0 14px 34px rgba(60,35,20,.18)}
.cuon .khung{border:0;padding:0}
.cuon .khung::before{display:none}
.cuon img{aspect-ratio:4/3;border-radius:1px}
.cuon .chu{margin-top:8px;font-size:14px}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;gap:22px} .cuon{width:min(94%,600px)} }
/*ENDFIX*/
/*FIX5 thanh đầu trang nâu đậm hoà với tông kem – nâu đất*/
:root{--bar:#4a2c1f}
header,body::before,.tabbar{background:var(--bar)}
header{border-bottom:1px solid rgba(214,183,126,.45)}
.tabbar{border-top-color:rgba(214,183,126,.45)}
/*ENDFIX*/
/*FIX6 màn đầu: tiêu đề – ảnh – câu giá trị – nút*/
.hero .do-link{display:inline-block;margin-top:14px;color:var(--son);font-weight:600;font-size:14.5px;text-underline-offset:3px}
.hero h1{font-size:clamp(34px,4.6vw,58px)}
@media (max-width:860px){
  .hero{padding-block:18px 32px}
  .hero .wrap > div:first-child{display:contents}
  .hero .eyebrow{display:none}
  .hero h1{order:1;margin:0;font-size:clamp(28px,6.4vw,40px)}
  .cuon{order:2;padding:14px 0}
  .hero .lead{order:3;margin:0 auto;max-width:42ch}
  .hero .cta{order:4}
  .hero .do-link{order:5;margin-top:-8px}
  .hero .cta .btn{padding:12px 18px}
}
@media (max-width:420px){ .hero .wrap{gap:14px} .hero .lead{font-size:15px} .hero .cta{gap:8px} .hero .cta .btn{padding:11px 14px;font-size:15px} }
/*ENDFIX*/
/*FIX7 hoạ tiết phụ nhạt hơn ảnh; nút Zalo nổi cùng tông nâu*/
.cuon .sun{opacity:.5;width:40%;right:-12%;top:-8%}
.zalo{background:var(--bar);border-color:#d6b77e;color:#f3dca4;box-shadow:0 8px 22px rgba(60,35,20,.3)}
/*ENDFIX*/
/*FIX9 lưỡng long thời Lê chầu câu tuyên ngôn*/
.tuyen-wrap{position:relative;display:grid;grid-template-columns:1fr minmax(0,480px) 1fr;align-items:center;gap:0;max-width:1180px;margin:56px auto 0;padding:10px 0 40px}
.tuyen-wrap .rong{position:relative;z-index:1;width:100%;max-width:540px;height:auto;opacity:.85}
.tuyen-wrap .rong.l{justify-self:end;transform:scaleX(-1)}
.tuyen-wrap .rong.r{justify-self:start}
.tuyen-wrap .may-duoi{position:absolute;z-index:0;left:50%;bottom:0;translate:-50% 0;width:min(820px,90%);height:auto;opacity:.3;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.tuyen-c{position:relative;z-index:2;text-align:center;padding:0 8px}
.tuyen-c .tuyen{font-size:clamp(26px,2.8vw,40px);max-width:none;margin:22px 0 14px;text-wrap:balance}
.tuyen-c .tuyen-by{margin:0}
.tuyen-c .vach2{display:block;width:min(240px,70%);height:auto;margin:18px auto 0}
.tuyen-c .trien{position:absolute;right:-6px;bottom:-34px;width:56px;height:56px}
@media (max-width:860px){
  .tuyen-wrap{grid-template-columns:1fr minmax(0,60%) 1fr;margin-top:40px;padding-bottom:24px}
  .tuyen-c .tuyen{font-size:clamp(19px,4vw,28px);margin:14px 0 10px}
  .tuyen-c .dm-brand{white-space:nowrap}
}
@media (max-width:480px){
  .tuyen-wrap{grid-template-columns:1fr minmax(0,66%) 1fr}

  .tuyen-c .tuyen{font-size:18px}
  .tuyen-c .tuyen,.tuyen-c .tuyen-by{text-shadow:0 0 10px var(--bg),0 0 4px var(--bg),0 0 2px var(--bg)}
  .tuyen-c .tuyen-by{font-size:11px;letter-spacing:.12em}
  .tuyen-wrap .rong{width:118%;max-width:none;opacity:.7}
  .tuyen-wrap .rong.l{margin-right:-12%} .tuyen-wrap .rong.r{margin-left:-12%}
  .tuyen-c .trien{width:40px;height:40px;right:0;bottom:-24px}
  .tuyen-wrap .may-duoi{width:100%}
}
/*ENDFIX*/
/*FIX13 khung tiêu đề bộ mới (kem – vàng kim – đỏ son – coban), chữ to đậm*/
html,body{overflow-x:clip}
.dm-brand,.kicker{position:relative;display:inline-flex;align-items:center;justify-content:center;width:min(580px,94vw);height:auto;min-width:0;margin:0;
  border:0;border-image:none;border-radius:0;box-shadow:none;background:none center/100% 100% no-repeat;
  color:#a3301c;font-family:var(--f-body);font-size:21px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 0 #fff8ea}
.dm-brand::before,.dm-brand::after,.kicker::before,.kicker::after{display:none}
.bst .dm-brand{color:#a3301c}
.measure .dm-brand{margin-left:0}
.kh-may{background-image:url(/motif/khung2-may.webp);aspect-ratio:1100/246;padding:0 23%}
.kh-song{background-image:url(/motif/khung2-song.webp);aspect-ratio:1100/272;padding:0 13%}
.kh-sen{background-image:url(/motif/khung2-sen.webp);aspect-ratio:1100/263;padding:0 21%}
.kh-ca-chep{background-image:url(/motif/khung2-ca-chep.webp);aspect-ratio:1100/275;padding:0 19%}
.kh-hac{background-image:url(/motif/khung2-hac.webp);aspect-ratio:1100/247;padding:0 26%}
.tuyen-c .dm-brand{width:min(520px,140%);margin-inline:-20%;font-size:20px}
@media (max-width:860px){
  .dm-brand,.kicker,.tuyen-c .dm-brand{width:104vw;max-width:none;margin-inline:calc(50% - 52vw);font-size:16px;letter-spacing:.05em}
}
@media (max-width:400px){ .dm-brand,.kicker,.tuyen-c .dm-brand{font-size:14.5px;letter-spacing:.03em} }
/* khung hạc: hạc chiếm hai góc trên, chữ đặt rộng hơn và hạ xuống giữa dưới */
.kh-hac{width:min(700px,96vw);padding:4.5% 25% 0;font-size:21px}
.story .kicker.kh-hac{font-size:21px;letter-spacing:.06em}
@media (max-width:860px){ .kh-hac,.story .kicker.kh-hac{width:116vw;margin-inline:calc(50% - 58vw);font-size:13px;letter-spacing:.02em;padding:5% 27% 0} }
/* rồng, mây chỉ làm nền mờ */
.story .rong-ly-s,.bst .rong-tran,#san-pham .phuong,#danh-gia .rong-le,footer .rong-le-f,.bst .dao-mac{opacity:.08}
.tuyen-wrap .rong{opacity:.12}
.story .cloud.ns,.cuon .cloud.c1,.cuon .cloud.c2{opacity:.12;filter:grayscale(1) sepia(.5)}
.story .goc{opacity:.25}
/* chữ khung tiêu đề to hơn */
.dm-brand,.kicker{width:min(660px,96vw);font-size:27px;letter-spacing:.06em}
.kh-song{width:min(600px,96vw);padding:0 11%}
.kh-may{padding:0 21%} .kh-sen{padding:0 19%} .kh-ca-chep{padding:0 17%}
.tuyen-c .dm-brand{width:min(600px,150%);margin-inline:-25%;font-size:25px}
.kh-hac,.story .kicker.kh-hac{width:min(720px,96vw);font-size:23px;letter-spacing:.03em;padding:2% 20% 0}
@media (max-width:860px){
  .dm-brand,.kicker,.tuyen-c .dm-brand{width:108vw;max-width:none;margin-inline:calc(50% - 54vw);font-size:19px;letter-spacing:.03em}
  .kh-hac,.story .kicker.kh-hac{width:112vw;margin-inline:calc(50% - 56vw);font-size:16px;letter-spacing:.02em;padding:2% 21% 0}
}
@media (max-width:400px){ .dm-brand,.kicker,.tuyen-c .dm-brand{font-size:17.5px;letter-spacing:.02em} .kh-hac,.story .kicker.kh-hac{font-size:14.5px} }
/* khung tiêu đề có chữ sẵn (bộ chị Hà gửi) */
.dm-brand.kt{display:block;width:min(560px,92vw);height:auto;aspect-ratio:auto;margin:0 auto;padding:0;background:none;font-size:0;letter-spacing:0}
.dm-brand.kt img{display:block;width:100%;height:auto}
.tuyen-c .dm-brand.kt{width:min(560px,130%);margin:0 -15%}
.measure .dm-brand.kt{margin:0}
@media (max-width:860px){ .dm-brand.kt,.tuyen-c .dm-brand.kt{width:min(460px,96vw);margin-inline:auto} .tuyen-c .dm-brand.kt{width:92vw;margin-inline:calc(50% - 46vw)} }
/*ENDFIX*/

/* Lộc bình lớn, chóe: giá liên hệ */
.price.lh-p{color:var(--son,#a3301c);font-weight:700;letter-spacing:.01em}
a.add.lh{display:inline-block;text-decoration:none;text-align:center;background:#0068ff;border-color:#0068ff;color:#fff}
a.add.lh:hover{background:#0052cc;border-color:#0052cc}
:root[data-theme="dark"] a.add.lh{background:#0068ff;border-color:#0068ff;color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) a.add.lh{background:#0068ff;border-color:#0068ff;color:#fff} }
a.btn{text-decoration:none;display:inline-flex;align-items:center}

/* Gợi ý combo */
.combo-sec{padding:72px 0}
.combo-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.combo-head h2{margin:14px 0 6px}
.combo-lead{max-width:640px;margin:0 auto 26px;color:var(--ink-2,#5a4a3c)}
.combo-step{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-size:17px;flex-wrap:wrap}
.combo-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#a3301c;color:#fff8ea;font-weight:800;font-size:14px}
.combo-hint{color:#8a6a3c;font-weight:600}
.combo-sizes{display:flex;flex-wrap:wrap;gap:8px}
.combo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.combo-card{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:1.5px solid #d9c49a;border-radius:6px;background:#fffaf0;cursor:pointer;overflow:visible;font:inherit;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.combo-card:hover{border-color:#c99a3b;box-shadow:0 6px 18px rgba(74,44,31,.12);transform:translateY(-2px)}
.combo-card.on{border-color:#a3301c;box-shadow:0 0 0 2px #a3301c inset}
.combo-card.empty{opacity:.8}
.cc-pic{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:5px 5px 0 0;background:#efe3c8}
.cc-pic img{width:100%;height:100%;object-fit:cover;display:block}
.cc-ph{display:grid;place-items:center;height:100%;color:#8a6a3c;font-size:13px}
.cc-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.cc-name{font-family:var(--f-head,serif);font-size:18px;font-weight:700;color:#2b1d14;line-height:1.25}
.cc-meta{font-size:13px;color:#7a6650}
.cc-price{font-weight:800;font-size:19px;color:#c45410;font-variant-numeric:tabular-nums}
.cc-price.lh{color:#a3301c;font-size:16px}
.cc-go{font-size:13px;font-weight:700;color:#1d3c8c}
/* dấu mộc đỏ */
.moc{position:absolute;z-index:2;top:-10px;right:-6px;display:inline-block;padding:3px;border:2px solid #b3261e;border-radius:4px;background:rgba(255,248,234,.94);transform:rotate(-7deg);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.moc span{display:block;padding:5px 9px;border:1px solid #b3261e;border-radius:2px;color:#b3261e;font-weight:800;font-size:11.5px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;text-align:center;max-width:150px;
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 62%,rgba(0,0,0,.75) 63%,#000 70%);mask-image:radial-gradient(circle at 30% 40%,#000 62%,rgba(0,0,0,.75) 63%,#000 70%)}
.combo-detail{margin-top:22px;padding:20px;border:1.5px solid #c99a3b;border-radius:6px;background:#fffaf0}
.cd-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.cd-head h3{margin:0;font-size:22px}
.cd-head .moc{position:static;transform:rotate(-4deg)}
.cd-scroll{overflow-x:auto}
.cd-tab{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.cd-tab th,.cd-tab td{padding:9px 10px;border-bottom:1px solid #e6d6b4;text-align:left;vertical-align:top}
.cd-tab thead th{background:#4a2c1f;color:#f3dca4;font-weight:700;font-size:13.5px}
.cd-tab .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cd-tab tfoot th{font-size:17px;border-bottom:0;padding-top:14px}
.cd-tab tfoot th.n{color:#c45410;font-size:21px}
.cd-tab tr.miss td{color:#8a6a3c;font-style:italic}
.cd-tab .linkbtn{background:none;border:0;padding:0;color:#1d3c8c;text-align:left;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cd-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width:980px){ .combo-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .combo-grid{gap:12px} .cc-name{font-size:15px} .cc-price{font-size:16px} .cc-meta{font-size:12px} .moc span{font-size:9.5px;padding:4px 6px;max-width:110px} .combo-detail{padding:14px} .cd-tab{font-size:14px} }
/* ---------- Chuyển động: chậm, nhẹ, chỉ chạy khi máy cho phép ---------- */
@keyframes xoay{to{rotate:360deg}}
@keyframes troi{from{translate:0 0}to{translate:-14px 4px}}
.motion .rv{opacity:0;transform:translateY(16px);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
.motion .rv.in{opacity:1;transform:none}
.motion .rv.d1{transition-delay:.12s} .motion .rv.d2{transition-delay:.24s} .motion .rv.d3{transition-delay:.36s}
.motion .draw{stroke-dasharray:1 1.2;stroke-dashoffset:1}
.motion .draw.in{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.25,1) .2s}
.motion .unroll{clip-path:inset(0 50% 0 50%);transition:clip-path 1.5s cubic-bezier(.65,.05,.25,1)}
.motion .unroll.in{clip-path:inset(0 0 0 0)}
.motion .unroll.d1{transition-delay:.12s} .motion .unroll.d2{transition-delay:.24s} .motion .unroll.d3{transition-delay:.36s} .motion .unroll.d4{transition-delay:.48s} .motion .unroll.d5{transition-delay:.6s}
.motion .cuon .to{clip-path:inset(0 0 100% 0);transition:clip-path 1.8s cubic-bezier(.65,.05,.25,1) .25s}
.motion .cuon .truc.b{transform:translateY(calc(-1 * var(--to-h,400px)));transition:transform 1.8s cubic-bezier(.65,.05,.25,1) .25s}
.motion .cuon.in .to{clip-path:inset(0 0 0 0)}
.motion .cuon.in .truc.b{transform:none}
.motion .stamp{opacity:0;transform:scale(1.8) rotate(-16deg)}
.motion .stamp.in{opacity:1;transform:scale(1) rotate(-6deg);transition:transform .5s cubic-bezier(.3,1.5,.5,1) .5s, opacity .15s .5s}
.motion .cuon.in .stamp{opacity:1;transform:scale(1) rotate(-6deg);transition:transform .5s cubic-bezier(.3,1.5,.5,1) 2s, opacity .15s 2s}
.motion .story .sun,.motion .cuon .sun{animation:tho 7s ease-in-out infinite alternate}
@keyframes tho{from{scale:1}to{scale:1.04}}

/* ===== Web nhiều trang ===== */
a.dmc,a.bsc{text-decoration:none;display:block}
header .wrap{gap:16px}
.mnav{display:flex;gap:4px;margin-left:auto;font-size:15px;align-items:center}
.mnav>a,.dd>a{display:inline-flex;align-items:center;gap:4px;padding:10px 12px;border-bottom:0;white-space:nowrap}
.dd{position:relative}
.dd .car{font-size:11px;opacity:.7}
.ddm{position:absolute;top:100%;left:0;min-width:250px;background:var(--bar);border:1px solid rgba(214,183,126,.45);border-top:2px solid var(--gold);border-radius:0 0 6px 6px;padding:10px 0;display:none;box-shadow:0 18px 40px rgba(0,0,0,.28);z-index:30}
.dd:hover .ddm,.dd:focus-within .ddm{display:grid}
.ddm a{padding:9px 18px;opacity:.9;border:0;white-space:nowrap;font-size:14.5px}
.ddm a:hover{background:rgba(244,202,100,.12);opacity:1}
.ddm.mega{grid-template-columns:repeat(3,auto);gap:4px 10px;padding:16px 8px;left:auto;right:-220px}
.dd:hover .ddm.mega,.dd:focus-within .ddm.mega{display:grid}
.ddm.mega>div{display:grid;align-content:start}
.ddm.mega b{color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:4px 18px 6px;font-weight:600}
.burger{display:none;background:none;border:0;padding:8px;margin-left:4px;flex-direction:column;gap:5px}
.burger span{display:block;width:24px;height:2px;background:#f3dca4;border-radius:2px}
@media (max-width:1100px){ .mnav{font-size:14px} .mnav>a,.dd>a{padding:10px 8px} }
@media (max-width:860px){ .mnav{display:none} .burger{display:flex} }
.mmenu{position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);background:var(--surface);z-index:25;overflow:auto;box-shadow:-10px 0 30px rgba(0,0,0,.25)}
.mmenu .dhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.mmenu .x{background:none;border:0;font-size:28px;line-height:1;color:var(--ink)}
.mm-body>a,.mm-body summary{display:block;padding:14px 18px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.mm-body summary::-webkit-details-marker{display:none}
.mm-body summary::after{content:"+";float:right;color:var(--son);font-weight:400}
.mm-body details[open] summary::after{content:"−"}
.mm-body details div{display:grid;padding:4px 0 10px;background:var(--soft)}
.mm-body details a{padding:9px 28px;color:var(--ink);text-decoration:none;font-size:15px}
.mm-body details small{padding:10px 28px 2px;color:var(--son);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.phead{background:var(--soft);border-bottom:1px solid var(--line);padding:22px 0 20px}
.phead .crumb{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.phead .crumb a{color:var(--muted);text-decoration:none}.phead .crumb a:hover{color:var(--son)}
.phead h1{font-size:clamp(26px,3.4vw,38px);color:var(--ink);margin-top:8px}
.phead p{margin:8px 0 0;color:var(--muted);max-width:70ch}
.phead .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.phead .chips a{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font-size:14px;color:var(--ink);text-decoration:none}
.phead .chips a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.home-sec{padding-block:64px}
.home-sec .more{text-align:center;margin-top:26px}
.card h3 a{color:inherit;text-decoration:none}
.card a.pic{display:flex}
.teaser{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.teaser img.ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;border:1.5px solid #9a6a1f;padding:6px;background:var(--surface)}
.teaser .lead{color:var(--muted);font-size:17px}
.teaser .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media (max-width:760px){ .teaser{grid-template-columns:1fr} }
.cbt{background:var(--navy);color:#f3e7cf;border-radius:4px;padding:34px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.cbt h2{color:#fbefd8;font-size:clamp(24px,3vw,34px)}.cbt p{color:rgba(243,231,207,.85)}
.cbt .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cbt .btn-g{color:#fbefd8;border-color:rgba(251,239,216,.6)}
@media (max-width:760px){ .cbt{grid-template-columns:1fr;padding:24px} .cbt .cta{justify-content:flex-start} }
.spd{padding-block:30px 60px}
.mbox.sp-inline{max-width:none;max-height:none;overflow:visible;border:1px solid var(--line);box-shadow:0 6px 24px rgba(8,1,49,.06)}
.sp-inline .minfo h3,.sp-inline [data-close]{display:none}
main>#san-pham:first-child{padding-top:30px}
.sp-inline .mpic img{max-height:560px}
.sp-rel{margin-top:48px}.sp-rel h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:18px}
.pg-sec{padding-block:44px 64px}
.pg-sec .pol{margin-bottom:16px}
.pg-sec .policy{grid-template-columns:1fr 1fr}
@media (max-width:760px){ .pg-sec .policy{grid-template-columns:1fr} }
.lh-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
.lh-grid .pol p{margin:6px 0}
.lh-grid iframe{width:100%;height:380px;border:1px solid var(--line);border-radius:4px}
@media (max-width:760px){ .lh-grid{grid-template-columns:1fr} }