/* chichle.com — bộ màu & chữ dùng chung (sau dán vào Astra > Custom CSS) */
:root{
  --nau:#4A2418; --son:#B3261E; --son-dam:#8E1C16; --dong:#C8963E;
  --kem:#F7F0E3; --kem-dam:#EFE3CC; --chu:#2B1A14; --xam:#6B5A50; --trang:#fff;
  --bo:14px; --bong:0 10px 30px rgba(74,36,24,.12);
}
*{box-sizing:border-box}
body{margin:0;background:var(--kem);color:var(--chu);font:17px/1.65 "Be Vietnam Pro",system-ui,sans-serif}
h1,h2,h3{font-family:"Lora",Georgia,serif;line-height:1.25;color:var(--nau);margin:0 0 .5em}
h1{font-size:clamp(30px,5vw,52px)} h2{font-size:clamp(26px,3.6vw,38px)} h3{font-size:21px}
a{color:var(--son)} img{max-width:100%;display:block}
.cl-wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.cl-sec{padding:72px 0} .cl-sec.toi{background:var(--nau);color:#F3E6D3} .cl-sec.toi h2,.cl-sec.toi h3{color:#fff}
.cl-sec.dam{background:var(--kem-dam)}
.cl-nhan{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--son);font-weight:700;margin-bottom:10px}
.toi .cl-nhan{color:var(--dong)}
.cl-dan{max-width:720px;color:var(--xam);font-size:18px} .toi .cl-dan{color:#E3D2BC}
.cl-nut{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--son);transition:.2s}
.cl-nut.chinh{background:var(--son);color:#fff} .cl-nut.chinh:hover{background:var(--son-dam);border-color:var(--son-dam)}
.cl-nut.phu{color:var(--son);background:transparent} .cl-nut.phu:hover{background:var(--son);color:#fff}
.toi .cl-nut.phu{color:#fff;border-color:var(--dong)}
.cl-luoi{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cl-the{background:var(--trang);border-radius:var(--bo);padding:26px;box-shadow:var(--bong);border-top:4px solid var(--dong)}
.toi .cl-the{background:#5A2E20;box-shadow:none;color:#F3E6D3}
.cl-so{font-family:"Lora",serif;font-size:40px;color:var(--son);font-weight:700;line-height:1}
.cl-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.cl-video img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:.2s}
.cl-video:hover img{opacity:1}
.cl-video::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--son) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/30px no-repeat;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cl-video.dangphat::after{display:none} .cl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cl-tenvid{font-size:15px;font-weight:600;margin:10px 2px 0;line-height:1.4}
.cl-canh{background:#FFF7E8;border-left:5px solid var(--dong);padding:16px 20px;border-radius:8px;color:#5a4636;font-size:15px}
details.cl-hoi{background:#fff;border-radius:10px;padding:16px 20px;margin-bottom:12px;box-shadow:var(--bong)}
details.cl-hoi summary{font-weight:700;cursor:pointer;color:var(--nau)}
.cl-nutnoi{position:fixed;right:16px;bottom:16px;z-index:99;display:flex;flex-direction:column;gap:10px}
.cl-nutnoi a{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:13px}
.cl-nutnoi .zalo{background:#0068FF} .cl-nutnoi .goi{background:var(--son)}
@media (max-width:700px){.cl-sec{padding:52px 0} body{font-size:16px}}
.cl-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--son);background:#FBE9E4;border-radius:999px;padding:3px 12px;margin-bottom:8px}
.cl-bai{text-decoration:none;color:inherit;display:block;transition:.2s}.cl-bai:hover{transform:translateY(-3px)}.cl-bai b{color:var(--son)}
body.mo-menu .cl-nutnoi{display:none}
.cl-logo,.cl-menu .dk{white-space:nowrap}
@media(max-width:520px){.cl-logo{font-size:20px;gap:8px}.cl-logo b{width:32px;height:32px;font-size:15px}.cl-menu{gap:10px}.cl-menu .dk{padding:9px 14px;font-size:14px}.cl-3gach{width:42px;height:42px}}

/* --- trang khóa học (kiểu Tutor LMS bên xuantran.com) --- */
.cl-dskhoa{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.cl-thekhoa{padding:0;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:.2s}
.cl-thekhoa:hover{transform:translateY(-4px)}
.cl-thekhoa img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cl-thekhoa .nd{padding:22px 24px 26px}
.cl-khoatop{background:var(--nau);color:#F3E6D3;padding:40px 0 36px}
.cl-khoatop h1{color:#fff;margin:6px 0 10px}
.cl-khoatop .lead{max-width:760px;color:#E3D2BC;font-size:18px}
.cl-khoatop .duong{font-size:14px;margin:0}.cl-khoatop .duong a{color:var(--dong)}
.cl-khoatop .meta{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;margin-top:14px;color:#F1D9A8}
.cl-khoachitiet{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start}
.cl-khoachitiet .phai{position:sticky;top:90px}
.cl-thegia .cl-gia b{font-size:30px}
@media(max-width:900px){.cl-khoachitiet{grid-template-columns:1fr}.cl-khoachitiet .phai{position:static;order:-1}}
details.cl-phan{background:#fff;border-radius:12px;margin-bottom:14px;box-shadow:var(--bong);overflow:hidden}
details.cl-phan summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;font-weight:700;color:var(--nau);background:#FBF5EA;list-style:none}
details.cl-phan summary::-webkit-details-marker{display:none}
details.cl-phan summary small{color:var(--xam);font-weight:600;white-space:nowrap}
.cl-baihoc{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid #F0E6D6;font-size:15px}
.cl-baihoc .ic{width:22px;text-align:center;flex:none}
.cl-baihoc .tenbai{flex:1}
.cl-baihoc .cho{font-size:12px;color:var(--xam);background:#F3ECE0;border-radius:999px;padding:3px 10px;white-space:nowrap}
.cl-baihoc .khoa{opacity:.7}
.cl-thett{border-top-color:var(--son)}

/* --- hộp Đặt mua --- */
.cl-hopdat{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.cl-hopdat.mo{display:flex}
.cl-hopdat .nen{position:absolute;inset:0;background:rgba(30,12,8,.55)}
.cl-hopdat .khung{position:relative;width:min(460px,100%);max-height:92vh;overflow:auto;margin:0}
.cl-hopdat .x{position:absolute;top:8px;right:12px;background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--nau)}
body:has(.cl-hopdat.mo) .cl-nutnoi{display:none}
.cl-hdemail{background:#FFF7E8;border-left:4px solid var(--dong);padding:10px 14px;border-radius:8px;font-size:14px;margin:0 0 14px}
.cl-thanhtoan{border:1.5px solid #DCC9AA;border-radius:10px;padding:10px 14px 12px;margin:0 0 14px}
.cl-thanhtoan legend{font-weight:700;color:var(--nau);padding:0 6px;font-size:15px}
.cl-thanhtoan label{display:flex;align-items:center;gap:8px;margin:6px 0;font-weight:600}
.cl-thanhtoan label input{width:auto;display:inline;margin:0}
.cl-thanhtoan .ck{display:none;font-size:14px;background:#fff;border-radius:8px;padding:10px 12px;margin-top:6px}
.cl-thanhtoan:has(input[value^="Chuyển"]:checked) .ck{display:block}