/* CK AI Aesthetic Basic Course */
:root{--ink:#23201E;--muted:#625B56;--line:#E4DED6;--paper:#F7F4EF;--card:#FFFFFF;--accent:#6B55A3;--accent-d:#4F3D82;--tint:#EEE9F7;--ok:#E6F1E8;--okline:#9CC3A5;--warn:#FBEDEA;--warnline:#E7B5AB}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ckc{margin:0;background:var(--paper);color:var(--ink);font:17px/1.75 'IBM Plex Sans Thai',system-ui,sans-serif}
.ckc a{color:var(--accent)}.ckc a:hover{color:var(--accent-d)}
.ckc img,.ckc video{max-width:100%;display:block}
.ckc h1,.ckc h2,.ckc h3{font-family:'Noto Serif Thai',serif;line-height:1.35;margin:0 0 .5em}
.ckc h1{font-size:clamp(30px,5vw,46px)}
.ckc h2{font-size:clamp(24px,3.4vw,30px);margin-top:1.8em}
.ckc h3{font-size:21px;margin-top:1.4em}
.ckc h4{font-size:18px;margin:0 0 .3em}
.ckc p{margin:0 0 1em}
.ckc code{background:var(--tint);padding:1px 6px;border-radius:5px;font-size:.9em;word-break:break-word}
.muted{color:var(--muted)}.small{font-size:14px}.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kicker{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:8px}
.lead{font-size:19px;color:#45403C}

.top{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding:14px max(16px,calc((100% - 1180px)/2));border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.brand{font-family:'Noto Serif Thai',serif;font-weight:700;font-size:20px;color:var(--ink)!important;text-decoration:none}
.top nav{display:flex;gap:18px;font-size:15px}.top nav a{color:var(--ink);text-decoration:none;padding:8px 0}
.wrap{max-width:1180px;margin:0 auto;padding:36px 16px 64px}
.foot{text-align:center;color:var(--muted);font-size:14px;padding:28px 16px;border-top:1px solid var(--line)}

.btn{display:inline-block;background:var(--accent);color:#fff!important;text-decoration:none;padding:12px 26px;border-radius:999px;font-weight:600;border:0;font:inherit;font-weight:600;cursor:pointer;min-height:44px}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:transparent;color:var(--ink)!important;border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff!important}
.btn.small{padding:8px 18px;font-size:15px;min-height:40px}
.pill{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:1px 12px;font-size:13px;font-weight:600;white-space:nowrap}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.card.ok{background:var(--ok);border-color:var(--okline)}
.card.warn{background:var(--warn);border-color:var(--warnline)}
.note{background:var(--tint);border-radius:14px;padding:16px 20px;margin:18px 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;margin:18px 0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.grid2.tight,.grid3.tight{gap:8px;margin:8px 0}
.grid3.tight img{aspect-ratio:1;object-fit:cover;border-radius:10px;background:#fff}
.grid3.tight img.contain{object-fit:contain}
.align-center{align-items:center}
.fig{margin:0}.fig img{width:100%;border-radius:12px;border:1px solid var(--line);background:#fff}
.grid3 .fig img{aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
.fig img.crop-top{aspect-ratio:4/3;object-fit:cover;object-position:top}
.fig figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.fig.wide{margin:18px 0}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:12px}
.thumb.contain{object-fit:contain;background:#fafafa}
.tbl-wrap{overflow-x:auto;margin:14px 0}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border-radius:12px;overflow:hidden}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl th{background:var(--tint);color:var(--accent-d)}
.tbl td:first-child{font-weight:600}
ol.steps{list-style:none;padding:0;margin:14px 0;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:0 0 14px 48px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
ol.steps li b{display:block}
ul.checks{list-style:none;padding:0;margin:10px 0}
ul.checks li{position:relative;padding-left:28px;margin-bottom:8px}
ul.checks li::before{content:"";position:absolute;left:4px;top:9px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
ul.checks.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 18px}

pre.prompt{position:relative;background:#211C29;color:#EFE9F7;border-radius:14px;padding:18px 18px 18px;margin:12px 0;font:13.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
pre.prompt.has-copy{padding-top:52px}
.copy{position:absolute;top:10px;right:10px;background:#3A3346;color:#fff;border:0;border-radius:999px;padding:6px 14px;font:600 13px 'IBM Plex Sans Thai',sans-serif;cursor:pointer;min-height:32px}
.copy:hover{background:var(--accent)}
.elements{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;margin:16px 0}
.elements pre.prompt{font-size:12.5px;margin-bottom:0}
details.lib{background:#fff;border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:0 18px}
details.lib summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none}
details.lib summary::-webkit-details-marker{display:none}
details.lib summary::after{content:"＋";float:right;color:var(--accent)}
details.lib[open] summary::after{content:"－"}
details.lib .code{display:inline-block;background:var(--tint);color:var(--accent-d);border-radius:6px;padding:0 8px;margin-right:6px;font-size:14px}
details.lib pre.prompt{margin-bottom:16px}

.video-row{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:24px;align-items:start;margin:20px 0}
.video-row video{width:100%;border-radius:16px;background:#000;aspect-ratio:9/16}
.video-row video.landscape{aspect-ratio:16/9}
.video-row:has(video.landscape){grid-template-columns:minmax(0,1.3fr) 1fr}

/* sales */
.hero{display:grid;grid-template-columns:1.1fr minmax(0,380px);gap:40px;align-items:center}
.hero-video{width:100%;border-radius:20px;aspect-ratio:9/16;background:#000;object-fit:cover}
.price-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:22px 0 10px}
.price-row.center{justify-content:center}
.price{font-family:'Noto Serif Thai',serif;font-size:34px;font-weight:700}
.price del{font-size:20px;color:var(--muted)}
.learn{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:14px}
.learn li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.learn li div{display:flex;flex-direction:column}
.learn .muted{font-size:15px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:12px}
.cta-band{background:var(--ink);color:var(--paper);border-radius:22px;padding:40px 24px;text-align:center;margin-top:48px}
.cta-band h2{margin-top:0;color:var(--paper)}
.cta-band .price{color:var(--paper)}

/* dashboard */
.welcome{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.progress{display:flex;align-items:center;gap:14px;margin:8px 0 20px;max-width:520px}
.progress .bar{flex:1;height:10px;background:var(--tint);border-radius:999px;overflow:hidden}
.progress .bar span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.lesson-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink)!important;transition:border-color .2s}
.lesson-card:hover{border-color:var(--accent)}
.lesson-card .pill{align-self:flex-start}
.lesson-card .muted{font-size:15px}
.lesson-card .status{font-size:14px;font-weight:600;color:var(--muted);margin-top:auto}
.lesson-card.doing .status{color:var(--accent)}
.lesson-card.done{border-color:var(--okline)}
.lesson-card.done .status{color:#2F6B3E}
.groups{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.downloads{padding-left:20px;margin:0}.downloads li{margin-bottom:8px}

/* lesson */
.lesson-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
.side{position:sticky;top:84px;display:flex;flex-direction:column;gap:4px}
.side a{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:10px;font-size:15px;line-height:1.45}
.side a small{display:block;color:var(--muted);font-size:12px}
.side a.active{background:#fff;border:1px solid var(--line)}
.side .back{color:var(--accent);font-weight:600;margin-bottom:6px}
.side .dot{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid #C9C1D9;margin-top:5px}
.side a.done .dot{background:#4E9B62;border-color:#4E9B62}
.side a.active .dot{border-color:var(--accent)}
.lesson{min-width:0}
.exercises{margin-top:40px;border-top:2px solid var(--line);padding-top:8px}
.exercise{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0;transition:border-color .2s,background .2s}
.exercise.is-done{border-color:var(--okline);background:#FAFDF9}
.ex-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.ex-head div{display:flex;flex-direction:column}
.ex-no{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.exercise.is-done .ex-no{background:#4E9B62}
.exercise textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;resize:vertical;background:#FDFCFA}
.exercise textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.ex-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:10px}
.check{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.share-note{background:var(--tint);border-radius:14px;padding:18px 20px;margin-top:20px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:36px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-video{max-width:360px;margin:0 auto}
  .lesson-layout{grid-template-columns:1fr;gap:20px}
  .side{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px}
  .side a{flex:none;max-width:200px}
  .side .back{align-self:center}
  .video-row,.video-row:has(video.landscape){grid-template-columns:1fr}
  .video-row video{max-width:340px}
  .video-row video.landscape{max-width:100%}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}