/*
Theme Name: Tài Sản Bank
Theme URI: https://taisanbank.com.vn
Author: Tài Sản Bank
Description: Theme giới thiệu bất động sản do ngân hàng phát mại, cơ quan thi hành án và tổ chức đấu giá chuyển nhượng. Có loại bài "Tài sản" với biểu mẫu nhập liệu riêng, bộ lọc tìm kiếm, form đăng ký xem tài sản và 5 tài sản demo.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taisanbank
*/

/* Tokens: xanh rêu đậm (tin cậy, pháp lý) + đỏ con dấu (giá, hành động) */
:root {
	--bg: #f3f5f4;
	--paper: #ffffff;
	--ink: #13302e;
	--muted: #5a6b68;
	--line: #d9e1df;
	--brand: #0f4c47;
	--brand-dark: #0a3834;
	--brand-soft: #e3efed;
	--seal: #b3261e;
	--seal-dark: #8f1d17;
	--seal-soft: #fbe9e7;
	--ok: #1e7a46;
	--ok-soft: #e3f3e9;
	--warn: #9a6200;
	--warn-soft: #fbf0d9;
	--radius: 10px;
	--f-display: "Source Serif 4", Georgia, "Times New Roman", serif;
	--f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--f-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
a:hover { color: var(--seal); }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(22px, 2.6vw, 28px); }
h3 { font-size: 19px; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--paper); padding: 8px 14px; border-radius: 6px; }

.container {
	max-width: 1200px;
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.section { padding-block: 40px; }
.section--alt { background: var(--paper); border-top: 1px solid var(--line); }
.center { text-align: center; margin-top: 28px; }
.code { font: 500 12px var(--f-mono); color: var(--muted); letter-spacing: .02em; }
.loc { color: var(--muted); font-size: 14px; }
.empty { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); padding: 24px; color: var(--muted); }
.crumb { font-size: 13px; color: var(--muted); margin: 18px 0 10px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--seal); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; padding: 11px 18px; font-weight: 600; font-size: 15px; border: 0; cursor: pointer; text-decoration: none; transition: background .15s; }
.btn--primary { background: var(--seal); color: #fff; }
.btn--primary:hover { background: var(--seal-dark); color: #fff; }
.btn--soft { background: var(--brand-soft); color: var(--brand); }
.btn--soft:hover { background: var(--brand); color: #fff; }

/* Pills */
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--paper); color: var(--ink); white-space: nowrap; }
.pill--open { background: var(--ok-soft); color: var(--ok); }
.pill--soon { background: var(--warn-soft); color: var(--warn); }
.pill--neg { background: var(--seal-soft); color: var(--seal); }
.pill--sold { background: var(--ink); color: var(--paper); }

/* Top bar + header */
.topbar { background: var(--brand); color: #fff; font-size: 13px; }
.topbar__in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 6px; }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__mark { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--seal); color: var(--seal); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.logo__text { font-family: var(--f-display); font-size: 22px; font-weight: 700; line-height: 1.15; }
.logo__text small { display: block; font: 500 12px var(--f-body); color: var(--muted); }
.custom-logo { max-height: 56px; width: auto; }
.primary-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.primary-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { color: var(--seal); }
.primary-nav .sub-menu { list-style: none; padding: 0; margin: 0; }
.nav-toggle { display: none; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

@media (min-width: 901px) {
	.primary-nav .menu-item-has-children { position: relative; }
	.primary-nav .sub-menu { display: none; position: absolute; top: 100%; left: -14px; min-width: 220px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 0; box-shadow: 0 12px 30px -16px rgba(10, 40, 36, .35); }
	.primary-nav .sub-menu a { display: block; padding: 6px 14px; }
	.primary-nav .menu-item-has-children:hover > .sub-menu, .primary-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
}
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
	.primary-nav.is-open { display: block; }
	.primary-nav .menu { flex-direction: column; gap: 0; }
	.primary-nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
	.primary-nav .sub-menu a { padding-left: 16px; }
}

/* Hero */
.hero { background: linear-gradient(180deg, var(--brand-soft), var(--bg)); }
.hero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; padding-block: 48px; align-items: start; }
.hero__text { min-width: 0; }
.hero h1 { font-size: clamp(30px, 4.4vw, 46px); }
.hero p { color: var(--muted); font-size: 17px; max-width: 54ch; }
.trust { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 24px; }
.trust div { font-size: 14px; color: var(--muted); }
.trust b { display: block; font: 700 28px var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Search form */
.search { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 12px; }
.search--hero { grid-template-columns: 1fr 1fr; box-shadow: 0 20px 40px -28px rgba(10, 40, 36, .4); }
.search--hero .field--kw, .search--hero .btn { grid-column: 1 / -1; }
.search--bar { grid-template-columns: 2fr repeat(5, 1fr) auto; align-items: end; margin-top: 8px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field input, .field select, .sort select, .form input, .form textarea {
	width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--paper); font-size: 15px;
}
.field input:focus, .field select:focus, .form input:focus, .form textarea:focus { border-color: var(--brand); outline: 2px solid var(--brand-soft); }
@media (max-width: 1080px) { .search--bar { grid-template-columns: repeat(3, 1fr); } .search--bar .field--kw { grid-column: 1 / -1; } }

/* Section heads + chips */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.sec-head h2 { margin: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 13.5px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; background: var(--paper); }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.card__link { position: absolute; inset: 0; z-index: 2; }
.card__link:focus-visible { outline-offset: -3px; }
.ph { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: var(--brand-soft); overflow: hidden; display: block; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; }
.card__bd { padding: 14px 16px 16px; display: grid; gap: 8px; flex: 1; grid-template-rows: auto auto auto auto 1fr; }
.card__title { font: 600 17px/1.35 var(--f-body); margin: 0; }
.card:hover .card__title { color: var(--seal); }
.specs { display: flex; gap: 14px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.price { display: flex; justify-content: space-between; align-items: end; gap: 10px; border-top: 1px dashed var(--line); padding-top: 10px; align-self: end; }
.price small { display: block; font-size: 12px; color: var(--muted); }
.price b { font: 700 21px var(--f-display); color: var(--seal); font-variant-numeric: tabular-nums; }
.src { font-size: 12px; color: var(--brand); font-weight: 600; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
	.card { transition: transform .2s, box-shadow .2s; }
	.card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(10, 40, 36, .45); }
}

/* How it works */
.how { background: var(--paper); border-block: 1px solid var(--line); padding-block: 40px; }
.how__steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.how__steps li { counter-increment: s; color: var(--muted); font-size: 14.5px; padding-left: 52px; position: relative; }
.how__steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brand); color: var(--brand); display: grid; place-items: center; font: 700 17px var(--f-display); }
.how__steps b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }

/* News */
.news { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.news__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.news__item h2, .news__item h3 { font: 600 18px/1.35 var(--f-body); margin: 6px 0 8px; }
.news__item h2 a, .news__item h3 a { color: var(--ink); text-decoration: none; }
.news__item h2 a:hover, .news__item h3 a:hover { color: var(--seal); }
.news__item p { color: var(--muted); font-size: 14.5px; margin: 0; }
.news__thumb { margin: -18px -18px 14px; border-radius: var(--radius) var(--radius) 0 0; }

/* Listing page */
.page-head { background: var(--paper); border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.page-head h1 { margin: 0; }
.page-head__desc { color: var(--muted); margin-top: 8px; max-width: 70ch; }
.listing { padding-bottom: 48px; }
.listing__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 18px; color: var(--muted); }
.listing__meta b { color: var(--ink); }
.sort { display: flex; align-items: center; gap: 8px; }
.sort label { font-size: 14px; }
.sort select { width: auto; padding: 7px 10px; }
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.page-numbers { min-width: 40px; padding: 8px 12px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-decoration: none; color: var(--ink); }
.page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Detail page */
.detail { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px; padding-bottom: 48px; align-items: start; }
.detail__main, .detail__side { min-width: 0; }
.detail__title { font-size: clamp(26px, 3vw, 34px); margin: 6px 0 6px; }
.detail__code { margin: 18px 0 0; }
.detail__sec { margin-top: 30px; }
.detail__sec h2 { font-size: 22px; }
.gallery__main { width: 100%; border: 0; padding: 0; cursor: zoom-in; border-radius: var(--radius); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 8px; }
.gallery__thumb { border: 2px solid transparent; border-radius: 6px; padding: 0; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: var(--brand-soft); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--seal); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 20px 0 0; background: var(--paper); }
.kv div { padding: 11px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-right: -1px; margin-bottom: -1px; }
.kv dt { font-size: 13px; color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.legal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; color: var(--muted); }
.lawyer-note { background: var(--brand-soft); border-radius: 8px; padding: 12px 14px; margin-top: 12px; }
.lawyer-note__h { font-weight: 700; color: var(--brand); margin: 0 0 4px; font-size: 14px; }
.lawyer-note p:last-child { margin: 0; }
.files { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.file { font-size: 13.5px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 11px; font-weight: 500; text-decoration: none; }
.file::before { content: "PDF"; font: 700 10px var(--f-mono); color: var(--seal); margin-right: 6px; }
.map { aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius); }

.detail__side { display: grid; gap: 18px; }
.pricebox { background: var(--paper); border: 2px solid var(--seal); border-radius: 12px; padding: 18px; display: grid; gap: 10px; }
.pricebox__label { color: var(--muted); font-size: 14px; }
.pricebox__big { font: 700 34px/1.1 var(--f-display); color: var(--seal); font-variant-numeric: tabular-nums; }
.pricebox__rows { margin: 0; display: grid; gap: 7px; font-size: 14px; }
.pricebox__rows div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.pricebox__rows dt { color: var(--muted); }
.pricebox__rows dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.countdown { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 600; margin: 0; }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 12px; }
.lawyer { display: flex; gap: 12px; align-items: center; }
.lawyer__ava { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.lawyer small { display: block; color: var(--muted); font-size: 13px; }
.contact-card__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Contact form */
.form { display: grid; gap: 10px; }
.form label { font-size: 13px; font-weight: 600; color: var(--muted); display: grid; gap: 4px; }
.form textarea { min-height: 84px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }
.form small { color: var(--muted); font-size: 12px; }
.notice { border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 0; }
.notice--ok { background: var(--ok-soft); color: var(--ok); }
.notice--err { background: var(--seal-soft); color: var(--seal); }

@media (max-width: 900px) {
	.hero__in { grid-template-columns: 1fr; padding-block: 32px; }
	.detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.search--hero, .search--bar { grid-template-columns: 1fr; }
	.logo__text small { display: none; }
	.topbar__in > span:first-child { display: none; }
}

/* Prose (pages, posts) */
.prose-wrap { max-width: 780px; padding-block: 28px 56px; }
.prose-wrap__img { margin: 20px 0; border-radius: var(--radius); overflow: hidden; }
.entry-content { font-size: 16.5px; }
.entry-content h2 { margin-top: 1.4em; }
.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content li { margin: 4px 0; }
.entry-content blockquote { margin: 1em 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--seal); color: var(--muted); }
.entry-content table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.entry-content td, .entry-content th { border: 1px solid var(--line); padding: 8px 10px; }
.entry-content .form { max-width: 520px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }

/* Footer */
.site-footer { background: var(--ink); color: #cfdcd9; margin-top: 0; font-size: 14.5px; }
.site-footer a { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-block: 40px 24px; }
.site-footer__name { font: 700 22px var(--f-display); color: #fff; margin-bottom: 8px; }
.site-footer__h { font-weight: 700; color: #fff; margin-bottom: 8px; }
.site-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer__list a { text-decoration: none; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 16px 20px; font-size: 13px; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Mobile call bar */
.mobile-cta { display: none; }
@media (max-width: 760px) {
	.mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--line); padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
	.mobile-cta .btn { padding: 10px 8px; font-size: 14px; }
	body { padding-bottom: 64px; }
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6, 20, 18, .92); display: grid; place-items: center; padding: 48px 56px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; border-radius: 6px; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.lightbox button:hover { background: rgba(255, 255, 255, .25); }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #cfdcd9; font-size: 13px; }

/* WordPress core classes */
.alignleft { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { margin-inline: auto; }
.wp-caption-text { font-size: 13px; color: var(--muted); }