/* Nhật Phúc primitives and reusable components. Values originate in design-system/tokens.json. */
:root{--bg-color:var(--np-color-surface);--card-bg-color:var(--np-color-tint);--text-color:var(--np-color-text);--text-muted:var(--np-color-muted);--border-color:var(--np-color-border);--content-h-color:var(--np-color-heading);--content-p-color:var(--np-color-text);--accent-color:var(--np-color-primary);--accent-color-hover:var(--np-color-primary-hover)}
html{font-size:var(--np-font-base)}
.np-stack>*+*{margin-block-start:var(--np-space-4)}
.np-cluster{display:flex;align-items:center;gap:var(--np-space-3);flex-wrap:wrap}
.np-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--np-grid-gap)}
.np-panel{padding:var(--np-space-6);border:var(--np-border-width) solid var(--np-color-border);border-radius:var(--np-radius-card);background:var(--np-color-surface)}
.np-muted{color:var(--np-color-muted)}
.np-button,.button,.wp-element-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--np-space-3);min-height:var(--np-target-min);padding:var(--np-space-3) var(--np-space-5);border:var(--np-border-width) solid var(--np-color-primary);border-radius:var(--np-radius-control);background:var(--np-color-primary);color:var(--np-color-on-primary);font:var(--np-weight-bold) var(--np-font-sm)/var(--np-leading-tight) var(--np-font-family);text-decoration:none;cursor:pointer;transition:background var(--np-duration-fast) var(--np-ease),box-shadow var(--np-duration-fast) var(--np-ease)}
.np-button:hover,.button:hover,.wp-element-button:hover{background:var(--np-color-primary-hover);border-color:var(--np-color-primary-hover);color:var(--np-color-on-primary)}
.np-button--secondary{background:var(--np-color-surface);color:var(--np-color-primary)}
.np-button--secondary:hover{background:var(--np-color-tint);color:var(--np-color-primary-hover)}
.np-button--ghost{background:transparent;border-color:transparent;color:var(--np-color-primary)}
.np-button--ghost:hover{background:var(--np-color-tint);border-color:transparent;color:var(--np-color-primary-hover)}
.np-button--danger{color:var(--np-color-danger-bg);background:var(--np-color-danger);border-color:var(--np-color-danger)}
.np-button--danger:hover{color:var(--np-color-danger-bg);background:var(--np-color-danger);border-color:var(--np-color-danger);box-shadow:var(--np-shadow-card)}
.np-button:disabled,.np-button[aria-disabled=true]{background:var(--np-color-disabled-bg);border-color:var(--np-color-border);color:var(--np-color-disabled-text);cursor:not-allowed;transform:none;box-shadow:none}
.np-button[aria-busy=true]{cursor:progress}.np-button--icon{width:var(--np-target-min);padding:var(--np-space-2)}
.np-link{color:var(--np-color-primary);text-decoration:underline;text-underline-offset:3px}
.np-field{display:grid;gap:var(--np-space-2);margin-bottom:var(--np-space-5)}
.np-label{font-size:var(--np-font-sm);font-weight:var(--np-weight-bold)}
.np-input,.np-select,.np-textarea{display:block;width:100%;min-height:var(--np-target-min);padding:var(--np-space-3);border:var(--np-border-width) solid var(--np-color-border-strong);border-radius:var(--np-radius-control);background:var(--np-color-surface);color:var(--np-color-text);font:inherit}
.np-input::placeholder,.np-textarea::placeholder{color:var(--np-color-muted);opacity:1}
.np-input[aria-invalid=true],.np-textarea[aria-invalid=true]{border-color:var(--np-color-danger);border-width:2px}
.np-help,.np-error{font-size:var(--np-font-sm);line-height:var(--np-leading-tight);margin:0}.np-help{color:var(--np-color-muted)}.np-error{color:var(--np-color-danger)}
.np-input:disabled{background:var(--np-color-disabled-bg);color:var(--np-color-disabled-text);cursor:not-allowed}
.np-check{display:flex;gap:var(--np-space-3);align-items:center;min-height:var(--np-target-min);font-size:var(--np-font-sm)}
.np-check input{width:var(--np-icon-md);height:var(--np-icon-md);accent-color:var(--np-color-primary);flex-shrink:0}
.np-badge{display:inline-flex;align-items:center;gap:var(--np-space-1);border-radius:var(--np-radius-pill);padding:var(--np-space-1) var(--np-space-3);background:var(--np-color-tint);color:var(--np-color-primary);font-size:var(--np-font-xs);font-weight:var(--np-weight-bold);line-height:var(--np-leading-tight)}
.np-badge--success,.np-alert--success{background:var(--np-color-success-bg);color:var(--np-color-success)}
.np-badge--warning,.np-alert--warning{background:var(--np-color-warning-bg);color:var(--np-color-warning)}
.np-badge--danger,.np-alert--danger{background:var(--np-color-danger-bg);color:var(--np-color-danger)}
.np-alert{padding:var(--np-space-4) var(--np-space-5);border:var(--np-border-width) solid currentColor;border-radius:var(--np-radius-control);font-size:var(--np-font-sm)}
.np-alert--info{background:var(--np-color-info-bg);color:var(--np-color-info)}
.np-alert p:last-child{margin-bottom:0}
.np-tabs{display:flex;gap:var(--np-space-2);flex-wrap:wrap}.np-tabs a,.np-tabs button{display:inline-flex;align-items:center;min-height:var(--np-target-min);border:var(--np-border-width) solid var(--np-color-border-strong);border-radius:var(--np-radius-control);padding:var(--np-space-2) var(--np-space-5);background:var(--np-color-surface);color:var(--np-color-primary);font:inherit;text-decoration:none}
.np-tabs [aria-current=page]{background:var(--np-color-primary);border-color:var(--np-color-primary);color:var(--np-color-on-primary)}
.np-accordion{border-block-end:var(--np-border-width) solid var(--np-color-border);padding-block:var(--np-space-3)}
.np-accordion summary{min-height:var(--np-target-min);padding-block:var(--np-space-3);font-weight:var(--np-weight-bold);cursor:pointer}
.np-accordion p{color:var(--np-color-muted)}
.np-table-wrap{overflow-x:auto}.np-table{width:100%;border-collapse:collapse;font-size:var(--np-font-sm)}
.np-table caption{text-align:left;padding-block:var(--np-space-3);font-weight:var(--np-weight-bold)}
.np-table th,.np-table td{border-bottom:var(--np-border-width) solid var(--np-color-border);padding:var(--np-space-3);text-align:left}.np-table th{background:var(--np-color-surface-alt)}
.np-empty{text-align:center;padding:var(--np-space-12) var(--np-space-6);border:1px dashed var(--np-color-border-strong);border-radius:var(--np-radius-card);background:var(--np-color-surface-alt)}
.np-empty h3{margin:0 0 var(--np-space-3)}.np-empty p{color:var(--np-color-muted)}
.np-skeleton{height:1rem;background:var(--np-color-border);border-radius:var(--np-radius-sm);animation:np-pulse 1.6s ease-in-out infinite}
.np-skeleton--image{height:auto;aspect-ratio:var(--np-ratio-card)}
.np-skeleton--short{max-width:65%}
.np-spinner{width:var(--np-icon-md);height:var(--np-icon-md);display:inline-block;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:np-spin .8s linear infinite}
.np-dialog{width:min(34rem,calc(100% - var(--np-space-8)));padding:var(--np-space-8);border:1px solid var(--np-color-border);border-radius:var(--np-radius-card);background:var(--np-color-surface);color:var(--np-color-text);box-shadow:var(--np-shadow-dialog)}
.np-dialog::backdrop{background:var(--np-color-backdrop)}
.np-dialog h2{margin-top:0;font-size:var(--np-font-2xl)}
.np-price{font-size:var(--np-font-xl);font-weight:var(--np-weight-heavy);color:var(--np-color-accent)}
.np-rating{font-size:var(--np-font-sm);color:var(--np-color-muted)}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:var(--np-focus-width) solid var(--np-color-focus);outline-offset:var(--np-focus-offset)}
@keyframes np-pulse{50%{opacity:.45}}@keyframes np-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(forced-colors:active){.np-button,.np-badge,.np-alert{border:1px solid ButtonText}.np-skeleton{border:1px solid CanvasText}.np-input[aria-invalid=true]{outline:2px dashed Mark}}

/* Baseline for standalone component library and native theme pages. */
body{font-family:var(--np-font-family);font-size:var(--np-font-md);line-height:var(--np-leading-body)}
:where(.np-ds-library) h1,:where(.np-ds-library) h2,:where(.np-ds-library) h3{font-weight:var(--np-weight-bold);line-height:var(--np-leading-heading)}
.np-ds-library p{margin-bottom:var(--np-space-4)}.np-ds-library h3{font-size:var(--np-font-xl);margin-bottom:var(--np-space-3)}
.np-ds-library .eyebrow{display:block;font-size:var(--np-font-xs);letter-spacing:var(--np-tracking-label);color:var(--np-color-primary);margin-bottom:var(--np-space-3)}
.np-ds-library .section-heading h2{font-size:var(--np-font-section);margin-bottom:var(--np-space-5)}
.np-ds-library .article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--np-grid-gap)}
@media(max-width:767px){.np-ds-library .article-grid{grid-template-columns:1fr}}