@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap');

:root {
  --ink:#103a35; --muted:#42625d; --brand:#086b51; --line:#cfe7df;
  --paper:#f5fcf9; --soft:#e0f8ee; --hero-text:#103a35;
  --sapphire-ink:#086b51; --silver-soft:#ebf8fe;
  --gloss:linear-gradient(110deg,#087457,#075e55);
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 "Bai Jamjuree",system-ui,sans-serif}
a {color:inherit; text-underline-offset:.22em}
button,input,select {font:inherit}
button {cursor:pointer}
:focus-visible {outline:3px solid #086b51; outline-offset:3px}
[hidden] {display:none!important}
.sr-only {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.wrap {width:min(1160px,calc(100% - 64px)); margin-inline:auto}
header {background:linear-gradient(100deg,#fff 40%,#f7fafc); border-bottom:1px solid var(--line)}
.nav,.footer {display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:18px}
.brand {display:inline-flex; align-items:center; gap:6px; text-decoration:none; font:700 22px "Bai Jamjuree",system-ui,sans-serif; white-space:nowrap}
.brand b {color:var(--brand)}
.logo {display:grid; place-items:center; background:var(--gloss); box-shadow:inset 0 1px 0 #ffffff35,0 3px 9px #086b512e; color:white; width:35px; height:35px; border-radius:10px; margin-right:5px; font-size:19px}
nav {display:flex; gap:26px; align-items:center}
nav a {text-decoration:none; font-weight:600}
nav a:hover,.card a:hover {color:var(--brand)}
.nav-active {background:linear-gradient(112deg,var(--soft),var(--silver-soft)); color:var(--brand); padding:6px 12px; border-radius:8px}
.hero {
  width:min(1160px,calc(100% - 64px)); margin:22px auto 0; border-radius:28px;
  background:
    radial-gradient(ellipse at 90% 0%,#ddff89 0%,transparent 48%),
    radial-gradient(ellipse at 100% 100%,#acf0ff 0%,transparent 54%),
    linear-gradient(120deg,#f2fff8,#b1f4d9 68%,#9eeed4);
  border:1px solid #bcebd9; color:var(--hero-text);
  box-shadow:inset 0 1px 0 #fff,0 12px 28px #086b511c;
}
.hero .wrap {width:auto; margin:0}
.hero .eyebrow {color:#086b51}
.hero .primary {background:var(--gloss); color:white; box-shadow:0 5px 12px #086b5133}
.hero .primary:hover {background:#054c3d}
.hero a:focus-visible {outline-color:#086b51}
.hero-layout {padding:34px 36px 22px}
.hero-intro {max-width:700px}
.hero-actions {display:flex; flex-wrap:wrap; gap:10px}
.hero-secondary {background:#ffffffcc; border-color:#82bba9; color:#086b51}
.hero-secondary:hover {background:#fff}
.hero-stats {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:26px 0 0}
.hero-stats > div {
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto;
  column-gap:10px; align-items:center; padding:10px 12px; border:1px solid #ffffffc9;
  border-radius:12px; background:linear-gradient(145deg,#fff,#ffffffa6);
  box-shadow:inset 0 1px 0 #f7fafc24;
}
.stat-icon {
  grid-row:span 2; display:grid; place-items:center; width:34px; height:34px;
  border-radius:9px; background:linear-gradient(145deg,#d6f9ff,#a4eaff);
  color:#102247; font-size:19px; font-weight:700;
}
.hero-stats > div:nth-child(2) .stat-icon {background:linear-gradient(145deg,#c5faec,#86e4ca); color:#0b564a}
.hero-stats > div:nth-child(3) .stat-icon {background:linear-gradient(145deg,#efffbe,#d4f48b); color:#3d5515}
.hero-stats > div:nth-child(4) .stat-icon {background:linear-gradient(145deg,#fff2cd,#ffda90); color:#734409}
.hero-stats dt {color:#355e55; font-size:13px; line-height:1.4}
.hero-stats dd {margin:0; font-size:24px; font-weight:700; line-height:1.15}
.eyebrow {color:var(--brand); font-weight:700; font-size:13px; letter-spacing:.11em; margin:0 0 10px}
h1,h2,h3 {line-height:1.28; margin:0; overflow-wrap:anywhere}
h1 {font-size:clamp(32px,4.2vw,51px); letter-spacing:-.025em}
.hero p:not(.eyebrow),.detail-intro p {max-width:33em; color:var(--muted); font-size:18px; margin:14px 0 22px}
.hero p:not(.eyebrow) {color:#305650}
.button {border:1px solid transparent; border-radius:10px; padding:9px 16px; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-weight:700; text-decoration:none}
.primary {background:var(--gloss); color:white; box-shadow:inset 0 1px 0 #ffffff30,0 4px 12px #086b5128}
.primary:hover {background:linear-gradient(108deg,#07604a,#064639)}
.secondary {background:white; border-color:#ccdeed; color:var(--brand)}
.certificate {background:#fffcf4; border:5px double #b89958; color:#5e4822; min-height:129px; padding:13px; display:grid; text-align:center; place-items:center; align-content:center; gap:3px; overflow-wrap:anywhere}
.certificate strong {font-size:clamp(15px,2vw,23px)}
.certificate span {font-size:13px}
.certificate b {font-size:17px; color:#84692f}
.catalog {padding-block:27px 60px}
.catalog-controls {background:#fcfdff; border:1px solid var(--line); border-radius:16px; padding:13px; box-shadow:0 4px 12px #086b510b}
.section-head h2 {font-size:clamp(27px,3.5vw,36px)}
.section-head p,.count,.hint {color:var(--muted)}
.section-head p {margin:5px 0 17px}
.searchbar {display:grid; grid-template-columns:1fr 165px; gap:12px}
.search-field {display:flex; align-items:center; gap:10px; padding-left:12px; background:white; border:1px solid var(--line); border-radius:10px}
.search-field span {font-size:25px; color:var(--brand)}
.search-field input {border:0; background:transparent; min-width:0; width:100%; padding:11px 12px 11px 0}
select,.demo-form input {padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); min-width:0}
.filter-row {margin-top:11px}
.filters {display:flex; flex-wrap:wrap; gap:7px}
.filters button {border:1px solid var(--line); background:white; border-radius:99px; color:var(--ink); padding:5px 13px}
.filters button[aria-pressed=true] {background:var(--gloss); color:white; border-color:var(--brand)}
.count {white-space:nowrap; margin:13px 0 10px; font-size:14px}
.grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.card,.panel {background:#fcfdff}
.card {border:1px solid var(--line); border-radius:15px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 12px #086b510a}
.cover,.card h3 a {text-decoration:none}
.card[data-category="school"] {--category-stripe:linear-gradient(100deg,#2464e8,#19b7ea)}
.card[data-category="retail"] {--category-stripe:linear-gradient(100deg,#06855f,#a5da33)}
.card[data-category="web"] {--category-stripe:linear-gradient(100deg,#6742df,#bd55ef)}
.card[data-category="creative"] {--category-stripe:linear-gradient(100deg,#f25483,#ff9b3e)}
.card .cover::before {
  content:"";
  display:block;
  height:5px;
  background:var(--category-stripe,var(--gloss));
}

.art {--cover:#e1eefb; --accent:#254b76; position:relative; display:grid; place-items:center; min-height:104px; overflow:hidden; background:linear-gradient(125deg,#fff4,var(--cover)),var(--cover); color:var(--accent)}
.art span {z-index:1; border:1px solid currentColor; border-radius:12px; background:#fff8; padding:7px 12px; font:700 17px "Bai Jamjuree",system-ui,sans-serif}
.art i {position:absolute; border:1px solid currentColor; width:170px; height:110px; border-radius:22px; opacity:.2; transform:rotate(-23deg) translate(12px,9px)}
.art i:nth-child(3) {transform:rotate(-23deg) translate(27px,19px)}
.art i:nth-child(4) {transform:rotate(-23deg) translate(42px,29px)}
.art.certificate,.art.keela {--cover:#f9e9c7; --accent:#76521e; border:0}
.art.parent-meeting,.art.exam {--cover:#e0ebff; --accent:#32548d}
.art.photo-archive,.art.pos,.art.idea-photo {--cover:#d9f4e8; --accent:#216448}
.card-body {padding:15px; display:flex; flex-direction:column; flex:1}
.meta,.card-links,.actions {display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.meta {font-size:13px; color:var(--muted)}
.badge {background:var(--soft); color:#214f78; border-radius:99px; padding:2px 8px; font-size:12px; font-weight:700}
.badge.live {background:#def4e9; color:#16583c}
.badge.plan {background:#fff0d9; color:#795215}
.card h3 {font-size:20px; margin:9px 0 4px}
.card p {margin:0 0 13px; color:var(--muted); font-size:15px}
.card-links {margin-top:auto; border-top:1px solid var(--line); padding-top:11px; justify-content:space-between; font-size:14px; font-weight:700}
.card-links a {text-decoration:none; color:var(--brand)}
.card-links .demo-link {color:var(--sapphire-ink)}
.empty {padding:20px; border:1px dashed var(--line); border-radius:12px; text-align:center}
footer {border-top:1px solid var(--line); color:var(--muted); background:white}
.footer {font-size:13px}
.footer .brand {font-size:16px}
.footer .logo {width:28px; height:28px; font-size:15px}
.detail-page {padding-block:28px 52px; min-height:calc(100vh - 145px)}
.breadcrumb {color:var(--muted); margin-bottom:20px}
.detail-intro {display:grid; grid-template-columns:2fr 1fr; align-items:center; gap:25px; padding:25px; background:linear-gradient(120deg,var(--soft),var(--silver-soft)); border-radius:18px; margin-bottom:20px}
.detail-intro h1 {font-size:clamp(27px,4.7vw,48px); margin-top:8px}
.detail-intro .art {border-radius:13px; min-height:160px}
.detail-columns {display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:16px}
.panel {border:1px solid var(--line); border-radius:15px; padding:20px}
.panel h2,.order-list h2 {font-size:23px}
.panel p,.panel li,.order-list p,.order-list li {color:var(--muted)}
.demo {scroll-margin:20px}
.demo-form {display:flex; flex-wrap:wrap; align-items:end; gap:12px}
.demo-form label {display:grid; gap:4px}
.demo-certificate,.demo-result {margin-top:16px}
.demo-certificate {min-height:155px}
.photo-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px}
.photo-grid label {display:grid; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.photo-grid label > span:last-child {padding:7px}
.photo {display:grid; place-items:center; min-height:80px; font-size:30px; background:#e2edfc; color:#3e5a89}
.photo.activity {background:#e9def9; color:#634a91}
.order-list {max-width:740px; padding-left:26px}
.order-list > li {padding:14px 0; border-bottom:1px solid var(--line)}
.order-list p {margin:5px 0}
@media(max-width:820px) {
  .hero-layout {padding:28px 26px 20px}
  .hero-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px) {
  .wrap,.hero {width:calc(100% - 30px)}
  .nav {gap:9px; flex-wrap:wrap; padding-block:11px}
  nav {gap:12px; font-size:14px}
  .brand {font-size:17px}
  .logo {width:29px; height:29px}
  .grid,.detail-intro,.detail-columns {grid-template-columns:1fr}
  .hero-layout {padding:23px 16px 16px}
  .hero-stats {gap:7px; margin-top:20px}
  .hero-stats > div {padding:8px; column-gap:7px}
  .stat-icon {width:27px; height:27px; font-size:16px}
  .hero {margin-top:14px; border-radius:18px}
  .detail-intro .art {min-height:85px}
  .searchbar {grid-template-columns:1fr}
  .searchbar select {width:100%}
  .photo-grid {grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}}

.admin-toolbar {margin:18px 0}
.admin-panel {max-width:680px; margin:18px 0}
.admin-form {display:grid; gap:13px; margin-top:14px}
.admin-form label {display:grid; gap:4px; font-weight:600}
.admin-form input:not([type=checkbox]),.admin-form textarea {width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); font:inherit; font-weight:400}
.admin-form textarea {resize:vertical}
.admin-form .admin-check {display:flex; align-items:center}
.admin-form > button {justify-self:start}
.admin-error {padding:10px 14px; background:#fff0ef; color:#8d2525; border-radius:8px}
.admin-table {overflow-x:auto}
.admin-table table {width:100%; min-width:620px; border-collapse:collapse; text-align:left}
.admin-table caption {text-align:left; font-size:21px; font-weight:700; padding-bottom:8px}
.admin-table td,.admin-table th {padding:9px; border-bottom:1px solid var(--line)}

.detail-page > .demo {margin-top:16px}