/* NOTE khung web mới cho cửa hàng Odoo — dựng từ kho-moc/93c132a (rel/2026-11-15.90) bởi scripts/shop/dung_khung_odoo.py */
@font-face{font-family:Anybody;font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(/web/content/126402/da487e35b293a78b-s.0pqyxaf_ppwmk.woff2?unique=b9db09c989)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Anybody;font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(/web/content/126403/40042ef7a6e1ba18-s.234jeyushtgp_.woff2?unique=cf212826a1)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Anybody;font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(/web/content/126404/4497b0bfa7c3cba4-s.03x-kc1owbo0-.woff2?unique=1388504e43)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Anybody Fallback;src:local(Arial);ascent-override:72.11%;descent-override:21.77%;line-gap-override:0.0%;size-adjust:110.25%}
@font-face{font-family:Alumni Sans;font-style:normal;font-weight:100 900;font-display:swap;src:url(/web/content/126405/01e5755b098165ec-s.06nd-j31u9due.woff2?unique=473302709c)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Alumni Sans;font-style:normal;font-weight:100 900;font-display:swap;src:url(/web/content/126406/8b730e91c7ddb4d7-s.2m14d0ygxv3u7.woff2?unique=5498540ab2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Alumni Sans;font-style:normal;font-weight:100 900;font-display:swap;src:url(/web/content/126407/9db9b54658ae6b65-s.3g1ei2m2xeu7y.woff2?unique=6e541f34d3)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Alumni Sans;font-style:normal;font-weight:100 900;font-display:swap;src:url(/web/content/126408/f0f1a303750662c1-s.102b8ad9u5ojf.woff2?unique=12c501af49)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Alumni Sans;font-style:normal;font-weight:100 900;font-display:swap;src:url(/web/content/126409/29ec729e74790a33-s.p.3qh2nyhh7vs2v.woff2?unique=e7446b9f99)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alumni Sans Fallback;src:local(Arial);ascent-override:133.74%;descent-override:44.58%;line-gap-override:0.0%;size-adjust:67.29%}
@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:400;font-display:swap;src:url(/web/content/126410/77d9a04c69f7b11b-s.1uklb5el4zgvl.woff2?unique=89d2b6c228)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:400;font-display:swap;src:url(/web/content/126411/d81b50f8e1aba043-s.05i4gb4p0piv4.woff2?unique=7e4c5ca7f0)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,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(/web/content/126412/dd018b41519c2d93-s.2g-0we2o5_ngd.woff2?unique=a14cd59a25)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,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(/web/content/126413/6ac706d910f2bd04-s.25pbmqxk8u2s7.woff2?unique=792dc32a23)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Be Vietnam Pro;font-style:normal;font-weight:600;font-display:swap;src:url(/web/content/126414/3c61b7007b1b2764-s.0n_ln9vqskgts.woff2?unique=d7b18c96fa)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,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(/web/content/126415/25d341d5876d8ede-s.2wu4yy186g04j.woff2?unique=07e8d3249b)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Be Vietnam Pro Fallback;src:local(Arial);ascent-override:90.61%;descent-override:24.01%;line-gap-override:0.0%;size-adjust:110.36%}
@font-face{font-family:Fraunces;font-style:italic;font-weight:100 900;font-display:swap;src:url(/web/content/126416/477d3623a11ff399-s.2xm1k7t3a0pcd.woff2?unique=a608dda842)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Fraunces;font-style:italic;font-weight:100 900;font-display:swap;src:url(/web/content/126417/bc6263328530fcfc-s.330vchwb4izzb.woff2?unique=d1f4926652)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Fraunces;font-style:italic;font-weight:100 900;font-display:swap;src:url(/web/content/126418/ddb686d70dc9968d-s.p.16u3vygyjnhr0.woff2?unique=df3be9445a)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces Fallback;src:local(Times New Roman);ascent-override:84.71%;descent-override:22.09%;line-gap-override:0.0%;size-adjust:115.45%}
:root{--phong-alumni:"Alumni Sans","Alumni Sans Fallback";--phong-anybody:"Anybody","Anybody Fallback";--phong-be-vietnam:"Be Vietnam Pro","Be Vietnam Pro Fallback";--phong-fraunces:"Fraunces","Fraunces Fallback"}
/* ==========================================================================
   TOKEN.css — biến màu, chữ, khoảng cách của NOTE - The Scent Lab cho WEB
   Làn L13 · bản 1 · 12/11/2026 · CHỜ CEO DUYỆT (qua Điều phối)

   Tệp này là NGUỒN SỐ cho bản Pixfort. Luật dùng số nằm ở GUIDELINE_WEB.md.
   Cách đưa vào Pixfort / Elementor: bảng «Biến → ô cài đặt» ở cuối tệp.
   Tính lại tương phản sau khi đổi mã màu:  python3 cong/tuong_phan.py --kiem
   Bản Next.js đọc mau/tokens.json (cùng số, thêm thang bóng và mốc màn hình) → mau/tokens.css.
   Đổi một số ở ĐÂY thì đổi cả ở tokens.json; python3 cong/sinh_tokens.py --kiem báo lệch nếu quên (13/11/2026).
   ========================================================================== */

:root {
  /* ---- 1. TÁM MÀU THƯƠNG HIỆU ------------------------------------------
     Nguồn: trang 02 bản nháp «BRAND GUIDELINE 2026» (Lộc gửi CEO qua Chat
     17:21 12/11/2026, bản anh Hiếu đang làm). Mỗi mã đã kiểm hai cách:
     chữ in trong ảnh + đo điểm ảnh ô màu. Bản guideline chưa chốt ⇒ mã có
     thể đổi; đổi ở đây, chạy lại cong/tuong_phan.py. */
  --note-duong: #0031FC;   /* Electric Blue      */
  --note-hong:  #F80289;   /* Neon Pink          */
  --note-cam:   #FC8002;   /* Sunset Orange      */
  --note-chanh: #B0EB03;   /* Lime Green (trùng màu đo trên túi giấy) */
  --note-tim:   #CCCCFF;   /* Periwinkle Violet  */
  --note-den:   #111111;   /* Primary Black      */
  --note-kem:   #F9F4EF;   /* Cream White        */
  --note-xam:   #E1DFDF;   /* Concrete Grey      */

  /* Hai màu tiện ích, KHÔNG thuộc bảng màu, chỉ để chữ đọc được */
  --note-trang:   #FFFFFF; /* chữ trên nền đen / xanh dương; nền ô nhập liệu */
  --note-chu-phu: #5C5955; /* chữ phụ, chú thích trên nền kem / xám (đen pha kem) */

  /* ---- 2. CHÍN MÀU MÙI ---------------------------------------------------
     Nguồn: L0 đo trên dải đầu 9 tờ nhãn dán (00_NHAN_DIEN_MOI.md).
     Chỉ dùng trong ngữ cảnh của đúng mùi đó. */
  --note-mui-nar:  #BA9FC7; /* Not A Rose            */
  --note-mui-lmml: #F0B46D; /* Lemonmelon            */
  --note-mui-toh:  #B2D288; /* Tale Of Hinoki        */
  --note-mui-ht:   #7F2018; /* Her Talisman          — chữ kem/trắng */
  --note-mui-ditw: #A1D6F0; /* Dance In The Wind     */
  --note-mui-rms:  #E18DB4; /* Rose Mint Sarci       */
  --note-mui-egl:  #66381C; /* Earl Grey Latte       — chữ kem/trắng */
  --note-mui-jot:  #E4D89C; /* Jasmine Osmanthus Tea */
  --note-mui-ats:  #B18D62; /* At The Sawmill        */

  /* ---- 2b. MÀU VỆT SƠN SAU CHAI ở màn đầu trang mùi (L13 chọn 12/11/2026 trên ảnh thử
     mau/thu_vet_son_chin_mui__chot.png; L7 chưa soi, CEO chưa duyệt).
     Luật: chỉ lấy màu thương hiệu · KHÔNG kem, trắng, xám (chai trắng chìm vào vệt: tỉ lệ 1,09 · 1,00 · 1,33)
     · KHÔNG xanh chanh (để nút chính giữ một mình màu đó). */
  --note-vet-nar:  var(--note-tim);    /* tím nhạt   — bóng hologram tím của tờ nhãn      */
  --note-vet-lmml: var(--note-hong);   /* hồng       — chữ tên «bong bóng hồng vàng»      */
  --note-vet-toh:  var(--note-den);    /* đen        — nét mực sẫm của tờ nhãn            */
  --note-vet-ht:   var(--note-den);    /* đen        — chữ tên gô-tích đỏ đen             */
  --note-vet-ditw: var(--note-duong);  /* xanh dương — nắp xanh dương, nét chì xanh       */
  --note-vet-rms:  var(--note-den);    /* đen        — mực đen kiểu graffiti              */
  --note-vet-egl:  var(--note-cam);    /* cam        — tông nâu ấm                        */
  --note-vet-jot:  var(--note-tim);    /* tím nhạt   — mùi nhẹ và trong                   */
  --note-vet-ats:  var(--note-cam);    /* cam        — tông gỗ vàng và nâu                */

  /* ---- 3. VAI MÀU --------------------------------------------------------- */
  --note-nen:            var(--note-kem);    /* nền trang                         */
  --note-nen-phu:        var(--note-xam);    /* thẻ, ô phụ, đường kẻ dày          */
  --note-nen-tuyen-bo:   var(--note-den);    /* dải tuyên bố, chân trang          */
  --note-chu:            var(--note-den);    /* chữ chính                         */
  --note-chu-tren-den:   var(--note-kem);
  --note-lien-ket:       var(--note-duong);  /* liên kết trong đoạn văn           */
  --note-hanh-dong:      var(--note-chanh);  /* nền nút chính                     */
  --note-hanh-dong-chu:  var(--note-den);
  --note-vien:           var(--note-den);    /* viền nút, viền ô nhập             */
  --note-tieu-diem:      var(--note-duong);  /* vòng tiêu điểm bàn phím           */

  /* Nghĩa của năm ngôi sao → màu nhấn theo chủ đề (trang 03 guideline) */
  --note-nhan-con-nguoi: var(--note-hong);   /* con người, câu chuyện             */
  --note-nhan-mui-huong: var(--note-tim);    /* mùi hương, tầng hương             */
  --note-nhan-ghi-chu:   var(--note-duong);  /* ghi chú, thông tin, «còn nữa»     */
  --note-nhan-duong-pho: var(--note-chanh);  /* đường phố, tự thể hiện, hành động */
  --note-nhan-chi-duong: var(--note-cam);    /* cửa hàng, chỉ đường, hành trình   */

  /* ---- 4. CHỮ --------------------------------------------------------------
     Ba vai, ba họ, đều có đủ dấu tiếng Việt (đếm 178/178 chữ trên tệp thật).
     Druk Wide Bold và Bebas Neue Pro KHÔNG có tiếng Việt theo trang hãng
     (GUIDELINE_WEB.md mục B) ⇒ web dùng phông thay cùng dáng. */
  --note-phong-tuyen-bo: "Anybody", "Arial Black", "Helvetica Neue", Arial, sans-serif;      /* thay Druk Wide Bold  */
  --note-phong-de-muc:   "Alumni Sans", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; /* thay Bebas Neue Pro  */
  --note-phong-than:     "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;              /* chữ thân bài         */

  --note-tb-dam: 900;            /* tuyên bố: một độ đậm duy nhất            */
  --note-tb-rong: 150%;          /* bề rộng chữ tuyên bố trên máy tính        */
  --note-tb-rong-dt: 112%;       /* trên điện thoại thu hẹp để vừa 2 dòng     */
  --note-dm-dam: 700;            /* đề mục, nhãn, nút, điều hướng (CHỮ HOA)   */
  --note-dm-dam-thuong: 600;     /* đề mục viết thường (tiêu đề bài blog dài) */
  --note-than-dam: 400;
  --note-than-dam-manh: 600;

  /* Thang cỡ — máy tính (≥ 1024 px) */
  --note-co-tuyen-bo: 44px;      /* H2 khối trên trang đã thiết kế, IN HOA    */
  --note-co-h1: 64px;            /* H1 trang thường (chữ hẹp cao)             */
  --note-co-h2: 48px;
  --note-co-h3: 30px;
  --note-co-h4: 24px;
  --note-co-h5: 20px;
  --note-co-h6: 18px;
  --note-co-nhan: 18px;          /* nhãn, điều hướng, nút (chữ hẹp cao IN HOA) */
  --note-co-dan: 20px;           /* đoạn dẫn                                   */
  --note-co-than: 17px;
  --note-co-chu-thich: 14px;

  --note-dong-tuyen-bo: 1.15;    /* ≥ 1,15 vì chữ hoa tiếng Việt chồng hai dấu (Ấ, Ễ, Ộ) */
  --note-dong-de-muc: 1.1;
  --note-dong-than: 1.6;
  --note-gian-nhan: 0.04em;      /* giãn chữ cho nhãn IN HOA cỡ nhỏ */
  --note-do-dai-dong: 34em;      /* bề rộng tối đa của đoạn văn ≈ 68 ký tự (bản 1 ghi 62ch, đo thật ra 82 ký tự vì «0» rộng hơn chữ thường) */

  /* ---- 5. KHOẢNG CÁCH — chỉ lấy bậc đã có trong thang .pix-mb-N của Pixfort */
  --note-kc-1: 5px;   --note-kc-2: 10px;  --note-kc-3: 15px;  --note-kc-4: 20px;
  --note-kc-5: 30px;  --note-kc-6: 40px;  --note-kc-7: 60px;  --note-kc-8: 80px;
  --note-kc-9: 100px; --note-kc-10: 120px;
  --note-kc-khoi: var(--note-kc-10);       /* giữa hai khối, máy tính   */
  --note-le-trang: 40px;                   /* lề hai bên, máy tính      */
  --note-rong-trang: 1300px;               /* bề rộng khung nội dung    */

  /* ---- 6. HÌNH DẠNG -------------------------------------------------------- */
  --note-bo-nut: 999px;          /* nút dạng viên thuốc                         */
  --note-bo-the: 6px;            /* thẻ, khung ảnh                              */
  --note-bo-nhan: 2px;           /* nhãn chữ nhỏ (gần như vuông, như tem in)    */
  --note-vien-day: 2px;
  --note-nut-cao: 48px;          /* ô bấm ≥ 44 px                               */
}

/* Thang cỡ — điện thoại (mốc 670 px của Kit 1246 trên thescentnote.com) */
@media (max-width: 670px) {
  :root {
    --note-co-tuyen-bo: 24px;
    --note-co-h1: 40px;          /* chữ to nhất ở 390 px không quá 40 px (TIEU_CHUAN D5) */
    --note-co-h2: 32px;
    --note-co-h3: 24px;
    --note-co-h4: 20px;
    --note-co-h5: 18px;
    --note-co-h6: 16px;
    --note-co-nhan: 16px;
    --note-co-dan: 18px;
    --note-co-than: 16px;
    --note-co-chu-thich: 13px;
    --note-tb-rong: var(--note-tb-rong-dt);
    --note-kc-khoi: var(--note-kc-7);
    --note-le-trang: 20px;
  }
}

/* ==========================================================================
   BIẾN → Ô CÀI ĐẶT — bản 2, 23:01 12/11/2026 (giờ VN, lệnh date)
   Viết lại theo những gì L8 (làn dựng trang bằng Pixfort) đã ĐO và đã ghi lên bản thử
   dev.thescentnote.com (tin L8 20:43, 21:35, 22:28 12/11). Bản 1 còn trong git ở d87b1baf.
   Chỗ nào bản 1 ghi khác thì bản này thắng.

   MÀU — Theme Options của Pixfort
     opt-primary-color (màu chính)   = --note-den  #111111.  KHÔNG đặt xanh chanh: màu chính của theme còn tô CHỮ
                                       ở trang cũ, mà chanh trên kem chỉ đạt 1,30.
     opt-secondary-color (màu phụ)   = --note-duong #0031FC (trên kem 6,75 · chữ trắng trên nó 7,38).
     dải chuyển màu của theme        = hai đầu cùng --note-duong. Bộ nhận diện in màu phẳng; trang dựng lại không dùng nền dải.
     opt-link-color                  = --note-duong (nền sáng) · trắng (nền tối).
     nền động (pix-body-bg-color)    = --note-kem.   tiêu đề động (opt-heading-color) = --note-den.
     năm token màu sẵn của theme (blue, green, purple, orange, red): GIỮ NGUYÊN. Đổi là trang cũ đổi nghĩa («red» báo lỗi thành hồng).
     16 «màu tự thêm» (pix-custom-colors-items, sinh lớp c-<mã>): dương, hồng, cam, chanh, tím, xám, chữ phụ + 9 màu mùi.
                                       Danh sách: hằng MAU_TU_THEM trong L8_dung_trang/da_chung.py (L13 đã so 23:01 12/11: đủ).
     nút chính nền xanh chanh        = gọi bằng màu tự thêm «chanh», chữ đen khai ở từng nút (Pixfort tự chọn chữ sáng).

   CHỮ — Theme Options của Pixfort
     --note-phong-than    → opt-primary-font     (chữ thân; Pixfort áp !important)
     --note-phong-de-muc  → opt-secondary-font   (h1–h6 toàn site, gồm tiêu đề bài blog)
     tệp phông tự lưu     → opt-external-font-1-url = MỘT tệp CSS khai cả ba họ (mẫu: mau/phong/phong.css) — L8 đã thử, được.
     chữ thân TOÀN SITE, kể cả bài blog và trang chính sách: 17 px · khoảng dòng 1,6 (điện thoại 16 px · 1,6).
                            Theme đang 16 px · 1,8. Đổi ở ô chữ thân của theme (một chỗ); ô không có mốc điện thoại
                            thì thêm một dòng CSS trong tệp da chung. Trang mẫu bài Journal đã dựng đúng cỡ này.
     cỡ h1–h6             → ô opt-font-size-h* của Theme Options (có mốc điện thoại riêng), và GỠ khỏi bộ cài đặt chung
                            của Elementor (Kit 1246): luật của Elementor mạnh hơn lớp cỡ của Pixfort, để hai nơi thì
                            ô cỡ của widget tiêu đề vô hiệu. Số đích: mục 4 của tệp này (64·48·30·24·20·18, điện thoại 40·32·24·20·18·16).
     opt-secondary-font-spacing: -0.03em → 0     (chữ hẹp cao không ép sát thêm)
     độ đậm tiêu đề       → thẻ tiêu đề trần của Pixfort đậm 500 và không có ô đổi. Trang thiết kế: bật ô đậm (700).
                            Bài blog và trang chính sách (tiêu đề viết thường): tiêu đề bài 600, H2 và H3 trong thân bài 700,
                            đặt bằng CSS trong tệp da chung (bộ chọn do L8 đo trên khuôn bài của theme).

   LỚP TRONG TỆP DA CHUNG (tệp CSS do L8 giữ trên bản thử; bản mẫu của L13: mau/phong/phong.css, mau/mep_xe.css)
     .note-tuyen-bo   chữ tuyên bố (Anybody 900) cho một tiêu đề; luật nhắm vào .heading-text bên trong widget.
     .note-de-muc     đề mục IN HOA đậm 700.
     .note-nen-den    khối nền đen (chân trang): chữ kem, nút viền sáng, rê chuột lên liên kết đổi xanh chanh;
                      vòng tiêu điểm bàn phím phải là xanh chanh (xanh dương trên đen chỉ 2,56).
     .note-mep-xe     mép giấy xé ở cạnh trên của khối (mau/mep_xe.css). Thay kiểu mép lượn sóng có sẵn của Elementor.
     vệt sơn          hình CSS, không có tệp ảnh: border-radius 58% 42% 55% 45% / 48% 60% 40% 52%;
                      ở màn đầu trang mùi: rộng 84 %, cao 74 % ô chai, xoay −8°; màu theo --note-vet-<mã mùi>.

   HÌNH DẠNG VÀ CHUYỂN ĐỘNG
     --note-bo-nut → btn-*-border-radius (hiện 10) → 999
     --note-rong-trang → pix-custom-container-width (hiện 1400px) → 1300px  ⚠ đổi cả site: L8 đo lại trang cũ
     khoảng cách → lớp .pix-mb-N có sẵn (5 10 15 20 30 40 60 80 100 120), không khai px tay
     màn chuyển trang của Pixfort: TẮT. Chuyển động giữa các trang, nếu có, do L14 (làn chuyển động) làm bằng cách riêng.

   CHƯA CÓ: tệp vector của năm ngôi sao. Trang trên Pixfort chưa dựng ngôi sao cho tới khi nhóm thiết kế đưa tệp gốc.
   ========================================================================== */

/* Nối phông tự chứa (src/fonts/phong.ts) vào biến của L13 TOKEN.css. Tên họ chữ dự phòng giữ nguyên thứ tự của TOKEN.css. */
:root {
  --note-phong-tuyen-bo: var(--phong-anybody), "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --note-phong-de-muc: var(--phong-alumni), "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --note-phong-than: var(--phong-be-vietnam), "Helvetica Neue", Arial, sans-serif;
  /* Fraunces nghiêng — chữ «người lớn» đi cạnh Anybody (Bản 1). Vai cụ thể chờ bản vẽ vòng 3. */
  --note-phong-nghieng: var(--phong-fraunces), Georgia, "Times New Roman", serif;
}

:root {
  --note-bo-nut: 6px;
}
:root {
  --note-bong-1: 3px 3px 0 var(--note-den);
}
@media (max-width: 670px) {
  :root {
    --note-bong-1: 2px 2px 0 var(--note-den);
  }
}
/* ==========================================================================
   khung.css — HỢP ĐỒNG KIỂU của đầu trang + chân trang thescentnote.com (đi cùng dau-trang.html, chan-trang.html).
   CSS thuần, chỉ dùng biến --note-* của L13 TOKEN.css (content/nhan-dien/TOKEN.css) ⇒ làn Odoo nạp TOKEN.css + tệp này là dựng
   lại được trên trang bán hàng Odoo. Không phụ thuộc React, không phụ thuộc thứ tự nạp CSS của Next (mọi luật nằm dưới .note-dau /
   .note-chan / .note-nut / .note-mega), không gọi phông ngoài, không chữ trong ảnh.
   Không cần JavaScript: bảng thả = <details name="note-mega"> (mở một cái thì cái khác đóng); menu điện thoại = popover.
   Megamenu bảy mục theo bản vẽ vòng 5 của Bản 1 (14/11/2026).
   ========================================================================== */

/* ---- Nút dùng chung ----------------------------------------------------- */
.note-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--note-nut-cao);
  padding: 0 var(--note-kc-5);
  border: var(--note-vien-day) solid var(--note-vien);
  border-radius: var(--note-bo-nut);
  font-family: var(--note-phong-de-muc);
  font-weight: var(--note-dm-dam);
  font-size: var(--note-co-nhan);
  letter-spacing: var(--note-gian-nhan);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.note-nut--chinh {
  background: var(--note-hanh-dong);
  color: var(--note-hanh-dong-chu);
}
.note-nut--vien-sang {
  border-color: var(--note-chu-tren-den);
  color: var(--note-chu-tren-den);
  background: transparent;
}

.note-nut--vien {
  gap: var(--note-kc-2);
  background: transparent;
  color: var(--note-chu);
}
.note-mui-ten {
  flex: none;
}

/* ---- ĐẦU TRANG (bản vẽ vòng 5, 14/11/2026) ------------------------------- */
.note-dau {
  /* chiều cao thanh đầu trang — bảng thả cao tối đa phần còn lại của khung nhìn */
  --note-dau-cao: 76px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--note-nen);
  /* bản vẽ Main + Ban1-Shiage: không vạch dưới đầu trang ở đỉnh trang (sổ lỗi Làn 10 L10-05). Trình duyệt có hoạt ảnh theo cuộn ⇒
     vạch hiện dần trong 24 px cuộn đầu (thanh dính đè lên nội dung cần đường ngăn); không có ⇒ không vạch. Giữ độ dày để không xô. */
  border-bottom: var(--note-vien-day) solid transparent;
  font-family: var(--note-phong-de-muc);
}
@supports (animation-timeline: scroll()) {
  .note-dau {
    animation: note-dau-vien linear both;
    animation-timeline: scroll(root);
    animation-range: 0 24px;
  }
  @keyframes note-dau-vien {
    to {
      border-bottom-color: var(--note-vien);
    }
  }
}
/* nút Shop: bản vẽ Main + Ban1-Shiage là nút MỰC (nền đen, chữ kem), không phải nút chanh (L10-05) */
.note-nut.note-dau__shop {
  background: var(--note-chu);
  border-color: var(--note-chu);
  color: var(--note-nen);
  transition: background-color 0.25s ease, color 0.25s ease;
}
/* rê chuột: nền chanh, chữ mực — hệ nét `.sg-nut-muc:hover`, bản vẽ Main `.nutden:hover` (#B0EB03 / #111). Trước là xám #2a2a2a, gần như
   không thấy đổi (L20 đối chiếu hệ nét 15/11 dòng 3). Viền giữ màu mực. Áp cho «Shop» và «Get a quote». */
.note-nut.note-dau__shop:hover {
  background: var(--note-chanh);
  color: var(--note-chu);
}
/* Khu doanh nghiệp: nút «Get a quote» thay «Shop» (bản vẽ ForBusiness · BaoGia · B2BDichVu · NhaPhanPhoi). Hai nút in sẵn; `<html
   data-nut-dau="bao-gia">` do script đầu <body> gắn theo đường dẫn (src/components/khung/nutDau.tsx). Mặc định, không JS, trang bán hàng
   Odoo ⇒ «Shop». Nút đang ẩn là `display: none` ⇒ không vào thứ tự Tab, máy đọc màn hình bỏ qua. */
.note-nut.note-dau__bao-gia,
html[data-nut-dau='bao-gia'] .note-nut.note-dau__shop:not(.note-dau__bao-gia) {
  display: none;
}
html[data-nut-dau='bao-gia'] .note-nut.note-dau__bao-gia {
  display: inline-flex;
}
.note-dau__trong {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--note-kc-4);
  min-height: var(--note-dau-cao);
  max-width: var(--note-rong-trang);
  margin-inline: auto;
  /* KHÔNG đệm dọc: mục menu cao hết thanh ⇒ đáy mục = đỉnh bảng thả, không khe để chuột rơi vào (soi PR #3, CHẶN 1) */
  padding: 0 var(--note-le-trang);
}
/* Lề đầu trang ở MÁY BÀN = lề khu thân trang của hệ nét Shiage (khung 1376 px, lề 56 px) ⇒ ở 1440 logo đứng x = 88, thẳng cột với H1
   và chữ thân như bản vẽ Main. Trước đó khung 1300 + lề 40 ⇒ logo x = 110 trong khi H1 x = 88 (M1 đo 15/11, 10/10 trang). Cùng hai số
   với .note-dau2__trong (thanh sản phẩm). Điện thoại / máy tính bảng (≤ 1023 px) GIỮ lề cũ: ở 390 logo và H1 đã cùng x = 20. */
@media (min-width: 1024px) {
  .note-dau__trong {
    max-width: 1376px;
    padding-inline: 56px;
  }
}
.note-dau__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 48px;
}
.note-dau__logo img {
  display: block;
  width: 92px;
  height: auto;
}
.note-dau__ds {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.9vw, 28px);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.note-dau__muc {
  display: flex;
  align-items: stretch;
}
.note-dau__muc > .note-mega {
  display: flex;
}
.note-dau__nhan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: var(--note-dm-dam);
  font-size: var(--note-co-nhan);
  letter-spacing: var(--note-gian-nhan);
  text-transform: uppercase;
  color: var(--note-chu);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  border-bottom: 2px solid transparent;
}
.note-dau__nhan::-webkit-details-marker {
  display: none;
}
.note-mega[open] > .note-dau__nhan {
  border-bottom-color: var(--note-chu);
}
.note-mega[open] > .note-dau__nhan .note-dau__mui {
  transform: rotate(180deg);
}
.note-dau__phai {
  display: flex;
  align-items: center;
  gap: var(--note-kc-4);
  margin-left: auto;
  flex: none;
}
.note-dau__tieng {
  font-size: var(--note-co-nhan);
  font-weight: var(--note-dm-dam);
  letter-spacing: var(--note-gian-nhan);
}
.note-dau__tieng-dt {
  display: none;
}
.note-dau__mo,
.note-dau__dong {
  display: none;
  align-items: center;
  gap: var(--note-kc-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--note-kc-3);
  border: var(--note-vien-day) solid var(--note-vien);
  border-radius: var(--note-bo-nut);
  background: transparent;
  color: var(--note-chu);
  font: inherit;
  font-weight: var(--note-dm-dam);
  font-size: var(--note-co-nhan);
  letter-spacing: var(--note-gian-nhan);
  text-transform: uppercase;
  cursor: pointer;
}
.note-dau__ba-gach,
.note-dau__ba-gach::before,
.note-dau__ba-gach::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.note-dau__ba-gach {
  position: relative;
}
.note-dau__ba-gach::before,
.note-dau__ba-gach::after {
  content: "";
  position: absolute;
  left: 0;
}
.note-dau__ba-gach::before {
  top: -6px;
}
.note-dau__ba-gach::after {
  top: 6px;
}

/* Máy tính: popover luôn hiện như thanh ngang (ghi đè kiểu ẩn mặc định của trình duyệt). */
@media (min-width: 1024px) {
  .note-dau__nav[popover] {
    display: flex;
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    color: inherit;
  }
}

/* Điện thoại + máy tính bảng (bản vẽ Main__390__menu-*): logo · Shop · Menu; ngăn kéo = thẻ thả dưới đầu trang, mỗi mục một nhóm
   gập mở. Không mục nào được đẩy bề ngang quá khung nhìn (soi PR #3 NÊN 3: 432 px ở 390 px). */
@media (max-width: 1023px) {
  .note-dau {
    --note-dau-cao: 68px;
  }
  .note-dau__trong {
    align-items: center;
    gap: var(--note-kc-2);
  }
  .note-dau__logo {
    min-width: 0;
  }
  .note-dau__logo img {
    width: clamp(76px, calc(100vw - 290px), 98px);
  }
  .note-dau__phai {
    gap: var(--note-kc-2);
  }
  .note-dau__tieng {
    display: none;
  }
  .note-dau__shop {
    padding: 0 18px;
    min-height: 46px;
  }
  .note-dau__mo {
    display: inline-flex;
    min-height: 46px;
  }
  .note-dau__nav[popover] {
    inset: calc(var(--note-dau-cao) + 8px) var(--note-kc-3) auto var(--note-kc-3);
    width: auto;
    max-height: calc(100dvh - var(--note-dau-cao) - 24px);
    margin: 0;
    padding: var(--note-kc-2) var(--note-kc-4) var(--note-kc-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1.5px solid var(--note-vien);
    border-radius: 4px 4px 18px 18px;
    background: var(--note-trang);
    box-shadow: 0 30px 50px -30px rgba(17, 17, 17, 0.5);
    color: var(--note-chu);
  }
  .note-dau__dong {
    display: inline-flex;
    margin: 0 0 var(--note-kc-2) auto;
    min-height: 36px;
    font-size: var(--note-co-chu-thich);
  }
  .note-dau__nav[popover] > .note-dau__dong {
    display: flex;
  }
  .note-dau__ds {
    flex-direction: column;
    gap: 0;
    height: auto;
  }
  .note-dau__muc,
  .note-dau__muc > .note-mega {
    display: block;
  }
  .note-dau__muc + .note-dau__muc {
    border-top: 1px solid var(--note-xam);
  }
  .note-dau__nhan {
    display: flex;
    justify-content: space-between;
    min-height: 56px;
    font-size: var(--note-co-h5);
    border-bottom: 0;
  }
  .note-dau__tieng-dt {
    display: block;
    margin: var(--note-kc-3) 0 0;
    padding-top: var(--note-kc-3);
    border-top: 1px solid var(--note-xam);
    font-weight: var(--note-dm-dam);
    letter-spacing: var(--note-gian-nhan);
    text-transform: uppercase;
    color: var(--note-chu-phu);
  }
}
@media (max-width: 380px) {
  .note-dau__mo > span[aria-hidden="true"]:last-child {
    display: none;
  }
}
/* Khu doanh nghiệp ở điện thoại 381–430 px: «Get a quote» dài hơn «Shop» 37 px ⇒ cụm phải (kính lúp · nút · Menu) tràn 3 px ở 390.
   Khít lại: đệm nút 12 px, khe 6 px, đệm nút Menu 12 px ⇒ cụm phải dừng trong lề trang. ≤ 380 px đã ẩn chữ «Menu» nên không cần. */
@media (min-width: 381px) and (max-width: 430px) {
  html[data-nut-dau='bao-gia'] .note-nut.note-dau__bao-gia {
    padding: 0 12px;
  }
  html[data-nut-dau='bao-gia'] .note-dau__phai {
    gap: 6px;
  }
  html[data-nut-dau='bao-gia'] .note-dau__mo {
    padding-inline: 12px;
  }
}

/* ---- CHÂN TRANG --------------------------------------------------------- */
/* Bản vẽ trang chủ Ban1-Shiage khu 8 (phiếu L20 mốc 14 ý 2): dải tranh 44 px trên mép, logo ảnh 132 px, câu Fraunces nghiêng 18 px,
   bốn cột 1.2fr + 3 × 1fr, tiêu đề cột xanh chanh 20 px, liên kết 16 px ô bấm 44 px gạch chân chỉ khi rê, hàng pháp lý 14 px #BDB7B0.
   Cỡ chữ chân trang giữ 14 · 16 · 18 · 20 (đặc tả Shiage: dùng chung với web bán hàng). */
.note-chan {
  background: var(--note-nen-tuyen-bo);
  color: var(--note-chu-tren-den);
  padding: 0 var(--note-le-trang) 28px;
}
/* dải tranh: ảnh cắt sẵn đúng băng bản vẽ thấy (tui_giay_lon_dai 1600×488, nền 900 px vị trí dọc 42 % ⇒ hàng y 172–250 = 1600×78) */
.note-chan > .note-chan__dai {
  max-width: none;
  height: 44px;
  margin: 0 calc(-1 * var(--note-le-trang)) clamp(40px, 5vw, 64px);
  background: url('/web/content/126419/dai-tranh-chan.webp?unique=41b6074610') 0 0 / 900px 44px repeat-x;
}
.note-chan > * {
  max-width: var(--note-rong-trang);
  margin-inline: auto;
}
.note-chan a {
  color: var(--note-chu-tren-den);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}
.note-chan a:hover {
  color: var(--note-chanh);
  text-decoration-color: var(--note-chanh);
}
/* xanh dương trên đen chỉ đạt 2,56 ⇒ vòng tiêu điểm xanh chanh (TOKEN.css § .note-nen-den) */
.note-chan :focus-visible {
  outline-color: var(--note-chanh);
}
/* Dải «Three stores in Saigon» (tiêu đề + nút + ba thẻ cửa hàng + dòng workshop) ĐÃ BỎ khỏi chân trang ở mọi trang: bản vẽ không có
   khối này (CEO chốt qua popup ở ĐP DEV 15/11 «Bỏ, theo bản vẽ»). Thuộc tính `data-an-dai-cua-hang` trên trang các làn không còn tác dụng. */
.note-chan__nhom-tieu-de {
  font-family: var(--note-phong-de-muc);
  text-transform: uppercase;
  margin: 0 0 var(--note-kc-2);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--note-chanh);
  margin-bottom: 8px;
}
/* < 360 px (máy 320 px — số «375» của Làn 5 là khung 320): hai cột co theo chữ cần ~317 px > 280 ⇒ cả 52 trang tràn ngang 18 px
   (đo mốc 21), thanh menu 2 tràn theo vì khung nhìn điện thoại nở ra bằng trang. Hai cột chia đều, chữ liên kết được xuống dòng. */
@media (max-width: 359px) {
  .note-chan__cot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .note-chan__nhom a {
    white-space: normal;
  }
}
.note-chan__cot {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 28px 32px;
}
.note-chan__logo {
  display: block;
  width: 132px;
  margin: 0 0 14px -4px;
}
.note-chan__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.note-chan__cau {
  max-width: 280px;
  margin: 0;
  font-family: var(--note-phong-nghieng);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: #e9e3dc;
}
/* bốn nút mạng xã hội (chan-trang__en bản 24) — nút tròn 44 px viền sáng của bản vẽ Ban1-Shiage `.xh`; rê chuột: nền xanh chanh */
.note-chan__mxh {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.note-chan__xh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(249, 244, 239, 0.5);
  color: inherit;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.note-chan__xh:hover,
.note-chan__xh:focus-visible {
  background-color: #b0eb03;
  border-color: #b0eb03;
  color: #111111;
}
@media (prefers-reduced-motion: reduce) {
  .note-chan__xh {
    transition: none;
  }
}
.note-chan__nhom ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}
.note-chan__nhom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 48px; /* «Gifts» 38 px ⇒ ô bấm ≥ 44 (bản vẽ: min-width 48 riêng mục này) */
  text-decoration-color: transparent;
}
.note-chan__nhom a:hover {
  text-decoration-color: var(--note-chanh);
}
.note-chan__cuoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 28px;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid rgb(249 244 239 / 0.22);
  font-size: 14px;
  line-height: 1.5;
  color: #bdb7b0;
}
.note-chan__cuoi a {
  color: inherit;
}
.note-chan__cuoi p {
  margin: 0;
}
.note-chan__phap-nhan {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.note-chan__chi-em {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}
.note-chan__chinh-sach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.note-chan__chi-em a,
.note-chan__chinh-sach a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* nút «Cookie settings» trong hàng chính sách — trông như link chân trang. Hợp đồng data-mo-cai-dat-cookie: khung/README.md */
.note-chan__cookie {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.note-chan__cookie:hover {
  color: var(--note-chanh);
}
@media (max-width: 670px) {
  /* «About NOTE CO., LTD» không rớt dòng giữa chừng (đặc tả Shiage khu 8): hai cột co theo chữ (Fragrances | NOTE), cột Contact
     («Feedback and complaints» dài nhất) trải cả hàng ⇒ ở 360 px: ~125 + 24 + ~168 < 328, không tràn */
  .note-chan__cot {
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 24px;
  }
  .note-chan__thuong-hieu,
  .note-chan__nhom:last-child {
    grid-column: 1 / -1;
  }
  .note-chan__nhom a {
    white-space: nowrap;
  }
  /* CEO 00:19 15/11 «chân trang điện thoại gọn, chuyên nghiệp» (L20 danh sách chặn dòng 27: không dài quá một màn 390, liên kết nhỏ
     gộp hàng, có nút mạng xã hội). Chỉ CSS, HTML hợp đồng giữ nguyên. Đo bản thử 390: 1.263 ⇒ 836 px, 360–412 không tràn ngang.
     ① logo 104 px + bốn nút mạng xã hội chung một hàng, câu nghiêng một dòng dưới; ② ô bấm liên kết 36 px (≥ 24 px WCAG 2.2);
     ③ cột Contact chia hai cột thẳng hàng với Products | NOTE (subgrid; trình duyệt cũ: một cột như trước); ④ hàng pháp lý: các
     liên kết nhỏ nằm chung hàng, hết chỗ mới xuống dòng (thay mỗi liên kết một dòng 44 px). */
  .note-chan > .note-chan__dai {
    margin-bottom: 24px;
  }
  .note-chan__thuong-hieu {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 16px;
  }
  .note-chan__logo {
    width: 104px;
    margin: 0 0 0 -3px;
  }
  .note-chan__mxh {
    margin: 0;
    justify-self: end;
    gap: 8px;
  }
  .note-chan__cau {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    margin-top: 10px;
  }
  .note-chan__cot {
    row-gap: 20px;
  }
  .note-chan__nhom-tieu-de {
    font-size: 17px;
    margin-bottom: 2px;
  }
  .note-chan__nhom a {
    min-height: 36px;
  }
  .note-chan__nhom:last-child {
    display: grid;
    grid-template-columns: subgrid;
  }
  .note-chan__nhom:last-child > .note-chan__nhom-tieu-de {
    grid-column: 1 / -1;
  }
  .note-chan__nhom:last-child ul {
    display: contents;
  }
  .note-chan__nhom:last-child a {
    white-space: normal;
  }
  .note-chan__cuoi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 20px;
  }
  .note-chan__phap-nhan {
    min-height: 32px;
  }
  .note-chan__chi-em,
  .note-chan__chinh-sach {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
  }
  .note-chan__chi-em a,
  .note-chan__chinh-sach a,
  .note-chan__cookie {
    min-height: 34px;
  }
}

/* ---- MEGAMENU — bảy tấm thả theo bản vẽ vòng 5 (14/11/2026) --------------------------------------------------------------- */
.note-mega__bang {
  position: absolute;
  left: var(--note-le-trang);
  right: var(--note-le-trang);
  top: 100%;
  /* cao tối đa phần còn lại của khung nhìn, cuộn BÊN TRONG (soi PR #3, CHẶN 3: bảng Perfume cao hơn màn hình 1280×720) */
  max-height: calc(100dvh - var(--note-dau-cao) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--note-kc-5) clamp(22px, 2.8vw, 40px) var(--note-kc-4);
  background: var(--note-trang);
  border: 1.5px solid var(--note-vien);
  border-radius: 4px 4px 18px 18px;
  box-shadow: 0 44px 64px -36px rgba(17, 17, 17, 0.55);
  font-family: var(--note-phong-than);
  font-size: var(--note-co-than);
  color: var(--note-chu);
}
.note-mega__bang p,
.note-mega__bang h3,
.note-mega__bang ul,
.note-mega__bang ol,
.note-mega__bang figure {
  margin: 0;
}
.note-mega__bang ul,
.note-mega__bang ol {
  padding: 0;
  list-style: none;
}
.note-mega__bang a {
  color: inherit;
}
.note-mega__bang img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* chữ dùng chung */
.note-mega__phu-to,
.note-mega__cau,
.note-mega__phu,
.note-mega__ngay,
.note-mega__anh-the figcaption {
  font-family: var(--note-phong-nghieng);
  font-style: italic;
}
.note-mega__phu-to {
  font-size: var(--note-co-h6);
  color: var(--note-chu-phu);
}
.note-mega__tieu-de-to {
  font-family: var(--note-phong-tuyen-bo);
  font-weight: var(--note-tb-dam);
  font-size: var(--note-co-h4);
  line-height: 1.1;
  text-transform: uppercase;
}
.note-mega__tieu-de,
.note-mega__muc-ten,
.note-mega__mui,
.note-mega__lk,
.note-mega__ds-to a,
.note-the-gon__ten {
  font-family: var(--note-phong-de-muc);
  font-weight: var(--note-dm-dam);
  letter-spacing: var(--note-gian-nhan);
  text-transform: uppercase;
  text-decoration: none;
}
.note-mega__tieu-de {
  font-size: var(--note-co-h6);
}
.note-mega__tieu-de a {
  text-decoration: none;
}
.note-mega__cau {
  font-size: var(--note-co-dan);
  line-height: 1.35;
}
.note-mega__cau--dan {
  margin-bottom: var(--note-kc-4) !important;
}
.note-mega__phu {
  display: block;
  font-size: 15px;
  color: var(--note-chu-phu);
}
.note-mega__gach {
  font-weight: var(--note-than-dam-manh);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.note-mega__tem {
  display: inline-block;
  margin: var(--note-kc-2) 0 !important;
  padding: 2px 10px;
  border: 1.5px solid var(--note-vien);
  border-radius: var(--note-bo-nut);
  font-family: var(--note-phong-de-muc);
  font-weight: var(--note-dm-dam);
  font-size: var(--note-co-chu-thich);
  letter-spacing: var(--note-gian-nhan);
  text-transform: uppercase;
}
.note-mega__chan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--note-kc-3) var(--note-kc-5);
  margin-top: var(--note-kc-4);
  padding-top: var(--note-kc-3);
  border-top: 1px dashed var(--note-chu-phu);
}
.note-mega__chan > :first-child {
  margin-right: auto;
}
.note-mega__chan--phai {
  justify-content: flex-end;
}
.note-mega__khung-anh,
.note-mega__anh-the {
  display: block;
  padding: 6px;
  background: var(--note-trang);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08), 0 18px 26px -18px rgba(17, 17, 17, 0.5);
}

/* Phần NHÌN của từng tấm thả: khung/khung-tam.css (nạp ngay sau tệp này). */

/* ==========================================================================
   MENU 2 — thanh trang sản phẩm (src/components/khung/ThanhSanPham.tsx; hành vi khung/khung.js). Phủ ĐÚNG chỗ menu chính
   (cố định đỉnh màn hình, cùng chiều cao, cùng viền) ⇒ đổi thanh không xô bố cục; menu chính vẫn `sticky` bên dưới.
   Chỉ hiện khi JS đặt `html[data-thanh="2"]`; không JS ⇒ không bao giờ hiện. Số chép từ bản chuẩn canvas-moi/project/TrangMon.dc.html
   (khối «MENU 2» + «MENU 2 · chỉnh riêng»; năm luật: mockup-trang-chu/GHI_CHU_MENU_2_VA_DIP_DUNG.md): mờ + trượt 10 px trong 180 ms ·
   câu mời co 20 → 15 px từ 1440 xuống 1100, ẩn từ 1099 · ≤ 720: logo 64, nhãn loại xuống dòng nhỏ trên tên món, nút cao 46.
   ========================================================================== */
.note-dau2 {
  --note-dau-cao: 76px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  background: var(--note-nen);
  border-bottom: var(--note-vien-day) solid var(--note-vien);
  font-family: var(--note-phong-de-muc);
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
}
html[data-thanh='2'] .note-dau2 {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s;
}
.note-dau2__trong {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--note-dau-cao);
  max-width: 1376px;
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.note-dau2__logo img {
  width: 92px;
}
.note-dau2__ten {
  flex: none;
  min-width: 0;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(17, 17, 17, 0.14);
  overflow: hidden;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-dau2__dong {
  font-size: 18px;
  color: var(--note-chu-phu);
}
.note-dau2__mon {
  font-size: 24px;
  letter-spacing: 0.06em;
}
/* câu mời ≤ 60 ký tự luôn vừa MỘT dòng từ 1440 xuống 1100 (bản chuẩn đo với tên dài nhất «Sparkling Jasmine») */
.note-dau2__cau {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  font-family: var(--note-phong-nghieng);
  font-style: italic;
  font-size: clamp(15px, calc(1.47vw - 1.2px), 20px);
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-dau2__shop {
  flex: none;
  margin-left: auto;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  font-size: 22px;
}
/* món tạm hết mọi cỡ: nhãn đứng ở chỗ nút mua (khung nét đứt, không phải nút — cùng kiểu nhãn thay nút của trang mùi); câu của làn
   chữ thay câu mời, được xuống hai dòng */
.note-dau2__het {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  margin: 0 0 0 auto;
  padding: 0 22px;
  border: 2px dashed rgba(17, 17, 17, 0.45);
  border-radius: var(--note-bo-nut);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}
.note-dau2__cau--het {
  font-size: clamp(15px, calc(1.2vw - 1px), 17px);
  line-height: 1.25;
  text-wrap: balance;
  white-space: normal;
}
@media (max-width: 1280px) {
  .note-dau2__het {
    padding: 0 16px;
    font-size: 18px;
  }
  .note-dau2__trong {
    gap: 16px;
  }
  .note-dau2__ten {
    padding-left: 16px;
  }
  .note-dau2__dong {
    font-size: 15px;
  }
  .note-dau2__mon {
    font-size: 20px;
  }
  .note-dau2__shop {
    padding: 0 22px;
  }
}
@media (max-width: 1099px) {
  .note-dau2__cau {
    display: none;
  }
}
@media (max-width: 1023px) {
  .note-dau2 {
    --note-dau-cao: 68px;
  }
}
/* điện thoại: nhãn loại xuống MỘT dòng nhỏ phía trên tên món (tên dài không bị nhãn chiếm chỗ); mỗi dòng tự cắt «…» */
@media (max-width: 720px) {
  .note-dau2__trong {
    gap: 10px;
  }
  .note-dau2__logo img {
    width: 64px;
  }
  .note-dau2__ten {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding-left: 0;
    border-left: 0;
    letter-spacing: 0.02em;
  }
  .note-dau2__dong,
  .note-dau2__mon {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .note-dau2__dong {
    /* 15 px = bậc nhỏ nhất của thang chữ (hệ nét t7); trước 14 px — L20 đối chiếu hệ nét 15/11 dòng 4d */
    font-size: 15px;
  }
  .note-dau2__mon {
    font-size: 19px;
    letter-spacing: 0.03em;
  }
  .note-dau2__shop {
    gap: 6px;
    min-height: 46px;
    padding: 0 14px;
    font-size: 18px;
  }
  /* nhãn tạm hết: hai dòng ngắn bên phải, tên món không bị chiếm thêm chỗ so với nút «Shop online» */
  .note-dau2__het {
    max-width: 124px;
    min-height: 46px;
    padding: 4px 10px;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .note-dau2,
  html[data-thanh='2'] .note-dau2 {
    transition: none;
  }
}

/* Cột «Press and news» của tấm About — LUÔN có mặt (bản vẽ Main; Điều phối Mac 15/11 thay quyết định «ẩn cả cột» 14/11): bài tin đổ
   lúc chạy vào ô `data-cho="bai-tin"` (BaiKhungLucChay, #160). Chưa có bài ⇒ cột còn câu dẫn của trang Press + link «All press and
   news ›» (không để trống, không bịa tin); có bài ⇒ ẩn câu dẫn. Trình duyệt không có :has ⇒ câu dẫn đứng cùng bài, không hỏng gì. */
.note-mega [data-cho='bai-tin']:has(.note-mega__bai) ~ .note-mega__tin-dan {
  display: none;
}
.note-mega__tin-dan {
  margin: var(--note-kc-2) 0 0 !important;
  font-family: var(--note-phong-nghieng);
  font-style: italic;
  font-size: 15px;
  line-height: 1.35;
  color: var(--note-chu-phu);
}

/* ==========================================================================
   khung-tam.css — PHẦN NHÌN của bảy tấm thả megamenu (Perfume · Fragrance · Workshop · For Business · Stores · Journal · About)
   và cách các tấm xếp trong ngăn kéo điện thoại. Tách khỏi khung.css (Điều phối 14/11: bản «đẽo gọt» megamenu đang chờ CEO duyệt ⇒
   đổi phần nhìn chỉ sửa tệp này; khung.css giữ khung đầu/chân trang + hành vi chung của bảng thả: vị trí, khe 0 px, trần cao, cuộn).
   Nạp NGAY SAU khung.css (src/styles/globals.css; trên Odoo cũng theo thứ tự đó) — luật ở đây đè luật chung cùng độ ưu tiên.
   ========================================================================== */
/* 1 · Perfume: hai cột edition, MỘT ảnh lớn mỗi cột + 9 tên mùi, mỗi tên một chấm màu mùi (KHÔNG ảnh nhỏ — CEO 14/11) */
.note-mega__hai-cot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--note-kc-5);
}
.note-mega__edition {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--note-kc-4);
  align-items: start;
}
.note-mega__edition + .note-mega__edition {
  padding-left: var(--note-kc-5);
  border-left: 1px dashed var(--note-chu-phu);
}
.note-mega__anh-lon {
  position: relative;
}
.note-mega__ds-mui {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px 14px;
}
.note-mega__mui {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.1;
}
.note-mega__cham {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--note-chu-phu);
}
.note-mega__cham[data-mui='lmml'] { background: var(--note-mui-lmml); }
.note-mega__cham[data-mui='nar'] { background: var(--note-mui-nar); }
.note-mega__cham[data-mui='ditw'] { background: var(--note-mui-ditw); }
.note-mega__cham[data-mui='toh'] { background: var(--note-mui-toh); }
.note-mega__cham[data-mui='ats'] { background: var(--note-mui-ats); }
.note-mega__cham[data-mui='ht'] { background: var(--note-mui-ht); }
.note-mega__cham[data-mui='egl'] { background: var(--note-mui-egl); }
.note-mega__cham[data-mui='jot'] { background: var(--note-mui-jot); }
.note-mega__cham[data-mui='rms'] { background: var(--note-mui-rms); }

/* 2 · Fragrance: sáu cột dòng, mỗi cột ảnh thật + vài món + link xem cả dòng */
.note-mega__sau-cot {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--note-kc-4);
}
.note-mega__dong {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.note-mega__dong .note-mega__khung-anh {
  margin-bottom: var(--note-kc-2);
}
.note-mega__dong .note-mega__khung-anh img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}
.note-mega__ds {
  display: grid;
  gap: 4px;
  margin-top: var(--note-kc-2) !important;
  padding-bottom: var(--note-kc-2) !important;
  border-bottom: 1px dashed var(--note-chu-phu);
}
.note-mega__lk {
  font-size: 15px;
}
.note-mega__dong > .note-mega__gach {
  margin-top: var(--note-kc-2);
  font-size: 15px;
}

/* 3 · Workshop: ảnh thẻ + giới thiệu 9base + một nút ra the9base.com */
.note-mega__workshop {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--note-kc-6);
  align-items: center;
}
.note-mega__anh-the {
  transform: rotate(-1.6deg);
}
.note-mega__anh-the figcaption {
  margin-top: 6px;
  font-size: 15px;
  color: var(--note-chu-phu);
}
.note-mega__workshop .note-mega__than {
  max-width: 34em;
  margin: var(--note-kc-3) 0 var(--note-kc-4);
  line-height: 1.6;
}

/* 4 · For Business: câu dẫn · bốn nhóm · phiếu năm bước */
.note-mega__doanh-nghiep {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--note-kc-6);
  align-items: start;
}
.note-mega__doanh-nghiep .note-mega__cau {
  margin: var(--note-kc-3) 0 var(--note-kc-4);
}
.note-mega__ds-phu li + li {
  border-top: 1px dashed var(--note-chu-phu);
}
.note-mega__muc-phu {
  display: block;
  padding: var(--note-kc-2) 0;
  text-decoration: none;
}
.note-mega__muc-ten {
  font-size: var(--note-co-h6);
}
.note-mega__phieu-cot {
  display: grid;
  justify-items: end;
  gap: var(--note-kc-4);
}
.note-mega__phieu {
  justify-self: stretch;
  padding: var(--note-kc-4);
  background: var(--note-nen);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08), 0 18px 26px -18px rgba(17, 17, 17, 0.5);
  transform: rotate(-0.6deg);
}
.note-mega__buoc {
  counter-reset: buoc;
  margin-top: var(--note-kc-2) !important;
}
.note-mega__buoc li {
  counter-increment: buoc;
  display: flex;
  gap: var(--note-kc-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--note-chu-phu);
  font-weight: var(--note-than-dam-manh);
}
.note-mega__buoc li::before {
  content: counter(buoc, decimal-leading-zero);
  font-family: var(--note-phong-nghieng);
  font-style: italic;
  font-weight: 400;
  color: var(--note-chu-phu);
}

/* 5 · Stores: câu dẫn + ảnh kệ + thẻ cửa hàng (một nguồn với chân trang; 2 hay 3 thẻ đều tự giãn) */
.note-mega__cua-hang {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  gap: var(--note-kc-5);
  align-items: start;
}
/* dòng chung dưới thẻ (workshop ở cả ba cửa hàng) — nằm ở cột thẻ */
.note-mega__dong-chung {
  grid-column: 2;
  margin: 0;
  font-size: var(--note-co-chu-thich);
}
.note-mega__anh-the--nho {
  width: min(100%, 196px);
  margin: var(--note-kc-3) 0 var(--note-kc-4) 6px !important;
}
.note-mega__the-cua-hang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--note-kc-3);
}
.note-the-gon {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: var(--note-kc-4);
  background: var(--note-nen);
  border: 1px solid var(--note-xam);
  border-radius: var(--note-bo-the);
}
.note-the-gon__ten {
  font-size: var(--note-co-h6);
}
/* dòng nhấn «Perfume only» ở thẻ Ly Tu Trong (L4 menu Khối 6; CEO 18:39 14/11: làm nổi, không xám mờ) */
.note-the-gon__nhan {
  font-weight: var(--note-than-dam-manh);
  color: var(--note-chu);
}
/* dòng workshop chung của tấm Stores, đứng ngay dưới câu dẫn (bản vẽ Main; ngăn kéo điện thoại cũng theo thứ tự này) */
.note-mega__ghi--dau {
  margin: var(--note-kc-2) 0 var(--note-kc-3) !important;
  font-size: 15px;
  line-height: 1.5;
  color: var(--note-chu-phu);
}
.note-the-gon__them {
  font-style: italic;
  color: var(--note-chu-phu);
}
/* Số điện thoại + «Directions ↗»: React bỏ dấu cách giữa hai <a> ⇒ trước đây dính nhau 0 px ở 360/390 và số bị ngắt
   đôi, «Directions» dính sau «8242» ở 768 (L20 danh sách chặn dòng 5, MB-03). Nay: hai mục flex cách 16 px, số không ngắt
   dòng, vùng bấm cao 44 px; hẹp quá thì «Directions» xuống hàng dưới. ≥ 1024 px giữ như cũ (cột hẹp ~104 px: số được ngắt
   dòng, khoảng 12 px — luật riêng bên dưới), vì «không ngắt» ở đó làm số tràn sang cột cửa hàng bên cạnh. */
.note-the-gon__goi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  margin-top: var(--note-kc-2) !important;
  padding-top: var(--note-kc-2);
  border-top: 1px dashed var(--note-chu-phu);
}
@media (max-width: 1023px) {
  .note-the-gon__goi a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
  }
}

/* 6 · Journal: ba bài mới nhất (ảnh bìa thật, tiêu đề nguyên văn) + nút All stories. Nguồn rỗng ⇒ chỉ còn nút. */
.note-mega__bai--the {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--note-kc-4);
}
.note-mega__bai-lk {
  display: grid;
  gap: 4px;
  text-decoration: none;
}
.note-mega__bai--the .note-mega__khung-anh img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}
.note-mega__bai-ten {
  font-weight: var(--note-than-dam-manh);
}
.note-mega__ngay {
  font-size: 15px;
  color: var(--note-chu-phu);
}

/* 7 · About: bốn cột — câu chuyện · công ty · tin hoạt động · liên hệ */
.note-mega__bon-cot {
  display: grid;
  /* tỉ lệ cột của bản vẽ Main `.mab` */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: var(--note-kc-5);
}
.note-mega__bon-cot > section + section {
  padding-left: var(--note-kc-4);
  border-left: 1px dashed var(--note-chu-phu);
}
.note-mega__bon-cot .note-mega__cau {
  margin: var(--note-kc-2) 0 !important;
}
.note-mega__bai--dong li {
  padding: var(--note-kc-2) 0;
  border-bottom: 1px dashed var(--note-chu-phu);
}
.note-mega__bon-cot > section > .note-mega__gach {
  display: inline-block;
  margin-top: var(--note-kc-3);
}
.note-mega__ds-to li {
  padding: var(--note-kc-2) 0;
  border-top: 1px dashed var(--note-chu-phu);
}
.note-mega__ds-to a {
  font-size: var(--note-co-h6);
}
/* dòng phụ không nhận kiểu chữ in hoa của link cột Contact (khung.css .note-mega__ds-to a) — giữ như dòng phụ hai cột kia, Ở MỌI KHỔ
   (trước chỉ sửa ở máy tính ⇒ ngăn kéo điện thoại in «QUESTIONS ABOUT A SCENT OR AN ORDER» hoa đậm) */
.note-mega__ds-to .note-mega__phu {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* Máy tính hẹp: Fragrance 3 cột, About 2 cột */
@media (min-width: 1024px) and (max-width: 1279px) {
  .note-mega__sau-cot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .note-mega__bon-cot {
    grid-template-columns: 1fr 1fr;
  }
  .note-mega__bon-cot > section:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Điện thoại + máy tính bảng: bảng thả nằm trong nhóm gập của ngăn kéo, xếp dọc, ảnh lớn ẩn bớt */
@media (max-width: 1023px) {
  .note-mega__bang {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 0 var(--note-kc-4);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .note-mega__hai-cot,
  .note-mega__workshop,
  .note-mega__doanh-nghiep,
  .note-mega__dong-chung {
    grid-column: auto;
  }
  .note-mega__cua-hang,
  .note-mega__bon-cot,
  .note-mega__bai--the {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--note-kc-4);
  }
  .note-mega__edition {
    grid-template-columns: minmax(0, 1fr);
  }
  /* ngăn kéo: các tấm có lưới nhiều cột ở máy bàn về MỘT cột (giám khảo thẩm mỹ mốc 15–16: Perfume hai bản cạnh nhau ⇒ tên mùi
     tràn ngang + đè chấm màu ở 360–412 px; For Business ba cột ⇒ cột 71–87 px). Hai bản Edition xếp chồng, ngăn bằng vạch đứt NGANG. */
  .note-mega__hai-cot,
  .note-mega__doanh-nghiep {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--note-kc-4);
  }
  .note-mega__edition + .note-mega__edition,
  .note-mega__bon-cot > section + section {
    padding-left: 0;
    border-left: 0;
  }
  .note-mega__edition + .note-mega__edition {
    padding-top: var(--note-kc-4);
    border-top: 1px dashed var(--note-chu-phu);
  }
  .note-mega__anh-lon,
  .note-mega__anh-the--nho {
    display: none;
  }
  .note-mega__sau-cot {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--note-kc-4);
  }
  .note-mega__dong {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: var(--note-kc-3);
  }
  .note-mega__dong .note-mega__khung-anh {
    grid-row: span 2;
    margin: 0;
    padding: 4px;
  }
  .note-mega__dong > .note-mega__ds,
  .note-mega__dong > .note-mega__gach {
    grid-column: 1 / -1;
  }
  .note-mega__ds {
    grid-template-columns: 1fr 1fr;
  }
  .note-mega__lk {
    font-family: var(--note-phong-than);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--note-co-than);
  }
  .note-mega__chan > :first-child {
    margin-right: 0;
  }
}

/* ==== BẢN ĐẼO GỌT — HỆ CHUNG MEGAMENU (CEO chọn 14/11 17:41; đặc tả shiage/DAC_TA_SHIAGE.md mục 4b) ==========================
   «Mặt bàn thì được bày, ngăn kéo thì phải phẳng»: một vỏ tờ, một chiều cao, ba dải cùng toạ độ, bên trong thẳng và phẳng. */
.note-nut--muc {
  background: var(--note-chu);
  border-color: var(--note-chu);
  color: var(--note-nen);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.note-mega__bang .note-nut--muc {
  color: var(--note-nen);
}
/* rê chuột: nền chanh, chữ mực — hệ nét `.sg-nut-muc:hover`, bản vẽ Main `.nutden:hover`; trước là xám #2a2a2a (L20 đối chiếu hệ nét
   15/11 dòng 3). Trong tấm thả phải nêu lại màu chữ vì `.note-mega__bang a { color: inherit }`. */
.note-nut--muc:hover,
.note-mega__bang .note-nut--muc:hover {
  background: var(--note-chanh);
  color: var(--note-chu);
}
/* nút VIỀN trong tấm thả («See all perfumes →», «Business overview →», «See the three stores →», «All stories →»): rê chuột nền mực,
   chữ kem — bản vẽ Main `.nutvien:hover`, hệ nét `.sg-dk:hover`. Trước không có luật rê chuột nào. Chỉ trong tấm thả (nút viền ở nơi
   khác không đổi). */
.note-mega__bang .note-nut--vien {
  transition: background-color 0.25s ease, color 0.25s ease;
}
.note-mega__bang .note-nut--vien:hover {
  background: var(--note-chu);
  color: var(--note-nen);
}
.note-mega__dan {
  font-family: var(--note-phong-nghieng);
  font-style: italic;
  font-size: var(--note-co-h5);
  line-height: 1.3;
}
.note-mega__trang-thai {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--note-phong-nghieng);
  font-style: italic;
  font-size: var(--note-co-h6);
}
.note-mega__trang-thai::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--note-chu);
  border-radius: 50%;
}
.note-mega__trang-thai[data-co='1']::before {
  background: var(--note-chanh);
}
@media (min-width: 1024px) {
  /* thanh: lưới ba cột — logo trái, bảy mục ĐÚNG tâm trang, cụm VI + Shop phải. Bản Main (CEO 00:32 15/11): mũi tên xổ cạnh mỗi
     mục + gạch chân mục đang mở (luật chung khung.css) + băng kraft dưới gạch */
  .note-dau__trong {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  }
  .note-dau__phai {
    justify-self: end;
  }
  .note-dau__nhan {
    position: relative;
    /* một mục = MỘT dòng (bản vẽ Main / Ban1-Shiage ở 1024: bảy mục một hàng). Từ khi thêm kính lúp + «EN», «FOR BUSINESS» rớt hai
       dòng ở 1024 (bảng so bản vẽ 15/11) */
    white-space: nowrap;
  }
  /* mục đang mở: gạch chân 2 px (khung.css) + miếng băng kraft dán tờ vào mục */
  .note-mega[open] > .note-dau__nhan::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -32px;
    z-index: 2;
    width: 104px;
    height: 22px;
    margin-left: -52px;
    background: rgba(214, 196, 168, 0.85);
    transform: rotate(-2deg);
    pointer-events: none;
  }
  .note-dau__tieng {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* vỏ tờ: rộng ≤ 1264, nền kem sáng, bám sát đáy đầu trang; cao ÔM VỪA nội dung (bản Main — bỏ hai bậc 528 / 400 px của bản đẽo
     gọt, hết khoảng trắng dưới), vẫn không quá khung nhìn (cuộn bên trong) */
  .note-mega__bang {
    box-sizing: border-box;
    left: max(16px, calc(50% - 632px));
    right: max(16px, calc(50% - 632px));
    max-height: calc(100vh - 96px);
    padding: 32px 40px 0;
    background: #fffdf8;
    box-shadow: 0 24px 40px -28px rgba(17, 17, 17, 0.35);
  }
  /* tấm không có dải chân (Workshop, For Business — bản Main) ⇒ đệm đáy bằng đệm đỉnh */
  .note-mega__bang:not(:has(.note-mega__chan)) {
    padding-bottom: 32px;
  }
  .note-mega__dan {
    margin-bottom: 24px !important;
  }
  /* dải chân: cao 72 px, một vạch nét đứt liền suốt; lối ra bên phải (Perfume: câu «One scent, two editions.» bên trái) */
  .note-mega__chan {
    min-height: 72px;
    margin-top: 32px;
    padding-top: 0;
    border-top: 1px dashed var(--note-chu);
    justify-content: flex-end;
  }
  .note-mega__chan > :first-child {
    margin-right: 0;
  }
  .note-mega__chan > .note-mega__cau {
    margin-right: auto;
  }
  .note-mega__chan > .note-mega__ghi {
    margin-right: auto;
    font-size: var(--note-co-chu-thich);
    color: var(--note-chu-phu);
  }
}
/* ==== BẢN ĐẼO GỌT — TỪNG TẤM (máy tính ≥ 1024) — đặc tả 4b «Từng tấm: trước → sau» ===================================== */
.note-mega__nhan-cot {
  font-family: var(--note-phong-de-muc);
  font-weight: 700;
  font-size: var(--note-co-chu-thich);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--note-chu-phu);
}
@media (min-width: 1024px) {
  .note-mega__ds-mui {
    grid-template-rows: repeat(5, 44px);
    gap: 0 14px;
  }
  .note-mega__mui {
    min-height: 44px;
  }
  /* 2 · Fragrance — BẢN MAIN (CEO 15/11 «megamenu về bản trước migaki»; Main.dc.html `.mf`, ảnh chup-v5/ban1/Main__1440__mega-fragrance.png):
     mỗi cột = ảnh dán viền trắng ≤ 148 px nghiêng so le · tên dòng 21 px · dòng phụ nghiêng · món IN HOA chữ hẹp 18 px, hàng 44 px ·
     link «All … ›» của sáu cột nằm CÙNG một hàng đáy, trên vạch đứt của từng cột (cột ít món không kéo link lên). */
  .note-mega__sau-cot {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px clamp(14px, 1.7vw, 26px);
    align-items: stretch;
  }
  .note-mega__dong {
    gap: 0;
  }
  .note-mega__dong .note-mega__khung-anh {
    width: min(100%, 148px);
    margin-bottom: 14px;
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08), 0 14px 20px -14px rgba(17, 17, 17, 0.5);
    transform: rotate(-1.5deg);
  }
  .note-mega__dong:nth-child(2) .note-mega__khung-anh {
    transform: rotate(1.2deg);
  }
  .note-mega__dong:nth-child(3) .note-mega__khung-anh {
    transform: rotate(-0.8deg);
  }
  .note-mega__dong:nth-child(4) .note-mega__khung-anh {
    transform: rotate(1.4deg);
  }
  .note-mega__dong:nth-child(5) .note-mega__khung-anh {
    transform: rotate(-1.1deg);
  }
  .note-mega__dong:nth-child(6) .note-mega__khung-anh {
    transform: rotate(1deg);
  }
  .note-mega__dong .note-mega__tieu-de {
    font-size: 21px;
    line-height: 1.1;
  }
  .note-mega__dong .note-mega__phu {
    margin: 6px 0 4px !important;
    line-height: 1.3;
  }
  .note-mega__ds {
    display: block;
    margin: 0 0 4px !important;
    padding-bottom: 0 !important;
    border-bottom: 0;
  }
  .note-mega__lk {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 18px;
    line-height: 1.1;
  }
  .note-mega__dong > .note-mega__gach {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin-top: auto;
    border-top: 1px dashed rgba(17, 17, 17, 0.3);
    font-weight: 600;
  }
  /* 5 · Stores: ảnh cột 1–3 + ba cột cửa hàng KHÔNG hộp, ngăn bằng vạch đứt dọc, bốn hàng thẳng nhau */
  .note-mega__cua-hang {
    grid-template-columns: 3fr 9fr;
    gap: 24px;
  }
  .note-mega__cua-hang .note-mega__anh-the--nho {
    width: 100%;
    margin: 0 !important;
  }
  .note-mega__the-cua-hang {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .note-mega__the-cua-hang .note-the-gon {
    grid-template-rows: auto 4.5em auto auto;
    padding: 0 24px;
    background: none;
    border: 0;
    border-left: 1px dashed var(--note-chu-phu);
    border-radius: 0;
  }
  .note-mega__the-cua-hang .note-the-gon:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .note-the-gon__ten {
    font-family: var(--note-phong-de-muc);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--note-co-h4);
  }
  .note-the-gon__gio {
    color: var(--note-chu-phu);
  }
  .note-the-gon__goi {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    border-top: 0;
    padding-top: 0;
  }
  /* 6 · Journal — BẢN MAIN (Main.dc.html `.mjr`, ảnh chup-v5/ban1/Main__1440__mega-journal.png): ba ảnh bìa 3 : 2 dán viền trắng,
     nghiêng so le −1,2° · 1° · −0,8°; tiêu đề tối đa ba dòng; lối ra là nút VIỀN có mũi tên (DauTrang.tsx) */
  .note-mega__bai--the {
    gap: 0 clamp(16px, 2vw, 28px);
    align-items: start;
  }
  .note-mega__bai--the .note-mega__khung-anh {
    margin-bottom: 8px;
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08), 0 16px 22px -16px rgba(17, 17, 17, 0.5);
    transform: rotate(-1.2deg);
  }
  .note-mega__bai--the li:nth-child(2) .note-mega__khung-anh {
    transform: rotate(1deg);
  }
  .note-mega__bai--the li:nth-child(3) .note-mega__khung-anh {
    transform: rotate(-0.8deg);
  }
  .note-mega__bai--the .note-mega__bai-ten {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .note-mega__ngay {
    font-family: var(--note-phong-nghieng);
    font-style: italic;
    font-size: var(--note-co-chu-thich);
  }
  /* 7 · About — BẢN MAIN (CEO 15/11 «megamenu về bản trước migaki»; Main.dc.html `.mab`, ảnh chup-v5/ban1/Main__1440__mega-about.png):
     bốn cột ngăn vạch đứt dọc; tên cột chữ tuyên bố 20 px mực; câu nghiêng dưới «Our story»; mỗi mục một vạch đứt ngang phía trên;
     link «All press and news ›» ở cuối cột Press; không dải đầu, không dải chân. */
  .note-mega__bon-cot {
    gap: 0;
    align-items: start;
  }
  .note-mega__bon-cot > section {
    padding: 0 clamp(18px, 2.2vw, 34px);
  }
  .note-mega__bon-cot > section:first-child {
    padding-left: 0;
  }
  .note-mega__bon-cot > section:last-child {
    padding-right: 0;
  }
  .note-mega__bon-cot > section + section {
    border-left: 1px dashed rgba(17, 17, 17, 0.3);
  }
  .note-mega__bon-cot .note-mega__nhan-cot {
    margin-bottom: 10px !important;
    font-family: var(--note-phong-tuyen-bo);
    font-weight: var(--note-tb-dam);
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: normal;
    color: var(--note-chu);
  }
  .note-mega__bon-cot .note-mega__cau {
    margin: 0 0 8px !important;
    font-size: 19px;
    line-height: 1.35;
    text-wrap: pretty;
  }
  .note-mega__bon-cot .note-mega__ds-phu li,
  .note-mega__bon-cot .note-mega__ds-phu li + li,
  .note-mega__bai--dong li,
  .note-mega__ds-to li {
    padding: 0;
    border: 0;
    border-top: 1px dashed rgba(17, 17, 17, 0.3);
  }
  .note-mega__bon-cot .note-mega__muc-phu,
  .note-mega__bai--dong .note-mega__bai-lk {
    padding: 10px 0;
  }
  .note-mega__bon-cot .note-mega__muc-ten {
    display: block;
    font-size: 21px;
    line-height: 1.15;
    /* cân dòng: «9base · Perfume workshop ↗» gãy thành hai dòng đều như bản vẽ, mũi tên ↗ không rớt một mình xuống dòng */
    text-wrap: balance;
  }
  .note-mega__bon-cot .note-mega__tin-dan {
    margin: 0 0 10px !important;
  }
  .note-mega__cot-tin > .note-mega__gach {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin-top: 0;
    border-top: 1px dashed rgba(17, 17, 17, 0.3);
    font-weight: 600;
    font-size: 15px;
  }
  .note-mega__ds-to a {
    font-size: 21px;
    line-height: 1.15;
  }
  .note-mega__ds-to a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
  /* link có dòng phụ («Contact NOTE · Questions about a scent or an order») xếp DỌC như cột The NOTE story / Company — không để
     tên gãy hai dòng nằm ngang hàng dòng phụ (giám khảo thẩm mỹ: cột Contact chữ chồng, máy bàn) */
  .note-mega__ds-to a.note-mega__muc-phu {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}
/* 1024–1279: About còn HAI cột (luật «Máy tính hẹp» ở trên) ⇒ cột 3 bắt đầu hàng mới: không vạch, không đệm trái; cột 2 không đệm phải */
@media (min-width: 1024px) and (max-width: 1279px) {
  .note-mega__bon-cot {
    row-gap: 24px;
  }
  .note-mega__bon-cot > section:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .note-mega__bon-cot > section:nth-child(2) {
    padding-right: 0;
  }
}
/* 901–1100: Fragrance giữ sáu cột, ẩn ảnh; thanh menu khít lại để bảy mục một dòng không chạm cụm kính lúp · EN · Shop */
@media (min-width: 1024px) and (max-width: 1100px) {
  .note-dau__ds {
    gap: 10px;
  }
  .note-dau__trong {
    gap: var(--note-kc-2);
  }
  /* khu doanh nghiệp: nút «Get a quote» dài hơn «Shop» 41 px ⇒ khít thêm để cụm phải không lấn lề trang ở 1024 */
  html[data-nut-dau='bao-gia'] .note-dau__ds {
    gap: 6px;
  }
  html[data-nut-dau='bao-gia'] .note-nut.note-dau__bao-gia {
    padding: 0 14px;
  }
  .note-mega__dong .note-mega__khung-anh {
    display: none;
  }
}

/* ==== BẢN MAIN — ba tấm Perfume · Workshop · For Business (CEO 00:32 15/11: «mega menu trước migaki ok hơn bây giờ»; bản vẽ
   canvas-moi/project/Main.dc.html, ảnh chup-v5/ban1/Main__1440__mega-*.png). Máy tính ≥ 1024; ngăn kéo điện thoại giữ nguyên. ==== */
@media (min-width: 1024px) {
  /* 1 · Perfume: mỗi nửa = ảnh 150 px | nhãn nghiêng nhỏ · tiêu đề HAI dòng · tem viền · chín mùi 5 + 4 */
  .note-mega__edition {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0 28px;
  }
  .note-mega__edition .note-mega__phu-to {
    margin-bottom: 2px !important;
    font-size: var(--note-co-h6);
  }
  .note-mega__edition .note-mega__tieu-de-to {
    max-width: 205px;
    font-size: 26px;
    line-height: 1.04;
  }
  .note-mega__edition .note-mega__tem {
    margin: 14px 0 18px !important;
    padding: 3px 12px;
    border-radius: 999px;
  }
  /* phiên bản chưa bán («arriving soon»): tem nền tím nhạt như bản vẽ; đang bán: chỉ viền */
  .note-mega__edition .note-mega__tem[data-co='0'] {
    background: var(--note-tim);
  }
  /* ảnh Illustrated: chai đứng trên mảng bầu dục tím nhạt; ảnh Minimal: ảnh dán nghiêng, viền trắng, băng kraft */
  .note-mega__edition:first-child .note-mega__anh-lon {
    margin-top: 52px !important;
    height: 215px;
  }
  .note-mega__edition:first-child .note-mega__anh-lon::before {
    content: '';
    position: absolute;
    inset: 0 6px 0 0;
    border-radius: 50%;
    /* ảnh Illustrated hiện là chai Not A Rose (duLieuKhung lon-minh-hoa-nar) ⇒ bầu dục màu mùi đó, như bản vẽ */
    background: var(--note-mui-nar);
  }
  .note-mega__edition:first-child .note-mega__anh-lon img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 40% 60%;
    transform: scale(1.3);
  }
  .note-mega__edition + .note-mega__edition .note-mega__anh-lon {
    margin-top: 78px !important;
    padding: 8px 8px 22px;
    background: var(--note-trang);
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08), 0 18px 26px -18px rgba(17, 17, 17, 0.5);
    transform: rotate(-2.5deg);
  }
  .note-mega__edition + .note-mega__edition .note-mega__anh-lon::before,
  .note-mega__workshop .note-mega__anh-the::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -12px;
    z-index: 1;
    width: 72px;
    height: 20px;
    margin-left: -36px;
    background: rgba(214, 196, 168, 0.88);
    transform: rotate(3deg);
  }
  .note-mega__chan > .note-mega__cau {
    font-size: var(--note-co-h5);
  }

  /* 3 · Workshop: ảnh dán nghiêng (hai miếng băng) + chú thích nghiêng | nhãn nghiêng nhỏ · tiêu đề hai dòng · đoạn · nút mực */
  .note-mega__workshop {
    grid-template-columns: minmax(0, 445px) minmax(0, 470px);
    justify-content: start;
    gap: 0 64px;
    padding: 16px 0 8px 88px;
  }
  .note-mega__workshop .note-mega__anh-the {
    position: relative;
    padding: 8px 8px 10px;
    transform: rotate(-2deg);
  }
  .note-mega__workshop .note-mega__anh-the::before {
    left: auto;
    right: -14px;
    top: -18px;
    width: 104px;
    margin: 0;
  }
  .note-mega__workshop .note-mega__anh-the::after {
    content: '';
    position: absolute;
    right: 40px;
    top: -6px;
    width: 92px;
    height: 22px;
    background: rgba(204, 204, 255, 0.92);
    transform: rotate(-3deg);
  }
  .note-mega__workshop .note-mega__anh-the img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .note-mega__workshop .note-mega__anh-the figcaption {
    margin-top: 8px;
    font-size: var(--note-co-chu-thich);
  }
  .note-mega__workshop .note-mega__phu-to {
    margin-bottom: 10px !important;
    font-size: var(--note-co-h5);
  }
  .note-mega__workshop .note-mega__tieu-de-to {
    max-width: 14em;
    font-size: var(--note-co-h3);
  }
  .note-mega__workshop .note-mega__than {
    margin: 22px 0 22px !important;
  }

  /* 4 · For Business: tiêu đề hai dòng · câu dẫn nghiêng · nút viền | nhóm cách nhau vạch đứt | phiếu giấy nghiêng có lỗ đục + nút */
  .note-mega__doanh-nghiep {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0 48px;
    align-items: start;
    padding-top: 24px;
  }
  .note-mega__doanh-nghiep > div:first-child .note-mega__tieu-de-to {
    max-width: 7em;
    font-size: var(--note-co-h4);
  }
  .note-mega__doanh-nghiep .note-mega__cau {
    margin: 22px 0 24px !important;
  }
  .note-mega__doanh-nghiep .note-mega__ds-phu {
    padding-top: 24px;
  }
  .note-mega__doanh-nghiep .note-mega__muc-phu {
    padding: 9px 0;
  }
  .note-mega__phieu {
    position: relative;
    padding: 36px 24px 18px;
    background: #fffdf8;
    border: 1px solid rgba(17, 17, 17, 0.14);
  }
  .note-mega__phieu::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 12px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border: 1.5px solid rgba(17, 17, 17, 0.3);
    border-radius: 50%;
    background: var(--note-nen);
  }
  .note-mega__phieu .note-mega__tieu-de {
    font-size: var(--note-co-h6);
  }
  .note-mega__phieu-cot > .note-nut {
    gap: var(--note-kc-2);
  }

  /* 5 · Stores (bản Main, CEO 15/11 «megamenu về bản trước migaki»; ảnh Main__1440__mega-stores.png): cột trái 290 px = câu dẫn
     nghiêng · dòng workshop chung chữ nhỏ xám · ảnh dán nghiêng (băng tím) · nút viền; cột phải ba THẺ hộp nền kem, số 01/02/03
     nghiêng, lỗ đục góc phải, vạch đứt trên hàng số điện thoại + Directions, đứng GIỮA theo chiều dọc so với cột trái. Hộp
     `.note-mega__cua-hang` thành `display: contents` (ảnh + thẻ vào lưới tấm); dải chân là HÀNG CUỐI của lưới (nút ở cột trái),
     không vạch — vẫn là một hộp thật để cổng 9 đo «chữ không tràn xuống dải chân». */
  .note-mega__bang--cua-hang {
    --note-cua-hang-cot: minmax(0, 290px) minmax(0, 1fr);
    --note-cua-hang-khe: clamp(24px, 3.4vw, 52px);
    display: grid;
    grid-template-columns: var(--note-cua-hang-cot);
    /* hàng 1 ôm câu dẫn, hàng 2 nhận phần cao dư của ba thẻ ⇒ ảnh luôn nằm ngay dưới câu dẫn (thẻ cao ở 1024 không đẩy ảnh xuống) */
    grid-template-rows: auto auto 1fr auto;
    gap: 18px var(--note-cua-hang-khe);
    align-items: start;
    padding-bottom: 32px;
  }
  .note-mega__bang--cua-hang > .note-mega__cua-hang {
    display: contents;
  }
  .note-mega__bang--cua-hang > .note-mega__chan {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: var(--note-cua-hang-cot);
    gap: 0 var(--note-cua-hang-khe);
    align-items: center;
    min-height: 0;
    margin-top: 0;
    border-top: 0;
  }
  .note-mega__bang--cua-hang .note-mega__dan {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
  }
  .note-mega__bang--cua-hang > .note-mega__ghi--dau {
    grid-column: 1;
    grid-row: 2;
    /* bản vẽ: dòng này sát câu dẫn hơn nhịp 18 px của lưới (margin -8px) */
    margin: -8px 0 0 !important;
  }
  .note-mega__bang--cua-hang .note-mega__anh-the--nho {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    width: min(100%, 196px);
    margin: 4px 0 0 6px !important;
    padding: 8px 8px 9px;
    background: var(--note-trang);
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08), 0 20px 28px -20px rgba(17, 17, 17, 0.55);
    transform: rotate(-2deg);
  }
  .note-mega__bang--cua-hang .note-mega__anh-the--nho::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -11px;
    z-index: 1;
    width: 74px;
    height: 22px;
    margin-left: -37px;
    background: rgba(204, 204, 255, 0.92);
    transform: rotate(4deg);
  }
  .note-mega__bang--cua-hang .note-mega__chan > .note-nut {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
  }
  .note-mega__bang--cua-hang .note-mega__the-cua-hang {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    counter-reset: note-cua-hang;
  }
  .note-mega__bang--cua-hang .note-mega__the-cua-hang .note-the-gon,
  .note-mega__bang--cua-hang .note-mega__the-cua-hang .note-the-gon:first-child {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 22px 20px 8px;
    background: var(--note-nen);
    border: 1px solid rgba(17, 17, 17, 0.16);
    border-radius: 6px;
    box-shadow: 0 18px 28px -22px rgba(17, 17, 17, 0.4);
    counter-increment: note-cua-hang;
  }
  /* số thẻ 01 · 02 · 03: trang trí như bản vẽ (aria-hidden) ⇒ chữ thay rỗng sau «/» để máy đọc màn hình bỏ qua */
  .note-mega__bang--cua-hang .note-the-gon::before {
    content: counter(note-cua-hang, decimal-leading-zero) / '';
    margin-bottom: 8px;
    font-family: var(--note-phong-nghieng);
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: var(--note-chu-phu);
  }
  /* lỗ đục góc phải trên */
  .note-mega__bang--cua-hang .note-the-gon::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fffdf8;
    box-shadow: inset 0 2px 3px rgba(17, 17, 17, 0.3);
  }
  .note-mega__bang--cua-hang .note-the-gon__ten {
    margin-bottom: 8px !important;
    font-size: 24px;
    line-height: 1.1;
  }
  .note-mega__bang--cua-hang .note-the-gon > p:not([class]) {
    margin-bottom: 4px !important;
    line-height: 1.45;
  }
  .note-mega__bang--cua-hang .note-the-gon__gio {
    margin-bottom: 12px !important;
    line-height: 1.45;
  }
  .note-mega__bang--cua-hang .note-the-gon__goi {
    justify-content: space-between;
    gap: 0 14px;
    margin-top: auto !important;
    padding-top: 2px;
    border-top: 1px dashed rgba(17, 17, 17, 0.3);
  }
  .note-mega__bang--cua-hang .note-the-gon__goi a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    font-size: 15px;
    white-space: nowrap;
  }
}


/* ===== Lớp nối Odoo (chỉ trang bán hàng) — phiên shop 15/11/2026 ===== */
/* Đầu trang, chân trang gốc của Odoo vẫn render (JS giỏ hàng bám vào) nhưng giấu đi khi khung mới đã có CSS.
   Chế độ sửa trang của nhân viên (body.editor_enable) vẫn thấy bản gốc để sửa menu. */
body:not(.editor_enable) header#top,
body:not(.editor_enable) footer#bottom { display: none !important; }
body.editor_enable .note-dau, body.editor_enable .note-chan { display: none !important; }

/* Quy tắc nền của web mới (src/styles/globals.css) — CHỈ trong phạm vi khung để không đụng trang Odoo */
.note-dau, .note-chan {
  color: var(--note-chu);
  font-size: var(--note-co-than);
  line-height: var(--note-dong-than);
  -webkit-font-smoothing: auto;
}
.note-dau { font-family: var(--note-phong-de-muc); }
.note-chan { font-family: var(--note-phong-than); }
:where(.note-dau, .note-chan) a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
:where(.note-dau, .note-chan) a:hover { color: inherit; }
:where(.note-dau, .note-chan) :is(h1, h2, h3, h4) {
  font-family: var(--note-phong-de-muc); font-weight: var(--note-dm-dam); line-height: var(--note-dong-de-muc);
  margin: 0; color: inherit; text-transform: none; letter-spacing: normal;
}
:where(.note-dau, .note-chan) h2 { font-size: 1.5em; }
:where(.note-dau, .note-chan) h3 { font-size: 1.17em; }
:where(.note-dau, .note-chan) h4 { font-size: 1em; }
:where(.note-dau, .note-chan) p { margin: 1em 0; }
:where(.note-dau, .note-chan) :is(ul, ol) { margin: 1em 0; padding-inline-start: 40px; }
:where(.note-dau, .note-chan) :is(img, svg) { vertical-align: baseline; }
:where(.note-dau, .note-chan) small { font-size: smaller; }
:where(.note-dau, .note-chan) button { font-family: inherit; text-transform: none; }
.note-dau :focus-visible, .note-chan :focus-visible { outline: 3px solid var(--note-tieu-diem); outline-offset: 2px; }

/* Bước chọn cách giao: mô tả có đường dẫn bản đồ dài (26 Lý Tự Trọng chưa có link rút gọn maps.app.goo.gl) không ngắt dòng
   ⇒ trang điện thoại 390 bị đẩy rộng 728px (đo 15/11/2026). Cho đường dẫn trong mô tả (khối nằm ngoài hàng tên + giá) được ngắt dòng. */
#o_delivery_methods .text-muted a { overflow-wrap: anywhere; word-break: break-word; }

/* Ô bên phải trên trang bán hàng: tìm · tiếng · yêu thích · tài khoản · giỏ */
.note-dau__odoo { display: flex; align-items: center; gap: 2px; }
.note-dau__odoo-ds { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.note-dau__odoo-ds > li { margin: 0; padding: 0; list-style: none; }
.note-dau__odoo-ds > li.divider { display: none !important; }
.note-dau__odoo-lk {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; color: var(--note-chu); text-decoration: none; cursor: pointer; list-style: none;
}
.note-dau__odoo-lk::-webkit-details-marker { display: none; }
.note-dau__odoo-lk:hover { background: var(--note-chanh); color: var(--note-chu); }
.note-dau__odoo-bt { display: contents; }
.note-dau__odoo-yt .note-dau__odoo-lk::before,
.note-dau__odoo-tk .note-dau__odoo-lk::before,
.note-dau__odoo-gio .note-dau__odoo-lk::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--note-odoo-icon) center / contain no-repeat; mask: var(--note-odoo-icon) center / contain no-repeat;
}
.note-dau__odoo-yt { --note-odoo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M10 17s-7-4.3-7-9.2A3.8 3.8 0 0 1 10 5.6a3.8 3.8 0 0 1 7 2.2C17 12.7 10 17 10 17z'/%3E%3C/svg%3E"); }
.note-dau__odoo-tk { --note-odoo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='10' cy='6.5' r='3.5'/%3E%3Cpath d='M3 18c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.note-dau__odoo-gio { --note-odoo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h12l-1 11H5z'/%3E%3Cpath d='M7 8V5.5a3 3 0 0 1 6 0V8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.note-dau .note-dau__dem.badge {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font: 600 11px/18px var(--note-phong-than); letter-spacing: 0;
  background: var(--note-chu) !important; color: var(--note-nen) !important;
}
.note-dau .note-dau__dem.badge:empty { display: none; }

/* tìm kiếm: bấm kính lúp mở ô nhập ngay dưới đầu trang */
.note-dau__tim { position: static; }
.note-dau__tim > summary { list-style: none; }
.note-dau__tim-hop {
  position: absolute; z-index: 60; top: 100%; right: var(--note-le-trang, 24px); display: flex; gap: 8px;
  width: min(520px, calc(100vw - 32px)); padding: 12px; margin-top: 8px;
  background: var(--note-nen); border: var(--note-vien-day) solid var(--note-vien); border-radius: var(--note-bo-nut);
}
.note-dau__tim-hop input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; font: 400 16px/1.2 var(--note-phong-than);
  color: var(--note-chu); background: var(--note-nen); border: var(--note-vien-day) solid var(--note-vien); border-radius: var(--note-bo-nut);
}
.note-dau__tim-hop .note-nut { min-height: 44px; }

/* đổi tiếng (máy bàn): EN ▾ mở danh sách */
.note-dau__tieng-odoo { position: relative; }
.note-dau__tieng-odoo > summary { list-style: none; cursor: pointer; padding: 8px 6px; }
.note-dau__tieng-odoo > summary::-webkit-details-marker { display: none; }
.note-dau__tieng-ds {
  position: absolute; z-index: 60; top: 100%; right: 0; min-width: 160px; margin: 6px 0 0; padding: 6px 0; list-style: none;
  background: var(--note-nen); border: var(--note-vien-day) solid var(--note-vien); border-radius: var(--note-bo-nut);
  font-family: var(--note-phong-than); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400;
}
.note-dau__tieng-ds a { display: block; padding: 8px 14px; text-decoration: none; }
.note-dau__tieng-ds a:hover, .note-dau__tieng-ds a.is-nay { background: var(--note-chanh); }
.note-dau__tieng-dt-odoo a { margin-left: 10px; text-decoration: none; }
.note-dau__tieng-dt-odoo a.is-nay { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.note-chan__tieng-odoo a { margin-right: 14px; }

@media (max-width: 1023px) {
  .note-dau__odoo-yt, .note-dau__tieng-odoo { display: none !important; }
  .note-dau__shop { display: none !important; }
  .note-dau__odoo-lk { width: 40px; height: 40px; }
  .note-dau__tieng-dt.note-dau__tieng-dt-odoo { display: block; }
}
@media (max-width: 420px) {
  .note-dau__odoo-tk { display: none !important; }
}