/* LOO Workplace — Public Website · shared design system
   ground: token จาก app จริง (index.html / Employee_Prototype) · dark default + light */
:root{
  /* LOO Workplace CI v2.0 (2026-06-23 lock) · Sky #43B0F1 · Deep #004AAD */
  --bg:#0a1322; --bg2:#0e1c30; --card:#13233a; --card2:#192b44; --bd:#24374f;
  --t1:#eaf3fb; --t2:#93a8bd; --t3:#647c92;
  --brand:#43B0F1; --brand2:#7cc8f7; --deep:#0a6fd0;
  --grad:linear-gradient(135deg,#43B0F1,#0a6fd0);
  --pos:#2BA372; --warn:#E8A04B; --gold:#f1c40f; --red:#e0524b;
  --shadow:0 14px 44px rgba(4,30,60,.45);
}
[data-theme="light"]{
  --bg:#F5FBF9; --bg2:#ecf4fb; --card:#ffffff; --card2:#f4f9fd; --bd:#dde7f0;
  --t1:#10243A; --t2:#516577; --t3:#8aa0b2;
  --brand:#1f8fd8; --brand2:#0a6fd0; --deep:#004AAD;
  --grad:linear-gradient(135deg,#1f8fd8,#004AAD);
  --shadow:0 12px 38px rgba(0,74,173,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans Thai','Noto Sans Lao',-apple-system,sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap-sm{max-width:560px;margin:0 auto;padding:0 20px}
section{padding:64px 0}
.eyebrow{color:var(--brand2);font-weight:600;font-size:13px;letter-spacing:.5px;margin-bottom:10px}
h2.sec{font-size:28px;font-weight:700;line-height:1.3;margin-bottom:10px}
.sub{color:var(--t2);font-size:15.5px;max-width:620px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:13px 22px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-pri{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(67,176,241,.32)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(67,176,241,.44)}
.btn-gho{background:transparent;color:var(--t1);border:1px solid var(--bd)}
.btn-gho:hover{border-color:var(--brand)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-block{width:100%;justify-content:center}

/* header / nav */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
nav{display:flex;align-items:center;gap:18px;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.logo img{height:30px;width:auto;display:block}
.logo .lg-light{display:none}
.logo .lg-dark{display:block}
[data-theme="light"] .logo .lg-dark{display:none}
[data-theme="light"] .logo .lg-light{display:block}
footer .logo img{height:26px}
.navlinks{display:flex;gap:22px;margin-left:auto;font-size:14.5px;color:var(--t2);font-weight:500}
.navlinks a:hover,.navlinks a.on{color:var(--t1)}
.navact{display:flex;gap:10px;align-items:center}
.icbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--bd);background:transparent;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:.15s}
.icbtn:hover{color:var(--t1);border-color:var(--brand)}
.langsel{height:38px;border-radius:10px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:inherit;font-size:13.5px;font-weight:600;padding:0 8px;cursor:pointer;transition:.15s}
.langsel:hover{color:var(--t1);border-color:var(--brand)}
.langsel option{background:var(--card);color:var(--t1)}
.navtoggle{display:none}

/* page head */
.page-head{padding:48px 0 8px;text-align:center}
.page-head h1{font-size:34px;font-weight:700;letter-spacing:-.3px}
.page-head p{color:var(--t2);font-size:16px;margin:12px auto 0;max-width:560px}

/* generic card */
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.card-soft{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:20px}

/* forms */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:500;color:var(--t2);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--bd);border-radius:11px;padding:13px 14px;font-family:inherit;font-size:15px;color:var(--t1);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(67,176,241,.20)}
.field .hint{font-size:12px;color:var(--t3);margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* chip-select (radio) */
.chips-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chips-pick label{display:block;border:1px solid var(--bd);background:var(--bg2);border-radius:13px;padding:14px;cursor:pointer;transition:.15s}
.chips-pick label:hover{border-color:var(--brand)}
.chips-pick input{position:absolute;opacity:0;pointer-events:none}
.chips-pick input:checked+.pk{color:var(--brand2)}
.chips-pick label:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--bg2))}
.chips-pick .pk b{display:block;font-size:15px;font-weight:600}
.chips-pick .pk span{font-size:12px;color:var(--t3)}
.chips-pick .pk em{font-style:normal;font-size:13px;color:var(--brand2);font-weight:600}

/* note / banners */
.note{display:flex;gap:9px;align-items:flex-start;background:var(--card2);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;font-size:13.5px;color:var(--t2);margin:16px 0}
.note i{color:var(--brand2);font-size:18px;flex:none;margin-top:1px}
.note.warn i{color:var(--warn)}
.draftnote{background:var(--card2);border:1px dashed var(--bd);border-radius:10px;padding:9px 14px;font-size:12.5px;color:var(--t3);margin-top:18px;display:inline-flex;gap:7px;align-items:center}

/* footer */
footer{border-top:1px solid var(--bd);padding:38px 0;color:var(--t3);font-size:13.5px;margin-top:40px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
.foot a:hover{color:var(--t1)}
/* footer — legal/policy row */
.foot-legal{margin-top:20px;padding-top:18px;border-top:1px solid var(--bd)}
.foot-legal-links{display:flex;flex-wrap:wrap;gap:18px}
.foot-legal a{display:inline-flex;align-items:center;gap:6px;color:var(--t3);font-size:13px;transition:.15s}
.foot-legal a:hover{color:var(--brand2)}
.foot-legal a i{font-size:15px;color:var(--t3);transition:.15s}
.foot-legal a:hover i{color:var(--brand2)}
.foot-legal-all{font-weight:600}
@media(max-width:860px){
  .foot-legal{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-legal-links{gap:14px}
}

/* scroll-reveal (minimal interactive · subtle fade-up) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:860px){
  .navtoggle{display:flex}
  .navlinks{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;gap:0;margin-left:0;background:var(--bg);border-bottom:1px solid var(--bd);padding:6px 20px 12px;box-shadow:var(--shadow)}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 2px;border-bottom:1px solid var(--bd);font-size:15px}
  .navlinks a:last-child{border-bottom:none}
  .row2,.chips-pick{grid-template-columns:1fr}
  .page-head h1{font-size:27px}
  h2.sec{font-size:23px}
  section{padding:48px 0}
}