/*
Theme Name: Mat hoa dua 2026
Description: Giao dien web dai ly mat hoa dua Sokfarm, theo mockup docs/mockup/15-muc-tieu-chien-luoc/2026-10-02-giao-dien-trang-chu-web-mat-hoa-dua-2026.html
Author: Pham Hoang Quan (phien tckn-pro-8c)
Version: 0.1.0
*/
@font-face{font-family:'Chonburi';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cb-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Chonburi';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cb-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Chonburi';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cb-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Moul';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/moul-khmer.woff2) format('woff2');unicode-range:U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC}
@font-face{font-family:'Noto Sans Khmer';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nk-700-khmer.woff2) format('woff2');unicode-range:U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bc-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bc-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bc-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bc-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bvp-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bvp-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bvp-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bvp-800-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bvp-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bvp-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--nen:#F5F7FA;--vien:#94A3B8;--chu:#0F172A;--phu:#334155;--brand:#188549;--dam:#0F3D24}
*{box-sizing:border-box}
body{margin:0;background:var(--nen);color:var(--chu);font:16px/1.6 'Be Vietnam Pro',Arial,sans-serif;overflow-wrap:anywhere}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.khoi{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:20px;margin-bottom:16px;min-width:0}
.dau{display:flex;gap:12px;align-items:center;border-bottom:2px solid var(--brand);padding-bottom:12px;margin-bottom:16px}
.so{flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
h1,h2,h3{margin:0;font-weight:800;color:var(--chu)}
h1{font-size:30px;line-height:1.25}
h2{font-size:20px}
h3{font-size:16px}
p{margin:0 0 8px;color:var(--phu)}
.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.o{border:1px solid var(--vien);border-radius:12px;padding:16px;min-width:0;background:#fff}
.nut{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;margin:0 8px 8px 0;border-radius:12px;font-weight:700;text-decoration:none;background:var(--brand);color:#fff;border:1px solid var(--brand);text-align:center}
.nut.phu{background:#fff;color:var(--brand)}
.anh{border:1px solid var(--vien);border-radius:12px;min-height:160px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:var(--phu);font-weight:600;background:var(--nen)}
.anh img{max-width:100%;height:auto;display:block;border-radius:12px}
.menu{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.menu nav{display:flex;flex-wrap:wrap;gap:8px 16px}
.menu a{color:var(--dam);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.logo{font-size:18px;font-weight:800;color:var(--dam);text-decoration:none}
.chan a{color:var(--dam);font-weight:700}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--dam);padding:12px 16px;border:1px solid var(--vien);border-radius:12px;font-weight:700;z-index:10}
.skip:focus{left:16px;top:16px}
a:focus-visible,.nut:focus-visible{outline:3px solid var(--dam);outline-offset:2px}
.lon{font-size:20px;font-weight:700;color:var(--dam)}
.o p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:480px){h1{font-size:26px}.wrap{padding:12px}.khoi{padding:16px}}
.thieu{background:#FDE047;color:#0F172A;border:1px solid #A16207}
.anh.thieu{background:#FDE047}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
.hero-anh{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--nen);border:1px solid var(--vien);border-radius:12px;padding:12px;min-width:0}
.hero-anh img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:#fff;border-radius:8px}
.the .anh.nho{min-height:0;aspect-ratio:1/1;margin-bottom:12px;padding:8px;background:#fff}
.the .anh.nho img{width:100%;height:100%;object-fit:contain;border-radius:0}
.the .anh.thieu{background:#FDE047}
.the h3{margin-bottom:4px}
.ghi{margin-top:12px}
.ghi a{color:var(--dam);font-weight:700}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.woocommerce ul.products li.product{border:1px solid var(--vien);border-radius:12px;padding:12px;margin:0!important;width:auto!important;float:none!important}
.woocommerce ul.products li.product img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.woocommerce ul.products li.product .button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none}
.woocommerce span.onsale{background:var(--dam);color:#fff;border-radius:12px;min-height:0;line-height:1.4;padding:4px 10px}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-anh{order:-1}}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product .price,.woocommerce ul.products li.product .price ins,.woocommerce ul.products li.product .price .amount{color:var(--chu);font-weight:800}
.woocommerce ul.products li.product .price del,.woocommerce ul.products li.product .price del .amount{color:var(--phu);font-weight:400;opacity:1}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce div.product div.images,.woocommerce-product-gallery{opacity:1!important;float:none!important;width:100%!important;max-width:520px}
.woocommerce-product-gallery img{width:100%;height:auto;border:1px solid var(--vien);border-radius:12px;background:#fff}
.woocommerce div.product .summary{float:none!important;width:100%!important}
.woocommerce div.product p.price,.woocommerce div.product p.price ins,.woocommerce div.product p.price .amount{color:var(--chu)!important;font-weight:800;font-size:22px;text-decoration:none}
.woocommerce div.product p.price del,.woocommerce div.product p.price del .amount{color:var(--phu)!important;font-weight:400;font-size:16px}
.woocommerce div.product .product_meta{display:none}
.woocommerce div.product .onsale{position:static;display:inline-block;margin-bottom:8px}
/* Anh phu trong thu vien co chu "Tang cuong he mien dich" va tuong tu: chi hien anh dau cho den khi noi dung duoc viet lai (CV-2026-00233-003) */
.flex-control-thumbs,.woocommerce-product-gallery__trigger+.flex-viewport~ol{display:none!important}
.chinhsach{display:flex;flex-wrap:wrap;gap:4px 16px}.chinhsach a{display:inline-flex;align-items:center;min-height:44px}
details{border-top:1px solid var(--vien);padding:4px 0}summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.o details p{margin:0 0 8px}
.bia{margin:0 0 16px}.bia img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:center 35%;border:1px solid var(--vien);border-radius:12px;display:block}
.bia figcaption{font-size:14px;color:var(--phu);margin-top:8px}
.the .anh.anh-ngang{aspect-ratio:4/3;padding:0;overflow:hidden}.the .anh.anh-ngang img{object-fit:cover;border-radius:12px}
/* Sang trong: toi da 4 co chu (14,16,20,30), chu dam mot mau, dong dai toi da ~66 ky tu, lien ket co mau thuong hieu */
.logo{font-size:20px}
a{color:var(--brand)}
.menu a,.chan a,.ghi a,.hero .nut,summary{color:var(--chu)}
.nut{color:#fff}.nut.phu{color:var(--brand)}
.lon{color:var(--chu)}
.dau h2,.dau h1,.menu a,.logo,.chan a{color:var(--chu)}
p,.o p,details p{max-width:66ch}.ghi{max-width:none}
.hero-chu p{max-width:52ch}
/* Hoi dap: cau hoi va tra loi tach ro. Cau hoi co dau mo/dong, tra loi nam trong khung co vach xanh ben trai */
details{border:1px solid var(--vien);border-radius:12px;margin:0 0 8px;background:#fff;overflow:hidden}
.o details{border-top:1px solid var(--vien)}
summary{list-style:none;padding:0 16px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
details[open]>summary{background:var(--nen);border-bottom:1px solid var(--vien)}
details[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details>p{margin:0;padding:16px 16px 16px 20px;border-left:4px solid var(--brand);background:#fff;animation:mhd-mo .22s ease}
summary:focus-visible{outline:3px solid var(--dam);outline-offset:-3px}
@keyframes mhd-mo{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){summary::after,details>p{transition:none;animation:none}}
.o>h3+details{margin-top:12px}
.hero{grid-template-columns:1.1fr 1fr}.hero-anh{padding:8px;gap:8px}.hero-anh img{aspect-ratio:3/4;border-radius:8px}
.thieu.nut,.nut.thieu{border-color:#A16207}
.vbthe{text-align:center}.vbthe h3,.vbthe p{text-align:center;margin-left:auto;margin-right:auto}
.bia-vb{position:relative;background:var(--nen);border-radius:12px;padding:20px 20px 16px;margin-bottom:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.bia-vb img{width:70%;height:auto;aspect-ratio:1456/819;object-fit:cover;border:1px solid var(--vien);border-radius:4px;background:#fff}
.bia-vb .nut{width:70%;margin:0}
@media (max-width:760px){.bia-vb img,.bia-vb .nut{width:100%}}
.hai-cot{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}.hai-cot .khoi{margin-bottom:0}
.lk{display:grid;gap:12px}.lk label{font-weight:700}.lk select{min-height:44px;border:1px solid var(--vien);border-radius:12px;padding:0 12px;font:inherit;color:var(--chu);background:#fff}.lk .nut{margin:0}
.tk{margin:0;display:grid;gap:0}.tk>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--vien)}.tk>div:last-child{border-bottom:0}.tk dt{color:var(--phu)}.tk dd{margin:0;font-weight:800;color:var(--chu)}
button.nut{font:inherit;font-weight:700;font-size:16px;cursor:pointer}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}.hero-anh{order:-1}.hero-chu{min-width:0}.nut{max-width:100%}}
.hai-cot{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.lk{min-width:0}.lk select,.lk .nut,.lk label{width:100%;max-width:100%;min-width:0}
.hai-cot .khoi{min-width:0}

/* Mau va chu theo nhan dien Sokfarm (xanh la #188549, cam #F37021 chi lam diem nhan nho); tieu de chu hep dam */
:root{--cam:#F37021}
h1,h2,.logo{font-family:'Barlow Condensed','Be Vietnam Pro',Arial,sans-serif;font-weight:700;letter-spacing:.01em}
h1{font-size:44px;line-height:1.1}h2{font-size:28px;line-height:1.15}.logo{font-size:24px}
.dau{border-bottom-color:var(--brand)}.so{background:var(--brand)}
.onsale,.woocommerce span.onsale{background:var(--cam)!important;color:#0F172A!important}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--chu)}
.logo img{width:56px;height:56px;object-fit:contain;display:block}
@media (max-width:480px){h1{font-size:36px}h2{font-size:24px}}

/* ===== Chat Khmer: nen kem cua tranh Sokfarm, vien vang nau am, dai hoa van kim cuong, tranh mau nuoc vung que ===== */
:root{--nen:#FAF3D6;--vien:#A8946A;--vang:#C8932B;--cam:#F37021}
body{background:var(--nen)}
.khoi,.o{border-color:var(--vien)}
.dau{border-bottom:3px solid var(--brand)}
/* dai hoa van: kim cuong xanh-vang-cam lap lai */
.hoavan{height:14px;margin:0 0 16px;border-radius:0;background:
 linear-gradient(135deg,transparent 40%,var(--brand) 40% 60%,transparent 60%) 0 0/14px 14px,
 linear-gradient(45deg,transparent 40%,var(--vang) 40% 60%,transparent 60%) 0 0/14px 14px;opacity:1}
.hoavan.cam{background:
 linear-gradient(135deg,transparent 40%,var(--cam) 40% 60%,transparent 60%) 0 0/14px 14px,
 linear-gradient(45deg,transparent 40%,var(--brand) 40% 60%,transparent 60%) 0 0/14px 14px}
.chan{border-top:0}
/* tranh vung que Khmer: banner toan chieu rong */
.langque{margin:0 0 16px;border:1px solid var(--vien);border-radius:12px;overflow:hidden;background:var(--nen)}
.langque img{display:block;width:100%;height:auto;aspect-ratio:1800/623;object-fit:cover}
.langque figcaption{padding:10px 16px;color:var(--phu);font-size:14px;background:#fff;border-top:1px solid var(--vien)}
/* chu Khmer "Sok" = hanh phuc */
.sok{display:inline-flex;align-items:baseline;gap:8px;margin:0 0 8px;font-weight:700;color:var(--brand)}
.sok b{font-family:'Noto Sans Khmer','Be Vietnam Pro',sans-serif;font-size:30px;line-height:1;color:var(--cam)}
.sok span{font-size:14px;color:var(--phu);font-weight:600}
/* bon nguoi lam nghe (tranh Sokfarm) */
.nghe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px;margin:0 0 16px}
.nghe figure{margin:0;text-align:center}
.nghe img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;border:1px solid var(--vien);border-radius:12px;background:#fff}
.nghe figcaption{margin-top:6px;font-weight:700}
.hero-anh{background:#fff}
.so-con{font-size:13px;letter-spacing:-.02em;width:44px;border-radius:18px}
.noi-that .o h3{margin-bottom:8px}.noi-that .o p{margin-bottom:8px}

/* Cum tu can uu y: nen tranh mau nuoc mo (anh cua Sokfarm lam nhat), vach hoa van kim cuong, chu dam toi */
mark.kh{color:var(--chu);font-weight:700;padding:2px 8px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
 background:url(img/nen-la.webp) center/cover,#E6F2E3;border-left:4px solid var(--brand)}
mark.kh.cam{background:url(img/nen-chua.webp) center/cover,#FBE9D6;border-left-color:var(--cam)}
h3 mark.kh{display:block;padding:8px 10px;margin:-4px -4px 8px}
/* tieu de khoi: dai tranh mau nuoc thay vach don */
.dau{position:relative;padding:8px 12px;margin:-4px -4px 16px;border-radius:8px;border-bottom:0;
 background:url(img/nen-la.webp) left center/cover,#EAF3E6}
.dau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
 background:linear-gradient(135deg,transparent 40%,var(--brand) 40% 60%,transparent 60%) 0 0/8px 8px,linear-gradient(45deg,transparent 40%,var(--vang) 40% 60%,transparent 60%) 0 0/8px 8px}
.dau{padding-bottom:16px}

/* Chu tieu de cach dieu theo net Khmer: Chonburi (chan xoe nang, nhip giong chu Moul), chu Khmer dung Moul */
h1,h2,.logo{font-family:'Chonburi','Be Vietnam Pro',Georgia,serif;font-weight:400;letter-spacing:0}
h1{font-size:29px;line-height:1.25}h2{font-size:22px;line-height:1.3}.logo{font-size:19px}
.sok b{font-family:'Moul','Noto Sans Khmer',sans-serif;font-weight:400}
@media (max-width:480px){h1{font-size:28px}h2{font-size:20px}.logo{font-size:17px}}
.dinh{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:8px}.dinh .nut{margin:0}
.nhom{margin:16px 0 8px;font-family:Chonburi,Georgia,serif;font-weight:400;font-size:17px;color:var(--brand)}.dm{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}.dm h3{font-size:15px;line-height:1.35}

/* Gon lai: nen tranh chi o tieu de; trong doan van chi to nhe mot mau, khong vach, khong anh nen */
p mark.kh{background:#E6F2E3;border-left:0;padding:1px 4px;border-radius:4px;font-weight:700;color:var(--chu)}
p mark.kh.cam{background:#FBE9D6;border-left:0}
.noi-that .luoi{align-items:stretch}
.noi-that .o{display:flex;flex-direction:column}
.noi-that .o h3 mark.kh{display:block;margin:0 0 10px;padding:8px 10px;font-size:16px}
.noi-that .dinh{margin-top:auto;padding-top:8px}
.noi-that .o p{max-width:none}

.noi-that .o{padding:14px 16px}.noi-that .o h3{font-family:Chonburi,Georgia,serif;font-weight:400;font-size:16px;margin:0 0 8px;color:var(--brand);padding:0}
.noi-that .o p{margin:0 0 6px;font-size:15px;line-height:1.5}
.noi-that .dinh{margin-top:auto;padding-top:6px}
#vi-sao .luoi{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.bh{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}.bh figure{margin:0;padding:8px}.bh img{width:100%;height:auto;aspect-ratio:1/1;border-radius:8px;display:block}.bh figcaption{margin-top:6px;font-weight:700;font-size:15px}

/* Anh to hon + xem to */
.spl{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.spl .anh.nho{aspect-ratio:1/1}
#san-pham .anh img,#hang-that .bh img,.nghe img,.hero-anh img{cursor:zoom-in;transition:transform .2s ease}
@media (hover:hover){#san-pham .anh:hover img,.bh figure:hover img{transform:scale(1.06)}}
#san-pham .anh,.bh figure{overflow:hidden}
#xem-to{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
#xem-to[hidden]{display:none}
#xem-to img{max-width:min(96vw,1100px);max-height:80vh;width:auto;height:auto;object-fit:contain;background:#fff;border-radius:12px;cursor:zoom-out}
#xem-to .cc{color:#fff;margin:12px 0 0;text-align:center;font-weight:700}
#xem-to .dong{position:absolute;top:12px;right:12px;min-height:44px;padding:0 20px;border-radius:12px;border:1px solid #fff;background:#fff;color:#0F172A;font:700 16px Arial;cursor:pointer}
@media (prefers-reduced-motion:reduce){#san-pham .anh img,.bh img{transition:none}}