:root {
    --ink:#171717;
    --muted:#6f6f6f;
    --line:#e9e5dc;
    --bg:#faf7ef;
    --card:#fff;
    --brand:#111;
    --soft:#efe8db
}

* {
    box-sizing:border-box
}

body {
    margin:0;font-family:Inter,Arial,'Noto Sans Thai',sans-serif;
    background:var(--bg);
    color:var(--ink)
}

a {
    text-decoration:none;color:inherit
}

.container {
    max-width:1120px;
    margin:auto;
    padding:24px
}

.nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0
}

.logo {
    font-weight:800;
    font-size:24px
}

.pill {
    background:#111;
    color:#fff;
    border-radius:999px;
    padding:12px 18px;
    display:inline-block
}

.hero {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:28px;
    align-items:center;
    padding:46px 0
}

.hero h1 {
    font-size:56px;
    line-height:1.05;
    margin:0 0 16px
}

.hero p {
    font-size:18px;
    color:var(--muted);
    line-height:1.8
}

.hero-box {
    background:var(--soft);
    border-radius:34px;
    padding:36px;
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center
}

.grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.035)
}

.thumb {
    aspect-ratio:4/3;
    background:#eee;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#999
}

.thumb img {
    width:100%;
    height:100%;
    object-fit:cover
} 

.card-body {
    padding:20px
}

.card h3 {
    margin:0 0 8px;
    font-size:20px
}

.muted {
    color:var(--muted)
}

.price {
    font-weight:800;
    margin:14px 0
}

.btn {
    border:0;
    background:#111;
    color:#fff;
    border-radius:14px;
    padding:12px 18px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px
}

.btn.secondary {
    background:#eee;
    color:#111
}

.btn.danger {
    background:#b42318
}

.detail {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px
}

.panel {
    background:#fff
    ;border:1px solid var(--line);
    border-radius:24px;
    padding:24px
}

.form-grid {
    display:grid;
    gap:14px
}

.field label {
    display:block;
    font-weight:700;
    margin-bottom:7px
}

.field input,.field textarea,.field select {
    width:100%;
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
    font:inherit;
    background:#fff
}

.field textarea {
    min-height:110px
}

.calc-row {
    display:grid;
    grid-template-columns:repeat(3,1fr)
    ;gap:12px
}

.total {
    font-size:30px;
    font-weight:900
}

.footer {
    padding:42px 0;
    color:var(--muted)
}

.admin-layout {
    display:grid;
    grid-template-columns:380px 1fr;
    gap:22px
}

.table {
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:20px;
    overflow:hidden
}

.table th,.table td {
    padding:12px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:top
}

.preview {
    width:84px;
    height:64px;
    object-fit:cover;
    border-radius:12px;
    background:#eee
}

@media(max-width:800px) {
    .hero,.detail,.admin-layout{grid-template-columns:1fr}
    .hero h1{font-size:38px}
    .grid{grid-template-columns:1fr}
    .calc-row{grid-template-columns:1fr}
}
.nav-links,.actions {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}

.ghost {
    background:#fff;
    color:#111;
    border:1px solid var(--line)
}

.badge {
    display:inline-flex;
    background:#fff3c4;
    border:1px solid #f3d36b;
    border-radius:999px;
    padding:8px 12px;
    font-weight:800;
    margin-bottom:12px
}

.features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:18px 0 34px
}
.features>div {
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:18px
}

.small {
    max-width:640px
}

.form {
    display:grid;
    gap:14px
}

.form label {
    font-weight:800
}

.form input,.form textarea,.form select {
    width:100%;
    margin-top:7px;
    border:1px solid var(--line);
    border-radius:14px;
    padding:13px;
    font:inherit;
    background:#fff
}

.table-wrap {
    overflow:auto
}

table {
    width:100%;
    border-collapse:collapse;
    background:#fff
}

th,td {
    border-bottom:1px solid var(--line);
    padding:12px;
    text-align:left;
    vertical-align:top
}

.status {
    background:#f1f1f1;
    border-radius:999px;
    padding:6px 10px;
    display:inline-block
}

.thumb.big {
    min-height:360px
}

ul {
    line-height:1.9
}

@media(max-width:800px) {
    .features{grid-template-columns:1fr}
    .nav{align-items:flex-start;gap:12px}
    .pill,.btn{width:100%;justify-content:center}
    .nav-links,.actions{width:100%}
}