/* =====================================================================
   WHZ Rent — ส่วนเสริมเฉพาะเว็บเช่า (โหลดต่อจาก main/components/pages ของเว็บหลัก)
   ===================================================================== */

/* ---------- Navbar brand: โลโก้เว็บหลัก + ป้าย PANEL ---------- */
.navbar-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand-tag {
    font-family: var(--font-display);
    font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    color: var(--white);
    background: linear-gradient(135deg, var(--red-1), var(--red-3));
    padding: .2rem .55rem; border-radius: 6px;
    box-shadow: var(--shadow-neon);
}

/* ---------- Home ---------- */
.hero .badge { margin-bottom: 1rem; }
.rent-note { margin-top: 1.4rem; font-size: .92rem; }

.rent-features { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .rent-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .rent-features { grid-template-columns: 1fr; } }

.rent-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
    counter-reset: step;
}
@media (max-width: 992px) { .rent-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .rent-steps { grid-template-columns: 1fr; } }

/* .card ของเว็บหลักเป็น overflow:hidden → เลขขั้นตอนต้องอยู่ในกรอบ ห้ามลอยออกนอกการ์ด */
.rent-step { display: flex; flex-direction: column; }
.rent-step-no {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    margin-bottom: .9rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    color: var(--white);
    background: linear-gradient(135deg, var(--red-1), var(--red-3));
    box-shadow: 0 0 12px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- Footer: ลิงก์กลับเว็บหลัก ---------- */
.footer-main-link { text-align: center; margin-bottom: 1rem; font-size: .9rem; }
.footer-main-link a { color: var(--gray-2); text-decoration: none; }
.footer-main-link a:hover { color: var(--red-1); }

/* =====================================================================
   แผงควบคุม (pages/panel, rent, server, commands, license, connector + admin/)
   ===================================================================== */
.text-ok { color: #3ddc84; }
.badge-st { font-family: var(--font-thai); letter-spacing: .02em; text-transform: none; font-size: .78rem; font-weight: 400; }
.chip {
    display: inline-block; margin: 0 .3rem .3rem 0; padding: .15rem .6rem; border-radius: 999px;
    font-size: .8rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--gray-1);
}
code { font-family: Consolas, 'Courier New', monospace; background: rgba(255,255,255,.06); padding: .1rem .4rem; border-radius: 6px; color: var(--accent); }
.big-code { font-size: 1.05rem; }
.small-mono { font-size: .82rem; line-height: 1.45; }
.nowrap { white-space: nowrap; }
form.inline { display: inline; margin: 0; }

.panel-head { padding-bottom: 1rem; }
.panel-wallet { display: inline-flex; align-items: center; gap: .6rem; margin-top: .4rem; color: var(--accent); }
.ptabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
    margin-top: 1.4rem;
}
.ptabs a, .srv-switch a, .chip-filter a {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem 1rem; border-radius: 999px; text-decoration: none;
    color: var(--gray-1); font-family: var(--font-thai); font-size: .92rem;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    transition: all var(--transition);
}
.ptabs a:hover, .srv-switch a:hover, .chip-filter a:hover { border-color: rgba(255,26,26,.45); color: var(--white); }
.ptabs a.active, .srv-switch a.active, .chip-filter a.active {
    color: var(--white); border-color: var(--red-1);
    background: linear-gradient(135deg, var(--red-2), var(--red-3));
    box-shadow: 0 4px 14px rgba(255,26,26,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.srv-switch { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.chip-filter { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip-filter a { padding: .3rem .75rem; font-size: .82rem; }

.p-empty { padding: 3rem 1.5rem; }
.p-empty-icon { font-size: 3rem; color: var(--red-1); filter: drop-shadow(0 0 12px var(--red-glow)); margin-bottom: .8rem; }

.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
@media (max-width: 768px) { .pstats { grid-template-columns: repeat(2, 1fr); } }
.pstat { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; }
.pstat span { font-family: var(--font-thai); color: var(--gray-2); font-size: .88rem; }
.pstat span i { color: var(--red-1); margin-right: .25rem; }
.pstat b { font-family: var(--font-display); font-size: 1.8rem; }

.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
@media (max-width: 400px) { .srv-grid { grid-template-columns: 1fr; } }
.srv-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.srv-card-head h4 { margin: 0 0 .2rem; font-family: var(--font-thai); font-size: 1.15rem; }
.srv-online { font-family: var(--font-thai); font-size: .85rem; color: var(--gray-3); white-space: nowrap; }
.srv-online i { font-size: .6rem; vertical-align: middle; margin-right: .2rem; }
.srv-online.on { color: #3ddc84; }
.srv-online.on i { filter: drop-shadow(0 0 5px #3ddc84); }
.srv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; margin-bottom: 1.1rem; }
.srv-meta > div > span { display: block; font-size: .8rem; color: var(--gray-3); }
.srv-meta b { font-weight: 500; }
.srv-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.card-head-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.card-head-row .card-title { margin: 0; }

.kv { width: 100%; border-collapse: collapse; margin-top: .8rem; }
.kv th, .kv td { text-align: left; padding: .5rem .3rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.kv th { width: 42%; color: var(--gray-2); font-weight: 400; }

.ptable-wrap { width: 100%; overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-family: var(--font-thai); font-size: .9rem; min-width: 560px; }
.ptable th { text-align: left; color: var(--gray-2); font-weight: 400; padding: .6rem .5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.ptable td { padding: .65rem .5rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.ptable tbody tr:hover td { background: rgba(255,255,255,.02); }
.result-row { display: none; }
.result-row.open { display: table-row; }
.result-row pre {
    margin: 0; max-height: 360px; overflow: auto; padding: .9rem; border-radius: var(--radius-sm);
    background: #070707; border: 1px solid rgba(255,255,255,.08); color: #9fe6b8; font-size: .82rem;
}

/* ส่งคำสั่ง */
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; margin: .6rem 0 1.2rem; }
.act-pick input { position: absolute; opacity: 0; pointer-events: none; }
.act-pick span {
    display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: var(--radius-sm); cursor: pointer;
    font-family: var(--font-thai); font-size: .92rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    transition: all var(--transition);
}
.act-pick span i { color: var(--red-1); width: 1.1rem; text-align: center; }
.act-pick:hover span { border-color: rgba(255,26,26,.4); }
.act-pick input:checked + span { border-color: var(--red-1); background: rgba(255,26,26,.12); box-shadow: 0 0 0 1px var(--red-1) inset; }
.act-fields { padding: 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: rgba(0,0,0,.25); border: 1px dashed rgba(255,255,255,.08); }

/* แพ็กเกจ */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; }
.plan-grid-home { max-width: 1000px; margin: 2rem auto 0; }
.plan-card { display: flex; flex-direction: column; cursor: pointer; }
.plan-grid-home .plan-card { cursor: default; }
.plan-card input { position: absolute; top: 1rem; right: 1rem; accent-color: var(--red-1); width: 18px; height: 18px; }
.plan-card h4 { margin: 0 0 .4rem; font-family: var(--font-display); letter-spacing: .06em; }
.plan-price { font-family: var(--font-display); font-size: 1.9rem; color: var(--red-1); margin-bottom: .8rem; }
.plan-price small { font-family: var(--font-thai); font-size: .85rem; color: var(--gray-2); }
.plan-feat { list-style: none; padding: 0; margin: 0 0 1.2rem; flex: 1; font-size: .92rem; }
.plan-feat li { padding: .25rem 0; color: var(--gray-1); }
.plan-feat i { color: var(--red-1); width: 1.2rem; }
.plan-card:has(input:checked) { border-color: var(--red-1); box-shadow: 0 0 0 1px var(--red-1), var(--shadow-neon); }
.rent-sum { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: .4rem 0 1.2rem; padding: .9rem 1rem; border-radius: var(--radius-sm); background: rgba(0,0,0,.3); }
.rent-sum b { color: var(--accent); font-size: 1.1rem; }
.renew-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.renew-form select { flex: 1; min-width: 200px; }
.renew-form .renew-code { flex: 1 0 100%; }
.rent-code { margin: .4rem 0 1rem; }
.rent-code .code-box { max-width: 460px; }
.steps-list li { margin-bottom: .6rem; }
.form-sm { padding: .3rem .5rem; font-size: .85rem; min-width: 110px; }
.admin-form .form-group { margin-bottom: .8rem; }
.chip input { accent-color: var(--red-1); vertical-align: middle; }

/* navbar: ล็อกอินแล้วเมนูเยอะ — กันโลโก้โดนบีบทับเมนู และกันข้อความเมนูตัดบรรทัด */
.navbar-brand { flex-shrink: 0; }
.nav-links > li > a { white-space: nowrap; }
@media (min-width: 993px) and (max-width: 1360px) {
    .nav-links > li > a { padding-left: .6rem; padding-right: .6rem; letter-spacing: .08em; }
}

/* ---------- ทดลองฟรี ---------- */
.trial-box { border-color: rgba(61,220,132,.35); background: linear-gradient(135deg, rgba(30,126,52,.18), rgba(0,0,0,.2)); }
.trial-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.trial-head h3 { margin: 0 0 .15rem; }
.trial-head p { margin: 0; }
.trial-badge {
    font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; font-size: .8rem;
    padding: .45rem .7rem; border-radius: 10px; color: #fff;
    background: linear-gradient(135deg, #3ddc84, #1e7e34); box-shadow: 0 0 14px rgba(61,220,132,.4);
}

/* ---------- เปิด/ปิดระบบ (แผงควบคุม) ---------- */
.mod-group { margin: 1.4rem 0 .6rem; font-size: 1rem; color: var(--gray-2); font-weight: 500; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem; }
.mod-item {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .75rem .9rem; border-radius: var(--radius-sm); cursor: pointer;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.mod-item.locked { opacity: .65; cursor: not-allowed; }
div.mod-item { cursor: default; }
.mod-item.is-off { opacity: .6; }
.mod-state { font-family: var(--font-thai); font-size: .82rem; white-space: nowrap; }
.mod-howto { display: flex; gap: .8rem; align-items: flex-start; margin: .4rem 0 1rem; padding: .8rem 1rem; border-radius: var(--radius-sm);
    background: rgba(219,0,0,.08); border: 1px solid rgba(219,0,0,.3); font-size: .9rem; line-height: 1.6; }
.mod-howto > i { color: var(--red-1); font-size: 1.2rem; margin-top: .2rem; }
.mod-name { font-family: var(--font-thai); font-size: .93rem; }
.mod-name i { color: var(--red-1); width: 1.3rem; }
.mod-name small { display: block; font-size: .78rem; margin-top: .15rem; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; z-index: 1; }
.switch .slider {
    position: absolute; inset: 0; border-radius: 999px; background: #3a3a3a; transition: background var(--transition);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.switch .slider::before {
    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #ddd; transition: transform var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.switch input:checked + .slider { background: linear-gradient(135deg, var(--red-1), var(--red-3)); }
.switch input:checked + .slider::before { transform: translateX(20px); background: #fff; }

/* ---------- ตารางแพ็กเกจ (แอดมิน) ---------- */
.plan-table input.form-control { padding: .4rem .6rem; min-width: 90px; }
.plan-table td { vertical-align: middle; }
.plan-new td { background: rgba(61,220,132,.04); }

/* การ์ดทดลองฟรีในกลุ่มแพ็กเกจ (หน้าเช่า) */
.plan-trial { border-color: rgba(61,220,132,.45); background: linear-gradient(160deg, rgba(30,126,52,.22), var(--bg-2) 70%); }
.plan-trial .trial-badge { position: absolute; top: 1rem; right: 2.9rem; padding: .25rem .55rem; font-size: .7rem; }
.plan-trial .plan-price { color: #3ddc84; }
.plan-trial .plan-feat i { color: #3ddc84; }
.plan-trial input { accent-color: #3ddc84; }
.plan-trial:has(input:checked) { border-color: #3ddc84; box-shadow: 0 0 0 1px #3ddc84, 0 0 14px rgba(61,220,132,.45); }

/* ---------- แพ็กเกจหน้าแรก: การ์ดขนาดเท่ากัน จัดกลาง (ทดลองฟรีเป็นการ์ดแรก) ---------- */
.plan-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 2rem; }
.plan-row .plan-card { width: 255px; max-width: 100%; cursor: default; }
.plan-row .plan-trial .trial-badge { right: 1rem; }

/* ---------- ระบบในเว็บ (หน้าแรก): การ์ดกลุ่ม + tile ต่อระบบ ---------- */
.sys-groups { columns: 3 300px; column-gap: 1.2rem; margin-top: 2rem; }   /* masonry: การ์ดสูงไม่เท่ากันก็ไม่เว้นช่อง */

.sys-group { --g1: var(--red-1); --g2: var(--red-3); break-inside: avoid; margin-bottom: 1.2rem; display: block; }
.sys-g-topup  { --g1: #ffb020; --g2: #b86e00; }
.sys-g-member { --g1: #3aa0ff; --g2: #0b4f9c; }

.sys-g-item   { --g1: #ff3b5c; --g2: #9c0f2a; }
.sys-g-reward { --g1: #2fd27a; --g2: #0f7a43; }
.sys-g-char   { --g1: #b36bff; --g2: #5b2a9c; }
.sys-g-admin  { --g1: #8a8a8a; --g2: #444; }
.sys-head { display: flex; align-items: center; gap: .85rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.sys-head h5 { margin: 0; font-size: 1.1rem; }
.sys-head small { color: var(--gray-3); }
.sys-tile {
    width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
    font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px rgba(0,0,0,.4);
}
.sys-items { display: grid; grid-template-columns: 1fr; gap: .45rem; }
.sys-item {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 10px;
    font-size: .88rem; line-height: 1.3; color: var(--gray-1);
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    transition: border-color var(--transition), background var(--transition);
}
.sys-item:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.sys-item i {
    width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: .8rem;
    color: var(--g1); background: rgba(255,255,255,.05);
}

/* ---------- ประกาศ + หน้าตั้งค่าแอดมิน ---------- */
.rent-announce { background: linear-gradient(90deg, rgba(219,0,0,.35), rgba(139,0,0,.2)); border-bottom: 1px solid rgba(255,26,26,.35); padding: .55rem 0; font-size: .92rem; text-align: center; }
.rent-announce i { color: var(--accent); margin-right: .35rem; }
.set-row { cursor: pointer; }
.set-row.mod-item { padding: 1rem 1.1rem; }
.set-note ol { margin: .5rem 0 .5rem 1.2rem; padding: 0; }
.set-note li { margin: .2rem 0; }

/* ---------- ดาวน์โหลด Connector ---------- */
.dl-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dl-notes { margin-top: .9rem; padding: .75rem .9rem; border-radius: var(--radius-sm); background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); color: var(--gray-1); }

/* ================================================================ หน้าโค้ด /admin/codes.php (พอร์ตจากเว็บหลัก — ก็อปคลาสจาก admin.css ของเว็บหลัก) */
.admin-card {
    background: var(--bg-3);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.2rem;
}
.admin-card h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: .1em;
    color: var(--red-1);
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: .5rem;
}
.admin-table th, .admin-table td {
    padding: .8rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: .9rem;
}
.admin-table th {
    background: rgba(255,255,255,.03);
    font-family: var(--font-display);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gray-2);
}
.admin-table tr:hover td { background: rgba(255,26,26,.04); }
.admin-table td.actions { white-space: nowrap; text-align: right; }
.admin-table td.actions .btn { padding: .35rem .7rem; font-size: .7rem; margin-left: .3rem; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 992px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stat-grid { grid-template-columns: 1fr; } }

.stat-card {
    padding: 1.3rem;
    border-radius: var(--radius);
    background: linear-gradient(140deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: '';
    position: absolute; right: -20px; top: -20px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, var(--red-glow) 0%, transparent 70%);
    opacity: .6;
}
.stat-card i {
    font-size: 1.8rem;
    color: var(--red-1);
    margin-bottom: .5rem;
    filter: drop-shadow(0 0 8px var(--red-glow));
}
.stat-card .stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
}
.stat-card .stat-label {
    color: var(--gray-2);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ---------- Forms ---------- */
.admin-form-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: start;
}
@media (max-width: 768px) { .admin-form-row { grid-template-columns: 1fr; } }
.admin-form-row label {
    font-family: var(--font-display);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gray-1);
    padding-top: .7rem;
}
.admin-form-row label small { display: block; color: var(--gray-3); font-family: var(--font-thai); font-size: .8rem; text-transform: none; letter-spacing: 0; margin-top: .3rem; }
.admin-form-row textarea.form-control { min-height: 90px; resize: vertical; }

.form-actions { display: flex; gap: .6rem; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.06); margin-top: 1rem; }
.code-chip { font-family: var(--font-display); letter-spacing: .06em; color: var(--accent); background: rgba(255,209,102,.08); padding: .15rem .45rem; border-radius: 6px; border: 1px solid rgba(255,209,102,.25); }
.code-type-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 768px) { .code-type-pick { grid-template-columns: 1fr; } }
.code-type-opt { cursor: pointer; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.code-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.code-type-opt span {
    display: block; padding: .8rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.03); transition: all .2s; font-family: var(--font-thai); font-size: .9rem; color: var(--gray-1);
}
.code-type-opt span i { color: var(--red-1); margin-right: .35rem; }
.code-type-opt small { display: block; margin-top: .25rem; color: var(--gray-3); font-size: .78rem; }
.code-type-opt input:checked + span { border-color: var(--red-1); background: rgba(255,26,26,.1); box-shadow: 0 0 14px rgba(255,26,26,.2); }
.code-type-opt input:disabled + span { opacity: .35; cursor: not-allowed; }

/* ---------- ธีมเว็บ (/themes) ---------- */
.theme-card { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.6rem; margin-bottom: 1.4rem; }
.theme-card.is-current { border-color: var(--red-1); box-shadow: 0 0 0 1px var(--red-1), var(--shadow-neon); }
.theme-stage { position: relative; padding-right: 3.2rem; padding-bottom: 1.2rem; }
.theme-main { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-0); border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-md); }
.theme-main img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .4s ease; }
.theme-main:hover img { transform: scale(1.02); }
.theme-zoom { position: absolute; right: .6rem; bottom: .6rem; padding: .35rem .7rem; border-radius: 999px; font-family: var(--font-thai); font-size: .8rem;
    color: #fff; background: rgba(0,0,0,.7); opacity: 0; transition: opacity var(--transition); }
.theme-main:hover .theme-zoom, .theme-main:focus-visible .theme-zoom { opacity: 1; }
.theme-noshot { position: absolute; inset: 0; display: grid; place-content: center; gap: .4rem; text-align: center; color: var(--gray-3); font-family: var(--font-thai); }
.theme-noshot i { font-size: 2.2rem; }
.theme-phone { position: absolute; right: 0; bottom: 0; width: 24%; min-width: 92px; aspect-ratio: 9 / 19; padding: 6px; border-radius: 18px;
    background: #050505; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 30px rgba(0,0,0,.8); }
.theme-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 12px; display: block; }
.theme-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; }
.theme-thumb { display: flex; flex-direction: column; gap: .25rem; padding: .3rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-2);
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: border-color var(--transition); }
.theme-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 5px; display: block; }
.theme-thumb > i { aspect-ratio: 16 / 10; display: grid; place-items: center; font-size: 1.2rem; color: var(--gray-3); }
.theme-thumb span { font-size: .74rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-thumb:hover { border-color: rgba(255,26,26,.45); color: var(--white); }
.theme-thumb.active { border-color: var(--red-1); color: var(--white); background: rgba(255,26,26,.1); }
.theme-info { display: flex; flex-direction: column; gap: .9rem; }
.theme-title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.theme-title h3 { margin: 0; font-size: 1.7rem; }
.badge-cur { font-size: .8rem; padding: .25rem .65rem; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #3ddc84, #1e7e34); }
.theme-info > p { margin: 0; line-height: 1.7; }
.theme-colors { display: flex; gap: .4rem; }
.theme-colors span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); box-shadow: var(--shadow-sm); }
.theme-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.theme-tags span { font-size: .78rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--gray-1); }
.theme-pages { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .85rem; }
.theme-pages small { flex-basis: 100%; }
.theme-pages a { color: var(--gray-2); }
.theme-pages a:hover { color: var(--red-1); }
.theme-pages a i { color: var(--red-1); width: 1.1rem; }
.theme-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: auto; }
.theme-soon { display: flex; gap: 1rem; align-items: center; border-style: dashed; opacity: .85; }
.theme-soon > i { font-size: 1.8rem; color: var(--accent); }
@media (max-width: 900px) {
    .theme-card { grid-template-columns: 1fr; }
    .theme-thumbs { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
.home-theme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 768px) { .home-theme { grid-template-columns: 1fr; } }