
:root{
 --plh-blue:#075ff7;--plh-blue-hover:#004ed8;--plh-navy:#071c4c;--plh-bg:#f4f8fe;
 --plh-surface:#fff;--plh-border:#cedded;--plh-text:#172d50;--plh-muted:#59708e;
 --plh-success:#08794c;--plh-warning:#906000;--plh-danger:#b52d42;
 --plh-space-1:4px;--plh-space-2:8px;--plh-space-3:12px;--plh-space-4:16px;
 --plh-space-5:20px;--plh-space-6:24px;--plh-space-8:32px;--plh-space-10:40px;--plh-space-12:48px;
 --plh-radius-sm:8px;--plh-radius-md:12px;--plh-radius-lg:20px;--plh-radius-pill:999px;
 --plh-shadow-sm:0 3px 12px #102d5010;--plh-shadow-card:0 12px 32px #102d5014;
 --plh-shadow-floating:0 18px 48px #102d5029;--plh-shadow-modal:0 28px 80px #071c4c40;
 --plh-fast:180ms;--plh-normal:240ms;--plh-slow:380ms;--plh-ease:cubic-bezier(.2,.7,.3,1);
 --plh-z-base:0;--plh-z-sticky:30;--plh-z-dropdown:50;--plh-z-popover:60;--plh-z-toast:70;--plh-z-modal:80;
 --plh-font:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;
 --plh-display:clamp(42px,4.55vw,66px);--plh-h1:32px;--plh-h2:24px;--plh-h3:20px;
 --plh-body:16px;--plh-small:14px;--plh-caption:12px;--plh-button:15px;--plh-label:14px;
}

body[data-plh-ui]{font-family:var(--plh-font);color:var(--plh-text);--blue:var(--plh-blue);--navy:var(--plh-navy);--muted:var(--plh-muted);--line:var(--plh-border)}
[data-plh-ui] *,[data-plh-ui] *:before,[data-plh-ui] *:after{box-sizing:border-box}
body[data-plh-ui]{margin:0}
[data-plh-ui] :where(button,input,textarea,select){font-family:var(--plh-font);font-size:var(--plh-button)}
[data-plh-ui] :where(button,a,input,textarea,summary):focus-visible{outline:3px solid #84b4ff;outline-offset:3px}
[data-plh-ui] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),textarea){border:1px solid var(--plh-border);border-radius:var(--plh-radius-md);background:var(--plh-surface);color:var(--plh-text);padding:12px;min-height:46px;max-width:100%;transition:border-color var(--plh-fast),box-shadow var(--plh-fast)}
[data-plh-ui] :where(input,textarea):focus{border-color:var(--plh-blue);box-shadow:0 0 0 3px #075ff718}
[data-plh-ui] input[type=number]{appearance:textfield}
[data-plh-ui] input::-webkit-inner-spin-button,[data-plh-ui] input::-webkit-outer-spin-button{appearance:none;margin:0}
[data-plh-ui] :where(input,textarea,button):disabled{opacity:.55;cursor:not-allowed}
[data-plh-ui] :where(input,textarea)[readonly]{background:var(--plh-bg)}
[data-plh-ui] [aria-invalid=true]{border-color:var(--plh-danger)!important}
[data-plh-ui] :where(.primary,.primary-action,.submit,.button.primary){background:var(--plh-blue);color:white;border-color:var(--plh-blue)}
[data-plh-ui] :where(button,.button,.button-link){transition:background var(--plh-normal),box-shadow var(--plh-normal),transform var(--plh-fast);border-radius:var(--plh-radius-md)}
[data-plh-ui] :where(button,.button,.button-link):active:not(:disabled){transform:scale(.98)}
[data-plh-ui] :where(.notice,.photo-feedback,.photo-upload-status){border-radius:var(--plh-radius-md);font-size:var(--plh-small)}
[data-plh-ui] :where(.notice.error,[role=alert]){color:var(--plh-danger)}
[data-plh-ui] input[type=checkbox],[data-plh-ui] input[type=radio]{appearance:none;flex:0 0 auto;display:inline-grid;place-content:center;width:22px;height:22px;min-height:22px;margin:0 6px 0 0;padding:0;border:2px solid var(--plh-border);border-radius:6px;vertical-align:middle;background:white;cursor:pointer;transition:background var(--plh-fast),border-color var(--plh-fast)}
[data-plh-ui] input[type=checkbox]:checked,[data-plh-ui] input[type=radio]:checked{background:var(--plh-blue);border-color:var(--plh-blue)}
[data-plh-ui] input[type=checkbox]:checked:after{content:"";width:9px;height:5px;border:2px solid white;border-top:0;border-right:0;transform:rotate(-45deg)}
[data-plh-ui] input[type=radio]{border-radius:50%}
[data-plh-ui] input[type=radio]:checked:after{content:"";width:8px;height:8px;border-radius:50%;background:white}
[data-plh-ui] input[role=switch]{width:42px;border-radius:var(--plh-radius-pill);position:relative}
[data-plh-ui] input[role=switch]:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border:0!important;border-radius:50%;background:var(--plh-muted);transform:none!important;transition:left var(--plh-fast)}
[data-plh-ui] input[role=switch]:checked:after{left:22px;background:white}
[data-plh-ui] .check-label{min-height:44px;align-items:center}
.plh-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.plh-control{position:relative;display:block;min-width:0;width:100%}
[data-plh-ui] .plh-select-trigger{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--plh-border);border-radius:var(--plh-radius-md);background:white;color:var(--plh-text);font-weight:500;text-align:left;cursor:pointer}
.plh-select-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plh-icon{width:20px;height:20px;display:inline-block;flex:0 0 auto;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plh-popup{position:fixed;z-index:var(--plh-z-dropdown);margin:0;box-sizing:border-box;width:320px;max-width:calc(100vw - 24px);max-height:min(440px,calc(100dvh - 24px));overflow:auto;padding:12px;background:var(--plh-surface);color:var(--plh-text);border:1px solid var(--plh-border);border-radius:var(--plh-radius-lg);box-shadow:var(--plh-shadow-floating);animation:plh-enter var(--plh-fast) var(--plh-ease)}
[data-plh-ui] .plh-popup button{font-size:14px;min-height:44px;cursor:pointer}
.plh-options{list-style:none;padding:0;margin:8px 0 0;max-height:260px;overflow:auto}
.plh-option{padding:12px;border-radius:var(--plh-radius-sm);min-height:44px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.plh-option[aria-selected=true]{color:var(--plh-blue);font-weight:700;background:#eaf2ff}
.plh-option.plh-active,.plh-option:hover{background:#dfeaff;outline:2px solid #83b0f7;outline-offset:-2px}
.plh-option[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.plh-popup input{width:100%;margin:0}
.plh-date-wrap{position:relative;display:block}
.plh-date-wrap input{padding-right:48px!important;width:100%}
[data-plh-ui] .plh-calendar-trigger{position:absolute;right:3px;bottom:2px;width:44px;height:44px;border:0;background:transparent;color:var(--plh-blue);cursor:pointer}
.plh-calendar-header,.plh-calendar-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
[data-plh-ui] .plh-popup button{border:1px solid var(--plh-border);background:white;color:var(--plh-navy);border-radius:var(--plh-radius-sm);padding:8px}
.plh-calendar-week,.plh-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.plh-calendar-week span{text-align:center;padding:8px 0;color:var(--plh-muted);font-size:12px}
[data-plh-ui] .plh-calendar-grid button{padding:4px;border:1px solid transparent;min-height:42px;border-radius:8px}
.plh-calendar-grid button[data-outside=true]{color:var(--plh-muted);opacity:.6}
.plh-calendar-grid button[data-today=true]{border-color:var(--plh-blue)}
[data-plh-ui] .plh-calendar-grid button[aria-selected=true]{background:var(--plh-blue);color:white}
.plh-calendar-actions{margin:12px 0 0}
.plh-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plh-time-grid label{display:grid;gap:8px}
[data-plh-ui] dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--plh-border);border-radius:var(--plh-radius-lg);box-shadow:var(--plh-shadow-modal);color:var(--plh-text);background:white;animation:plh-enter var(--plh-normal) var(--plh-ease)}
[data-plh-ui] dialog::backdrop{background:#071c4c70;backdrop-filter:blur(3px)}
.plh-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
[data-plh-ui] .plh-button{padding:12px 18px;min-height:46px;border:1px solid var(--plh-border);background:white;color:var(--plh-navy);font-weight:700;cursor:pointer}
[data-plh-ui] .plh-button-primary{background:var(--plh-blue);border-color:var(--plh-blue);color:white}
[data-plh-ui] .plh-button-danger{background:var(--plh-danger);border-color:var(--plh-danger);color:white}
.plh-toasts{position:fixed;z-index:var(--plh-z-toast);right:20px;bottom:20px;width:min(360px,calc(100vw - 32px));display:grid;gap:8px;pointer-events:none}
.plh-toast{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--plh-border);border-left:4px solid var(--plh-blue);border-radius:var(--plh-radius-md);background:white;box-shadow:var(--plh-shadow-floating);pointer-events:auto;animation:plh-enter var(--plh-normal) var(--plh-ease);font-size:14px}
.plh-toast[data-tone=success]{border-left-color:var(--plh-success)}.plh-toast[data-tone=error]{border-left-color:var(--plh-danger)}.plh-toast[data-tone=warning]{border-left-color:var(--plh-warning)}
.plh-toast>span{flex:1}.plh-toast button{border:0;background:transparent;color:var(--plh-muted);min-width:44px;min-height:44px}
.plh-tooltip{position:fixed;z-index:var(--plh-z-popover);max-width:240px;padding:8px 12px;border-radius:8px;background:var(--plh-navy);color:white;font-size:12px;pointer-events:none}
[data-plh-ui] :where(.status-pill,.status-badge,.status-chip,.ready-pill,.plh-chip){display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--plh-radius-pill);font-size:12px;font-weight:700;background:#eaf2ff;color:var(--plh-blue)}
[data-plh-ui] [data-tone=success]{color:var(--plh-success);background:#e8f7ef}[data-plh-ui] [data-tone=warning]{color:var(--plh-warning);background:#fff5dc}[data-plh-ui] [data-tone=danger]{color:var(--plh-danger);background:#fff0f2}
[data-plh-ui] :where(.empty,.public-empty,.photo-muted,.plh-empty){padding:24px;border:1px dashed var(--plh-border);border-radius:var(--plh-radius-md);color:var(--plh-muted);background:var(--plh-bg);text-align:center}
[data-plh-ui] :where(.photo-add,.profile-upload,.cms-cover-upload,.plh-upload){position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:16px;border:1px dashed #8ab3ed;border-radius:var(--plh-radius-md);color:var(--plh-blue);background:#eff6ff;cursor:pointer}
[data-plh-ui] input[type=file]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;padding:0!important}
[data-plh-ui] label:has(input[type=file]):focus-within{outline:3px solid #84b4ff;outline-offset:3px}
[data-plh-ui] :where(.loading,.plh-skeleton){border-radius:var(--plh-radius-md);background:linear-gradient(100deg,#eaf1f9,#f8fbff,#eaf1f9);background-size:200% 100%;animation:plh-load 1.5s linear 3}
[data-plh-ui] button[aria-busy=true]:after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:plh-spin 800ms linear infinite}
[data-plh-ui] :where(.portal-tabs,.plh-tabs){display:flex;gap:4px;padding:4px;border-radius:var(--plh-radius-md);background:#eaf1fb}
[data-plh-ui] [role=tab]{border:0;padding:12px;min-height:44px;border-radius:8px;background:transparent;color:var(--plh-muted);transition:background var(--plh-normal),box-shadow var(--plh-normal)}
[data-plh-ui] [role=tab][aria-selected=true]{background:white;color:var(--plh-blue);box-shadow:var(--plh-shadow-sm)}
[data-plh-ui] details{border:1px solid var(--plh-border);border-radius:var(--plh-radius-md);padding:16px}
[data-plh-ui] summary{cursor:pointer;min-height:32px;color:var(--plh-navy);font-weight:700}
[data-plh-ui] details[open]>:not(summary){animation:plh-enter var(--plh-normal) var(--plh-ease)}
[data-plh-ui] :where(tr,.job-card,.driver-card):hover{background-color:#f3f8ff}
.plh-preview{max-width:1180px;margin:0 auto;padding:32px 20px}.plh-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plh-preview section{min-width:0;padding:24px;border:1px solid var(--plh-border);border-radius:20px;background:white;box-shadow:var(--plh-shadow-card)}
.plh-preview h1{font-size:32px;color:var(--plh-navy)}.plh-preview h2{font-size:20px;margin-top:0}.plh-preview label{display:block;margin:12px 0}.plh-preview input,.plh-preview select{width:100%}
.plh-preview .plh-inline{display:flex;align-items:center;gap:8px}.plh-preview .plh-inline input{width:22px}
.plh-menu{display:grid;gap:4px}.plh-menu button{text-align:left}
.plh-reveal{animation:plh-enter var(--plh-slow) var(--plh-ease) both}



[data-plh-ui] .service-grid article:hover,[data-plh-ui] .article-card:hover{transform:translateY(-4px);box-shadow:var(--plh-shadow-floating);border-color:#a7c6f3;transition:transform var(--plh-normal),box-shadow var(--plh-normal)}
@keyframes plh-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes plh-load{to{background-position:200% 0}}@keyframes plh-spin{to{transform:rotate(360deg)}}
@media(max-width:768px){.plh-preview-grid{grid-template-columns:1fr 1fr}.plh-popup{left:12px!important;right:12px!important;top:auto!important;bottom:12px;width:auto!important;max-height:70dvh}.plh-calendar-grid button{min-height:44px!important}.plh-toasts{bottom:calc(12px + env(safe-area-inset-bottom));right:16px}.plh-dialog-actions{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:480px){.plh-preview-grid{grid-template-columns:1fr}.plh-preview{padding:24px 16px}.plh-preview section{padding:20px}}
@media(prefers-reduced-motion:reduce){[data-plh-ui] *,[data-plh-ui] *:before,[data-plh-ui] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-plh-ui] :where(button,.button,.work-card,.article-card,.service-grid article,.work-card-image img):hover{transform:none!important}}
