/* Dex 10/10: trang chữ kiểu essay Penta (bố cục), màu + chữ Lê Mai (lemai.css). */
.es{--cot:720px;--le-es:20px;padding-bottom:clamp(64px,10vh,120px)}
@media (min-width:768px){.es{--le-es:40px}}
.es-bc{max-width:1440px;margin:0 auto;padding:16px var(--le) 0;font-size:var(--c12);color:var(--chu-nhat);display:flex;gap:8px;flex-wrap:wrap}
.es-bc a{color:inherit}

/* đầu trang: căn giữa */
.es-dau{text-align:center;padding:clamp(56px,10vh,120px) var(--le-es) clamp(40px,6vh,72px);max-width:1040px;margin:0 auto}
.es-tren{font-size:var(--c12);letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhat);margin:0 0 24px}
.es-ten{font-family:var(--tieude);font-weight:400;font-size:clamp(40px,6vw,72px);line-height:1.05;letter-spacing:-.01em;margin:0}
.es-ten__ja{display:block;font-family:var(--sans);font-size:var(--c16);letter-spacing:.12em;color:var(--chu-nhat);margin-top:16px}
.es-dek{font-family:var(--tieude);font-style:italic;font-size:clamp(20px,2vw,26px);line-height:1.4;color:var(--chu-nhat);max-width:40ch;margin:20px auto 0;text-wrap:balance}

/* ghi chú: khối nền ô, vạch rêu bên trái */
.es-memo{max-width:var(--cot);margin:0 auto clamp(48px,7vh,80px);background:var(--o);border-left:3px solid var(--reu);padding:clamp(28px,4vw,48px) clamp(24px,4vw,52px);display:flex;flex-direction:column;gap:16px;box-sizing:border-box}
@media (max-width:767px){.es-memo{margin-left:var(--le-es);margin-right:var(--le-es)}}
.es-memo p{margin:0;font-size:var(--c16);line-height:1.75}
.es-memo .es-memo__nhan{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhat)}
.es-memo .es-memo__mo{font-family:var(--tieude);font-size:clamp(22px,1.9vw,26px);line-height:1.4}
.es-memo .es-memo__ket{font-family:var(--tieude);font-style:italic;font-size:clamp(19px,1.5vw,22px);line-height:1.5;color:var(--reu);border-top:1px solid var(--vien);padding-top:16px;margin-top:8px}

/* ảnh lớn tràn khung */
.es-anh{margin:0 auto clamp(48px,7vh,88px);max-width:1040px;padding:0 var(--le-es)}
.es-anh img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--kem)}
.es-anh figcaption{font-size:11px;letter-spacing:.04em;color:var(--chu-nhat);text-align:right;margin-top:10px}

/* thân bài: 1 cột hẹp */
.es-than{max-width:var(--cot);margin:0 auto;padding:0 var(--le-es);box-sizing:content-box}
.es-than h2{font-family:var(--tieude);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.2;margin:clamp(40px,6vh,64px) 0 16px}
.es-than h2:first-child{margin-top:0}
.es-than h3{font-size:var(--c16);font-weight:700;margin:28px 0 8px}
.es-than p,.es-than li{font-size:clamp(16px,1.15vw,18px);line-height:1.75;margin:0 0 20px}
.es-than ul,.es-than ol{padding-left:1.2em;margin:0 0 20px}
.es-than a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--vien)}
.es-than table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:var(--c14)}
.es-than th,.es-than td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--vien);vertical-align:top}

/* câu cuối: kẻ trên dưới, căn giữa */
.es-hoi{max-width:var(--cot);margin:clamp(56px,8vh,96px) auto;text-align:center;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien);padding:clamp(32px,5vw,56px) clamp(8px,3vw,40px);box-sizing:border-box}
@media (max-width:767px){.es-hoi{margin-left:var(--le-es);margin-right:var(--le-es)}}
.es-hoi p{margin:0}
.es-hoi__nhan{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhat);margin-bottom:16px!important}
.es-hoi__mo{font-family:var(--tieude);font-style:italic;font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--chu-nhat);margin-bottom:12px!important}
.es-hoi__chu{font-family:var(--tieude);font-size:clamp(24px,2.6vw,34px);line-height:1.35}

/* đọc thêm: 3 thẻ */
.es-lien{max-width:1040px;margin:0 auto clamp(56px,8vh,96px);padding:0 var(--le-es)}
.es-lien__nhan{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhat);text-align:center;margin:0 0 20px}
.es-lien__luoi{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:720px){.es-lien__luoi{grid-template-columns:repeat(3,1fr)}}
.es-lien__the{display:flex;flex-direction:column;gap:12px;color:var(--chu);text-decoration:none}
.es-lien__the img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--kem);display:block}
.es-lien__ten{font-family:var(--tieude);font-size:20px;line-height:1.3}
.es-lien__the:hover .es-lien__ten{text-decoration:underline;text-underline-offset:3px}

/* nút cuối trang */
.es-cuoi{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;padding:0 var(--le-es)}
.es-cuoi__nut{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--chu);padding:10px 0;border-bottom:1px solid var(--chu);text-decoration:none;transition:letter-spacing .35s ease}
.es-cuoi__nut:hover{letter-spacing:.24em}
.es-cuoi__nut--phu{color:var(--chu-nhat);border-bottom-color:var(--chu-nhat)}

/* danh sách nhãn trái / giá trị phải (liên hệ, bảng thông tin) */
.es-ds{margin:0 0 24px;border-top:1px solid var(--vien)}
.es-ds>div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--vien)}
.es-ds dt{font-size:var(--c14);font-weight:600}
.es-ds dd{margin:0;font-size:var(--c16)}
@media (max-width:480px){.es-ds>div{grid-template-columns:1fr;gap:2px}}
.es-cuoi{margin-top:clamp(48px,7vh,80px)}

/* các bước có số */
.es-buoc h2{display:flex;align-items:baseline;gap:16px}
.es-so{font-family:var(--sans);font-size:var(--c12);letter-spacing:.14em;color:var(--chu-nhat);flex:none}
.es-than ul{list-style:disc}.es-than ol{list-style:decimal}
.es-than li{margin:0 0 8px;padding-left:4px}
.es-than ul li::marker{color:var(--chu-nhat)}
.es-ds>div{grid-template-columns:200px 1fr}
.es-ds--muc dt a{font-family:var(--tieude);font-size:20px;font-weight:400;text-decoration:none}
.es-ds--muc dt a:hover{text-decoration:underline;text-underline-offset:3px}
.es-ds--muc>div{grid-template-columns:260px 1fr;padding:18px 0}
/* điện thoại: nhãn trên, giá trị dưới; chữ dài (email) được ngắt */
.es-ds dd,.es-ds dt{min-width:0;overflow-wrap:anywhere}
@media (max-width:600px){.es-ds>div,.es-ds--muc>div{grid-template-columns:1fr;gap:4px}}
/* 4 thẻ đọc thêm thì xếp 4 cột */
@media (min-width:720px){.es-lien__luoi:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}}
.es-hoi a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--vien)}
.es-than + .es-than{margin-top:clamp(40px,6vh,64px)}

/* Dex 10/10: trang Bán sỉ — tab dòng hàng, thẻ mỗi mùi, chọn cỡ */
.si{max-width:1040px;margin:0 auto;padding:0 var(--le-es)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.si-dau{position:sticky;top:var(--hd-h,72px);z-index:5;background:var(--nen);padding:12px 0;border-bottom:1px solid var(--vien);margin-bottom:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.si-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.si-tabs::-webkit-scrollbar{display:none}
.si-tab{flex:none;border:1px solid var(--chu);background:none;color:var(--chu);padding:6px 14px;font:inherit;font-size:var(--c14);cursor:pointer;white-space:nowrap}
.si-tab span{color:var(--chu-nhat);margin-left:4px}
.si-tab.on{background:var(--reu);border-color:var(--reu);color:var(--kem)}.si-tab.on span{color:inherit;opacity:.7}
.si-tim{flex:0 1 260px}
.si-tim input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--chu);background:none;padding:8px 0;font:inherit;font-size:var(--c14);color:var(--chu);outline:none}
.si-chon{display:flex;flex-wrap:wrap;gap:16px 32px;margin-bottom:24px}
.si-chon__nhan{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhat);margin:0 0 8px}
.si-chon__hang{display:flex;flex-wrap:wrap;gap:6px}
.si-chon__nut{border:1px solid var(--vien);background:none;font:inherit;font-size:var(--c14);padding:7px 14px;cursor:pointer;color:var(--chu);display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.si-chon__nut small{font-size:11px;color:var(--chu-nhat)}
.si-chon__nut.on{border-color:var(--chu);background:var(--chu);color:var(--kem)}.si-chon__nut.on small{color:inherit;opacity:.7}
.si-chon__ghi{flex-basis:100%;margin:0;font-size:var(--c14);color:var(--chu-nhat)}
.si-chon__ghi b{color:var(--chu)}
.si-cot{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhat);padding:0 0 8px;border-bottom:1px solid var(--chu)}
.si-ds{list-style:none;margin:0;padding:0;columns:1}
@media (min-width:900px){.si-ds{columns:2;column-gap:40px}}
.si-dong{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--vien);break-inside:avoid}
.si-dong[hidden]{display:none}
.si-dong__ten{display:flex;align-items:center;gap:12px;color:var(--chu);text-decoration:none;min-width:0}
.si-dong__ten img{width:44px;height:44px;object-fit:cover;flex:none;background:var(--kem)}
.si-dong__ten b{display:block;font-family:var(--tieude);font-weight:400;font-size:17px;line-height:1.25}
.si-dong__ten small{display:block;font-size:var(--c12);color:var(--chu-nhat)}
.si-dong__ten:hover b{text-decoration:underline;text-underline-offset:3px}
.si-dong__gia{flex:none;font-weight:600;font-variant-numeric:tabular-nums;font-size:var(--c16)}
.si-dong__gia--lh{font-weight:400;color:var(--chu-nhat);font-size:var(--c14)}
.si-trong{text-align:center;color:var(--chu-nhat);padding:32px 0}
.si-dk{padding:0;margin-top:clamp(40px,6vh,64px)}
@media (max-width:899px){.si-dau{position:static}}
/* tinh dầu: nhóm theo loại dầu, dòng con theo xuất xứ */
.si-ds--nhom{columns:1}
@media (min-width:900px){.si-ds--nhom{columns:2}}
.si-dong--nhom{display:block}
.si-dong__trong{width:44px;height:44px;flex:none;background:var(--kem);display:block}
.si-dong__nhan{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--chu-nhat);border:1px solid var(--vien);padding:2px 6px;margin-left:auto;flex:none}
span.si-dong__ten{flex:1}
.si-con{list-style:none;margin:8px 0 0 56px;padding:0}
.si-con li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:var(--c14);border-top:1px dashed var(--vien)}
.si-con small{color:var(--chu-nhat);margin-left:4px;font-variant-numeric:tabular-nums}
.si-con .si-dong__gia{font-size:var(--c14)}
.si-ds--it{columns:1!important;max-width:720px}.si-ds--it + .si-dk{max-width:720px}
.si-pn:has(.si-ds--it) .si-cot{max-width:720px}
/* Dex 10/10: tab dòng hàng xuống hàng, không kéo ngang; ô tìm nằm hàng riêng */
.si-tabs{flex-wrap:wrap;overflow:visible;flex-basis:100%}
.si-tim{flex:0 1 320px}
/* Dex 10/10: điện thoại — tab dòng hàng thành lưới 2 cột đều nhau, số căn phải */
@media (max-width:640px){
  .si-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .si-tab{display:flex;justify-content:space-between;align-items:center;gap:6px;text-align:left;white-space:normal;line-height:1.25;padding:9px 10px;font-size:13px}
  .si-tab span{margin-left:0;flex:none}
  .si-tim{flex-basis:100%}
}
@media (max-width:640px){
  .si-chon{gap:16px}
  .si-chon__nhom{flex-basis:100%}
  .si-chon__hang{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
  .si-chon__nut{align-items:center;text-align:center;padding:8px 6px}
}
@media (max-width:640px){.si-chon__hang{grid-template-columns:1fr 1fr}}
