/*
Theme Name: Cafe Kinh Tế
Theme URI: https://cafekinhte.com
Description: Block theme (child của Twenty Twenty-Five) cho blog kiến thức kinh tế – tài chính. Tối ưu đọc tiếng Việt, tốc độ và structured data.
Author: OnDigi
Author URI: https://ondigi.vn
Template: twentytwentyfive
Version: 1.0.39
Requires at least: 6.7
Tested up to: 7.1
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: cafekinhte
*/

/* CSS riêng của trang /native-ads: chỉ nạp trên trang đó (xem functions.php mục 1). CSS chung toàn site nằm ở assets/css/global.css. */
/* ===== TRANG QUẢNG CÁO TỰ NHIÊN (/native-ads) ===== */
.ckt-na-page main.wp-block-group { padding: 0 !important; }
.ckt-na-page main > .wp-block-post-content { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.ckt-na-page .ckt-na.alignfull { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.ckt-na-page .ckt-footer { margin-top: 0; }
.ckt-na-page .ckt-footer-cta { display: none; }
.ckt-na { --na-line: var(--wp--preset--color--accent-4); --na-brand: var(--wp--preset--color--accent-2); --na-dark: var(--wp--preset--color--accent-5); --na-muted: var(--wp--preset--color--contrast-2); font-family: var(--wp--preset--font-family--be-vietnam-pro); color: var(--wp--preset--color--contrast); margin-top: 0 !important; padding-bottom: 72px; }
.ckt-na *, .ckt-na *::before, .ckt-na *::after { box-sizing: border-box; }
.ckt-na p { margin: 0; }
.ckt-na a { color: inherit; text-decoration: none; }
.ckt-na-wrap { max-width: calc(1200px + 2 * var(--wp--style--root--padding-left, 20px)); margin: 0 auto; padding: 0 var(--wp--style--root--padding-left, 20px); }
.ckt-na-kick { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--accent-1); }
.ckt-na-lead { font-family: var(--wp--preset--font-family--lora); font-size: 1.0625rem; line-height: 1.65; color: var(--na-muted); }
.ckt-na-card { background: #fff; border: 1px solid var(--na-line); border-radius: 10px; }
.ckt-na-btn { height: 48px; padding: 0 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font: 600 0.9375rem/1 var(--wp--preset--font-family--be-vietnam-pro); cursor: pointer; border: 0; }
.ckt-na-btn.is-primary { background: var(--na-brand); color: #fff !important; }
.ckt-na-btn.is-primary:hover { background: #9A5622; }
.ckt-na-btn.is-outline { border: 1px solid var(--wp--preset--color--contrast); background: transparent; }
.ckt-na-btn.is-outline:hover { background: var(--wp--preset--color--contrast); color: #fff !important; }

/* Hero */
.ckt-na-hero { background: var(--wp--preset--color--base-2); border-bottom: 1px solid var(--na-line); padding: 28px 0 64px; }
.ckt-na-crumb { display: flex; gap: 8px; font-size: 0.8125rem; color: var(--na-muted); margin-bottom: 36px; }
.ckt-na-crumb a:hover { color: var(--wp--preset--color--accent-1); }
.ckt-na-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.ckt-na-hero-text { display: flex; flex-direction: column; gap: 18px; }
.ckt-na h1 { margin: 0; font-size: clamp(1.875rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.ckt-na-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ckt-na-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ckt-na-stat { padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.ckt-na-stat strong { font-size: 2rem; font-weight: 700; color: var(--na-dark); line-height: 1.15; }
.ckt-na-stat span { font-size: 0.8125rem; color: var(--na-muted); }

/* Khung section */
.ckt-na-sec { padding-top: 72px; scroll-margin-top: 70px; }
.ckt-na-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; border-top: 2px solid var(--wp--preset--color--contrast); padding-top: 14px; margin-bottom: 28px; }
.ckt-na-head h2 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.ckt-na-head p { margin-top: 6px; font-size: 0.9375rem; color: var(--na-muted); max-width: 620px; line-height: 1.55; }
.ckt-na-head.is-small { margin-bottom: 18px; }
.ckt-na-head.is-small h2 { font-size: 1.375rem; }
.ckt-na-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ckt-na-aud { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.ckt-na-aud span { font-size: 0.8125rem; font-weight: 700; color: var(--na-brand); }
.ckt-na-aud b { font-size: 1.0625rem; }
.ckt-na-aud p, .ckt-na-benefits p, .ckt-na-steps p { font-size: 0.875rem; line-height: 1.55; color: var(--na-muted); }

/* Chip lọc */
.ckt-na-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ckt-na-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--na-line); background: #fff; font: 500 0.8125rem/1 var(--wp--preset--font-family--be-vietnam-pro); color: var(--na-muted); cursor: pointer; white-space: nowrap; }
.ckt-na-chip:hover { border-color: var(--na-dark); color: var(--na-dark); }
.ckt-na-chip.is-on, .ckt-na-chip:has(input:checked) { background: var(--na-dark); border-color: var(--na-dark); color: #fff; }
.ckt-na-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ckt-na-chip:has(input:focus-visible) { outline: 2px solid var(--na-brand); outline-offset: 2px; }

/* Sơ đồ vị trí */
.ckt-na-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ckt-na-maps:has(> .ckt-na-map[hidden]) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.ckt-na-map[hidden] { display: none; }
.ckt-na-map { padding: 18px; }
.ckt-na-map-title { font-size: 0.8125rem; font-weight: 700; margin-bottom: 12px; }
.ckt-na-frame { border: 1px solid var(--na-line); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--wp--preset--color--base); }
.ckt-na-ph { background: var(--na-line); border-radius: 3px; flex: 0 0 auto; }
.ckt-na-ph.is-dark { background: var(--na-dark); }
.ckt-na-split { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.ckt-na-split.is-list { grid-template-columns: 1fr 2fr; }
.ckt-na-col { display: flex; flex-direction: column; gap: 6px; }
.ckt-na-col .ckt-na-ph { width: 100% !important; }
.ckt-na-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ckt-na-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ckt-na-row4 .ckt-na-ph, .ckt-na-row2 .ckt-na-ph, .ckt-na-split > .ckt-na-ph { width: 100% !important; }
.ckt-na-article { width: 80%; margin: 0 auto; display: flex; flex-direction: column; gap: 7px; }
.ckt-na-sticky-demo { width: 70%; margin: 0 auto; }
.ckt-na-sticky-demo .ckt-na-slot { background: #fff; }
.ckt-na-slot { border: 2px dashed var(--na-brand); background: rgba(180, 104, 43, 0.08); border-radius: 6px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 0.6875rem; font-weight: 700; color: var(--wp--preset--color--accent-1); flex: 0 0 auto; overflow: hidden; white-space: nowrap; }
.ckt-na-slot .ckt-na-code { width: 22px; height: 22px; font-size: 0.625rem; }
.ckt-na-code { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: var(--na-brand); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.ckt-na-code.is-green { background: var(--wp--preset--color--accent-3); }
.ckt-na-code.is-dark { background: var(--na-dark); }

/* Bảng vị trí */
.ckt-na-table { overflow: hidden; }
.ckt-na-tr { display: grid; grid-template-columns: 64px minmax(0, 2.4fr) minmax(0, 1.5fr) 150px minmax(0, 1.4fr) minmax(0, 1.3fr) 120px; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--na-line); font-size: 0.875rem; line-height: 1.45; }
.ckt-na-tr[hidden], .ckt-na-grp[hidden] { display: none; }
.ckt-na-th { background: var(--wp--preset--color--base-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--na-muted); padding-top: 12px; padding-bottom: 12px; }
.ckt-na-grp { background: var(--wp--preset--color--base); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent-1); padding: 10px 16px; border-bottom: 1px solid var(--na-line); }
.ckt-na-table > :last-child { border-bottom: 0; }
.ckt-na-name b { display: block; font-size: 0.9375rem; }
.ckt-na-name small, .ckt-na-target { font-size: 0.8125rem; color: var(--na-muted); }
.ckt-na-price { font-weight: 700; white-space: nowrap; }
.ckt-na .r { text-align: right; }
.ckt-na-dev { display: flex; gap: 4px; flex-wrap: wrap; }
.ckt-na-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }
.t-pc { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--accent-1); }
.t-mb { background: #E6F0EB; color: var(--wp--preset--color--accent-3); }
.t-tb { background: #EEE9F5; color: #4E3B7A; }
.ckt-na-pick { border: 0; background: none; padding: 6px 0; font: 600 0.8125rem/1.2 var(--wp--preset--font-family--be-vietnam-pro); color: var(--na-brand); cursor: pointer; white-space: nowrap; }
.ckt-na-pick:hover { color: var(--wp--preset--color--accent-1); }
.ckt-na-pick.is-on { color: var(--wp--preset--color--accent-3); }
.ckt-na-note { margin-top: 12px !important; font-size: 0.8125rem; color: var(--na-muted); }

/* Quyền lợi, quy trình */
.ckt-na-benefits > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 3px solid var(--na-brand); }
.ckt-na-benefits b { font-size: 1.0625rem; }
.ckt-na-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ckt-na-steps li { display: flex; flex-direction: column; gap: 10px; padding: 0 24px; border-left: 1px solid var(--na-line); }
.ckt-na-steps li:first-child { padding-left: 0; border-left: 0; }
.ckt-na-steps b { font-size: 1rem; }

/* Quy định + FAQ */
.ckt-na-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.ckt-na-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; line-height: 1.55; }
.ckt-na-faq { border-bottom: 1px solid var(--na-line); padding: 16px 0; }
.ckt-na-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 0.9375rem; cursor: pointer; }
.ckt-na-faq summary::-webkit-details-marker { display: none; }
.ckt-na-faq summary::after { content: "+"; color: var(--na-brand); font-weight: 700; }
.ckt-na-faq[open] summary::after { content: "−"; }
.ckt-na-faq p { margin-top: 8px; font-size: 0.875rem; line-height: 1.6; color: var(--na-muted); }

/* Form liên hệ */
.ckt-na-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--na-dark); border-radius: 14px; overflow: hidden; }
.ckt-na-contact-info { padding: 44px; color: var(--wp--preset--color--accent-4); display: flex; flex-direction: column; gap: 14px; font-size: 0.875rem; line-height: 1.6; }
.ckt-na-contact-info .ckt-na-kick { color: var(--na-brand); }
.ckt-na-contact-info h2 { margin: 0; color: #fff; font-size: 1.875rem; font-weight: 700; line-height: 1.25; }
.ckt-na-contact-info .ckt-na-lead { color: #CFC3B4; font-size: 1rem; margin-bottom: 8px; }
.ckt-na-contact-info p > span { color: #9C8F80; }
.ckt-na-form { background: #fff; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-content: start; }
.ckt-na-form .is-full { grid-column: 1 / -1; }
.ckt-na-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; font-weight: 700; margin: 0; padding: 0; border: 0; min-width: 0; }
.ckt-na-field legend { padding: 0; margin-bottom: 6px; }
.ckt-na-field input, .ckt-na-field select, .ckt-na-field textarea { width: 100%; height: 44px; border: 1px solid #D9CBB8; border-radius: 8px; background: #fff; padding: 0 14px; font: 400 0.9375rem/1.4 var(--wp--preset--font-family--be-vietnam-pro); color: var(--wp--preset--color--contrast); }
.ckt-na-field textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.ckt-na-field input:focus, .ckt-na-field select:focus, .ckt-na-field textarea:focus { outline: none; border-color: var(--na-brand); box-shadow: 0 0 0 3px rgba(180, 104, 43, 0.15); }
.ckt-na-picks { display: flex; flex-wrap: wrap; gap: 8px; font-weight: 400; }
.ckt-na-picks .ckt-na-chip { position: relative; }
.ckt-na-submit { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; font-size: 0.75rem; color: var(--na-muted); }
.ckt-na-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ckt-na-msg { grid-column: 1 / -1; padding: 12px 16px; border-radius: 8px; font-size: 0.875rem; font-weight: 700; }
.ckt-na-msg.is-ok { background: #E6F0EB; color: var(--wp--preset--color--accent-3); }
.ckt-na-msg.is-err { background: #FBEAE5; color: #9B2C1A; }

/* Thanh chọn vị trí (điện thoại) */
.ckt-na-bar { display: none; }

@media (max-width: 1024px) {
	.ckt-na-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ckt-na-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ckt-na-maps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ckt-na-tr { grid-template-columns: 52px minmax(0, 2fr) minmax(0, 1.4fr) 120px minmax(0, 1fr) 110px; }
	.ckt-na-tr > :nth-child(5) { display: none; }
	.ckt-na-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.ckt-na-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
	.ckt-na-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 781px) {
	.ckt-na-br { display: none; }
	.ckt-na-hero { padding: 18px 0 32px; }
	.ckt-na-crumb { margin-bottom: 22px; font-size: 0.75rem; }
	.ckt-na-hero-text { gap: 12px; }
	.ckt-na-stats { gap: 10px; }
	.ckt-na-stat { padding: 14px; }
	.ckt-na-stat strong { font-size: 1.375rem; }
	.ckt-na-stat span { font-size: 0.75rem; }
	.ckt-na-actions { flex-direction: column; }
	.ckt-na-actions .ckt-na-btn { width: 100%; }
	.ckt-na-hero-grid { gap: 22px; }
	.ckt-na-sec { padding-top: 44px; }
	.ckt-na-head { margin-bottom: 18px; padding-top: 12px; }
	.ckt-na-head h2 { font-size: 1.375rem; }
	.ckt-na-head p { font-size: 0.875rem; }
	.ckt-na-grid4 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ckt-na-aud { padding: 14px 16px; display: grid; grid-template-columns: 24px 1fr; gap: 2px 12px; }
	.ckt-na-aud span { grid-row: span 2; }
	.ckt-na-aud b { font-size: 0.9375rem; }
	.ckt-na-benefits { gap: 18px; }
	.ckt-na-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--wp--style--root--padding-left, 20px)); padding: 0 var(--wp--style--root--padding-left, 20px); width: calc(100% + 2 * var(--wp--style--root--padding-left, 20px)); }
	.ckt-na-chips::-webkit-scrollbar { display: none; }
	.ckt-na-maps, .ckt-na-maps:has(> .ckt-na-map[hidden]) { grid-template-columns: minmax(0, 1fr); }
	.ckt-na-map { padding: 14px; display: flex; flex-direction: column; align-items: center; }
	.ckt-na-map-title { align-self: flex-start; }
	.ckt-na-frame { width: 220px; border: 6px solid var(--wp--preset--color--contrast); border-radius: 22px; padding: 10px 8px; gap: 6px; }
	.ckt-na-article { width: 100%; }
	.ckt-na-sticky-demo { width: 100%; }
	.ckt-na-row4 { grid-template-columns: 1fr 1fr; }
	.ckt-na-slot { font-size: 0.625rem; gap: 6px; padding: 0 6px; }
	.ckt-na-slot .ckt-na-code { width: 18px; height: 18px; font-size: 0.5625rem; }
	.ckt-na-th { display: none; }
	.ckt-na-tr { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "code name name" "code size size" "code price pick"; gap: 4px 12px; padding: 14px 16px; align-items: start; }
	.ckt-na-tr > :nth-child(1) { grid-area: code; }
	.ckt-na-tr > :nth-child(2) { grid-area: name; }
	.ckt-na-tr > :nth-child(3) { grid-area: size; font-size: 0.8125rem; color: var(--na-muted); }
	.ckt-na-tr > :nth-child(4) { display: none; }
	.ckt-na-tr > :nth-child(6) { grid-area: price; text-align: left; align-self: center; }
	.ckt-na-tr > :nth-child(7) { grid-area: pick; align-self: center; }
	.ckt-na-tr .ckt-na-code { width: 30px; height: 30px; font-size: 0.75rem; }
	.ckt-na-name small { display: none; }
	.ckt-na-steps { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.ckt-na-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; padding: 0; border-left: 0; }
	.ckt-na-steps li .ckt-na-code { grid-row: span 2; width: 30px; height: 30px; }
	.ckt-na-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.ckt-na-two > div + div { padding-top: 44px; }
	.ckt-na-contact { border-radius: 0; margin: 0 calc(-1 * var(--wp--style--root--padding-left, 20px)); }
	.ckt-na-contact-info { padding: 28px 20px 18px; }
	.ckt-na-contact-info h2 { font-size: 1.375rem; }
	.ckt-na-form { grid-template-columns: minmax(0, 1fr); margin: 0 20px 28px; padding: 18px; border-radius: 12px; gap: 14px; }
	.ckt-na-field input, .ckt-na-field select { height: 46px; font-size: 1rem; }
	.ckt-na-submit { flex-direction: column-reverse; align-items: stretch; }
	.ckt-na-submit .ckt-na-btn { width: 100%; }
	.ckt-na { padding-bottom: 44px; }
	body.ckt-na-page { padding-bottom: 68px; }
	.ckt-na-bar:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; align-items: center; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--na-line); box-shadow: 0 -6px 16px rgba(59, 36, 20, 0.08); }
	.ckt-na-bar > div { flex: 1; display: flex; flex-direction: column; font-size: 0.8125rem; line-height: 1.35; min-width: 0; }
	.ckt-na-bar small { font-size: 0.75rem; color: var(--na-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.ckt-na-bar .ckt-na-btn { height: 44px; padding: 0 18px; }
}

/* Điện thoại: theo quy chuẩn chung (lề trang 8px, đệm khung 12px, bo góc khung 10px) - xem global.css */
@media (max-width: 600px) {
	.ckt-na-stat, .ckt-na-aud, .ckt-na-map { padding: var(--ckt-card-pad, 12px); }
	.ckt-na-tr { padding: var(--ckt-card-pad, 12px); gap: 4px 10px; }
	.ckt-na-grp { padding: 10px var(--ckt-card-pad, 12px); }
	.ckt-na-contact-info { padding: 28px var(--wp--style--root--padding-left, 8px) 18px; }
	.ckt-na-form { margin: 0 var(--wp--style--root--padding-left, 8px) 28px; padding: var(--ckt-card-pad, 12px); border-radius: var(--ckt-card-radius, 10px); }
	.ckt-na-bar:not([hidden]) { padding-left: var(--wp--style--root--padding-left, 8px); padding-right: var(--wp--style--root--padding-right, 8px); }
}