/*
Theme Name: Golden Town
Theme URI: https://goldentown.vn
Author: Golden Town
Description: Theme riêng cho goldentown.vn. Cổ điển, không page builder, không framework CSS. Schema và meta do Yoast SEO xuất.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: goldentown
*/

/* ===== Font tự host (OFL): Be Vietnam Pro 400/700, Newsreader Italic 400; subset vietnamese + latin ===== */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/be-vietnam-pro-vietnamese-400.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/be-vietnam-pro-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/be-vietnam-pro-vietnamese-700.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/be-vietnam-pro-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/newsreader-vietnamese-400-italic.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/newsreader-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Màu rút từ ảnh thật (đo bằng magick, xem README mục Màu) ===== */
:root{
  --giay:#F5F2EA;        /* tường trắng ngà */
  --sat:#1E1D1B;         /* ống sắt kệ */
  --kim-loai:#3E3A33;    /* chữ nổi GOLDEN TOWN */
  --vang-tuong:#EED001;  /* tường vàng, đo ở ảnh 01 */
  --go:#A65B30;          /* mặt gỗ bàn, kệ */
  --do-tranh:#C63B1E;    /* chữ đỏ trên tranh văn phòng */
  --ke:#DDD6C6;          /* đường kẻ mảnh */
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Newsreader","Noto Serif",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--giay);color:var(--sat);font:400 17px/1.65 var(--font)}
img,picture{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--go);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sat);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--sat);color:var(--giay);padding:10px 16px;border-radius:4px;font-weight:700;z-index:50}
.skip:focus{left:8px}
.wrap{width:100%;max-width:1248px;margin-inline:auto;padding-inline:24px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(34px,4.7vw,64px);line-height:1.15}
h2{font-size:clamp(28px,3vw,40px);line-height:1.2}
h3{font-size:clamp(21px,1.9vw,26px);line-height:1.25}

/* Nút và liên kết dạng nút */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border:1px solid var(--sat);border-radius:4px;background:var(--sat);color:var(--giay);font:700 16px/1.2 var(--font);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.btn:hover{background:var(--vang-tuong);color:var(--sat);text-decoration:none}
.tel{color:var(--sat);font-weight:700;text-decoration:none;white-space:nowrap}
.tel:hover{text-decoration:underline;text-decoration-thickness:2px}

/* ===== Khối 0: đầu trang ===== */
.hdr{background:var(--giay);border-bottom:1px solid var(--ke);position:relative;z-index:20}
.hdr-in{display:flex;align-items:center;gap:32px;min-height:76px}
.logo{display:block;flex:none;line-height:0}
.logo img{width:150px;height:auto}
.nav{flex:1}
.nav-list{display:flex;gap:28px}
.nav a{color:var(--sat);text-decoration:none;font-size:16px;padding:8px 0}
.nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav-tel{display:none}
.hdr-r{display:flex;align-items:center;gap:20px}
.menu-btn{display:none;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid var(--sat);border-radius:4px;background:transparent;cursor:pointer;position:relative}
.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{position:absolute;left:11px;width:20px;height:2px;background:var(--sat);content:""}
.menu-btn .bars{top:20px}
.menu-btn .bars::before{left:0;top:-6px}
.menu-btn .bars::after{left:0;top:6px}

/* ===== Khối 1: hero ===== */
.hero{padding:72px 0 56px}
.hero-text{grid-column:1/8;grid-row:1}
.hero-fig{grid-column:8/13;grid-row:1;margin-top:48px}
.hero-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero h1{max-width:15em}
.lead{max-width:34em;margin-top:28px;font-size:19px}
.hero-cta{margin-top:32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-meta{grid-column:1/8;margin-top:56px;font-size:15px;line-height:1.5;color:var(--kim-loai)}
figcaption{margin-top:10px;font:italic 400 15px/1.5 var(--serif);color:var(--kim-loai)}

/* ===== Khối 2: câu chuyện ===== */
.story{padding:64px 0 96px}
.quote{grid-column:1/6;align-self:start;position:sticky;top:32px}
.quote p{font:italic 400 36px/1.3 var(--serif)}
.values{grid-column:7/13}
.values p{padding:28px 0;border-top:1px solid var(--ke)}
.values p:first-child{padding-top:0;border-top:0}
.values strong{display:block;font-size:19px}

/* ===== Khối 3: dịch vụ ===== */
.services{padding:0 0 128px}
.services h2{margin-bottom:32px}
.bang{border-top:1px solid var(--kim-loai)}
.hang{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--ke)}
.hang h3{grid-column:1/5}
.hang>p:nth-child(2){grid-column:5/10}
.hang .lk{grid-column:10/13;display:flex;flex-direction:column;gap:6px}
.hang-dai{padding:48px 0}

/* ===== Khối 4: Mái nhà Golden Town ===== */
.vang{background:var(--vang-tuong);color:var(--sat);overflow:hidden}
.vang .grid{align-items:center}
.vang a{color:var(--sat)}
.mn-anh{grid-column:1/8;margin-left:min(-24px,calc((1200px - 100vw) / 2))}
.mn-anh img{width:100%}
.mn-anh figcaption{padding-left:24px;color:var(--sat)}
.mn-chu{grid-column:9/13;padding:64px 0}
.mn-chu p{margin-top:20px}
.mn-chu .so{font-weight:700;font-size:19px}
.mn-chu .nguon{margin-top:8px;font-size:14px;color:var(--sat)}
.anh-hang{padding-top:64px}
.anh-hang .dai img{width:100%}
.anh-hai{margin-top:48px}
.a7{grid-column:1/8}
.a5{grid-column:8/13}
.anh-hai img{width:100%}

/* ===== Khối 5: khách hàng ===== */
.khach{padding:128px 0 96px}
.khach h2{margin-bottom:32px}
.ten{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:1px solid var(--kim-loai)}
.ten li{padding:16px 0;border-bottom:1px solid var(--ke);font-size:22px;font-weight:700;line-height:1.3}

/* ===== Khối 6: kiến thức ===== */
.know{padding:0 0 128px}
.know h2{margin-bottom:32px}
.k-lon{grid-column:1/8}
.k-lon .muc h3{font-size:clamp(22px,2vw,26px)}
.k-nho{grid-column:9/13}
.muc{padding:20px 0;border-bottom:1px solid var(--ke)}
.muc h3{font-size:19px;line-height:1.35}
.muc h3 a{color:var(--sat);text-decoration:none}
.muc h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.muc .ngay{margin-top:4px;font-size:15px;color:var(--kim-loai)}
.muc .trich{margin-top:12px;max-width:36em}
.k-lon .muc{padding-top:0}
.more{margin-top:32px;font-weight:700}

/* ===== Khối 7: liên hệ ===== */
.lien-he{padding:0 0 128px;scroll-margin-top:16px}
.lh-tin{grid-column:1/6}
.lh-tin>p{margin-top:20px}
.lh-tin h2+p{margin-top:16px;max-width:26em}
.form-khung{grid-column:7/13;background:#fff;border:1px solid var(--kim-loai);padding:32px}
.form-khung form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-khung .gt-full,.form-khung .wpcf7-response-output,.form-khung .screen-reader-response{grid-column:1/-1}
.form-khung p{margin:0}
.form-khung label{display:block;font-size:16px}
.form-khung .wpcf7-form-control-wrap{display:block;margin-top:6px}
.form-khung input[type=text],.form-khung input[type=tel],.form-khung input[type=email],.form-khung input[type=url],.form-khung textarea{width:100%;font:inherit;font-size:16px;color:var(--sat);background:#fff;border:1px solid var(--kim-loai);border-radius:4px;padding:11px 12px}
.form-khung input[type=submit]{min-height:44px;padding:10px 22px;border:1px solid var(--sat);border-radius:4px;background:var(--sat);color:var(--giay);font:700 16px/1.2 var(--font);cursor:pointer;transition:background-color .15s,color .15s}
.form-khung input[type=submit]:hover{background:var(--vang-tuong);color:var(--sat)}
.form-khung .wpcf7-not-valid{border-color:var(--do-tranh)}
.form-khung .wpcf7-not-valid-tip{color:var(--do-tranh);font-size:15px;margin-top:4px;display:block}
.form-khung .wpcf7-response-output{margin:0;padding:10px 14px;border:0;border-left:4px solid var(--vang-tuong);background:var(--giay);font-size:16px}
.form-khung .wpcf7-form.invalid .wpcf7-response-output,.form-khung .wpcf7-form.failed .wpcf7-response-output{border-left-color:var(--do-tranh);color:var(--do-tranh)}
.form-khung .wpcf7-spinner{display:none}

/* ===== Khối 8: chân trang ===== */
.ftr{background:var(--sat);color:var(--giay);padding:64px 0 40px;font-size:16px}
.ftr .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.ftr a{color:var(--giay)}
.ftr :focus-visible{outline-color:var(--giay)}
.ftr p+p{margin-top:8px}
.ftr-logo p{margin-top:20px;max-width:24em}
.fh{font-weight:700;margin-bottom:10px}
.ftr-menu{margin-top:16px}
.ftr-menu li+li{margin-top:6px}
.copy{grid-column:1/-1;margin-top:8px;padding-top:24px;border-top:1px solid var(--kim-loai);font-size:15px}

/* ===== Trang trong: bài viết, danh mục, 404 ===== */
.read{max-width:728px}
.dau-bai,.dau-trang{padding:56px 0 40px}
.dau-bai h1,.dau-trang h1{font-size:clamp(30px,3.4vw,44px);line-height:1.2}
.crumbs{margin-bottom:20px;font-size:15px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--kim-loai)}
.meta{margin-top:16px;font-size:15px;color:var(--kim-loai)}
.meta a{color:var(--kim-loai)}
.mo-ta{margin-top:16px;max-width:36em}
.dau-trang .tim{margin-top:24px}
.than-bai{padding:0 0 72px}
.danh-sach{padding:0 0 96px}
.nho{font-size:22px;margin-bottom:8px}
.art-img{margin:0 0 32px}
.art-img img{width:100%}
.prose{font-size:18px;line-height:1.8;overflow-wrap:anywhere}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(24px,2.6vw,30px);line-height:1.25;margin-top:1.9em;scroll-margin-top:24px}
.prose h3{font-size:clamp(20px,2.2vw,23px);line-height:1.3;margin-top:1.6em}
.prose h4{font-size:19px;margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.4em}
.prose img,.prose figure{max-width:100%;height:auto}
.prose img{margin-inline:auto}
.prose .wp-caption{width:auto!important;max-width:100%}
.prose figure{margin-top:1.6em}
.prose figcaption{text-align:left}
.prose blockquote{border-left:4px solid var(--vang-tuong);padding:.2em 0 .2em 1.2em;font:italic 400 21px/1.5 var(--serif);color:var(--kim-loai)}
.prose code{background:var(--ke);padding:.1em .4em;font-size:.9em}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;font-size:16px;width:100%}
.prose th,.prose td{border:1px solid var(--ke);padding:10px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--ke)}
.toc{border-top:1px solid var(--kim-loai);border-bottom:1px solid var(--ke);padding:16px 0;margin-bottom:2em;font-size:16px;line-height:1.6}
.toc summary{font-weight:700;cursor:pointer}
.toc ol{margin:12px 0 0 1.2em;list-style:decimal}
.toc li+li{margin-top:6px}
.toc a{color:var(--sat)}
.tac-gia{margin-top:48px;padding-top:24px;border-top:1px solid var(--ke);font-size:16px}
.khoi-ke{margin-bottom:72px}
.khoi-ke .wrap{border-top:1px solid var(--kim-loai);border-bottom:1px solid var(--ke);padding-block:32px}
.khoi-ke h2{font-size:clamp(24px,2.6vw,30px)}
.khoi-ke p{margin-top:12px}
.khoi-ke p:last-child{margin-top:20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.lien-quan{padding-bottom:96px}
.lien-quan h2{font-size:24px;margin-bottom:8px}
.lien-quan .muc:last-child{border-bottom:0}
.lk-doc li{border-bottom:1px solid var(--ke)}
.lk-doc li:first-child{border-top:1px solid var(--kim-loai)}
.lk-doc a{display:block;padding:14px 0;font-size:19px;font-weight:700}

/* Tìm kiếm */
.tim{display:flex;gap:8px;max-width:520px}
.tim input[type=search]{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--sat);background:#fff;border:1px solid var(--kim-loai);border-radius:4px;padding:10px 12px;min-height:44px}

/* Phân trang: ô vuông 44x44, URL dạng /page/N */
.pager{margin-top:40px}
.pager .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pager .page-numbers{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--kim-loai);border-radius:4px;font-weight:700;color:var(--sat);text-decoration:none;background:transparent}
.pager a.page-numbers:hover{background:var(--vang-tuong)}
.pager .current{background:var(--sat);color:var(--giay);border-color:var(--sat)}
.pager .dots{border-color:transparent}

/* ===== Màn hẹp ===== */
@media (max-width:960px){
  .hero{padding:48px 0 48px}
  .hero-text,.hero-fig,.hero-meta{grid-column:1/-1}
  .hero-fig{grid-row:auto;margin-top:32px}
  .hero-fig img{aspect-ratio:4/3}
  .hero-meta{margin-top:24px}
  .quote,.values,.k-lon,.k-nho,.lh-tin,.form-khung,.a7,.a5{grid-column:1/-1}
  .quote{position:static}
  .values{margin-top:32px}
  .hang h3{grid-column:1/8}
  .hang .lk{grid-column:8/13}
  .hang>p:nth-child(2){grid-column:1/-1;margin-top:8px;grid-row:2}
  .mn-anh{grid-column:1/-1;margin-left:-24px;margin-right:-24px}
  .mn-chu{grid-column:1/-1;padding:40px 0 56px}
  .k-nho{margin-top:8px}
  .form-khung{margin-top:40px}
  .anh-hai figure+figure{margin-top:32px}
  .ftr .wrap{grid-template-columns:1fr 1fr}
  .ftr-logo{grid-column:1/-1}
}
@media (max-width:900px){
  .hdr-in{gap:16px;min-height:64px}
  .hdr-r{display:none}
  .menu-btn{display:block}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--giay);border-bottom:1px solid var(--ke);padding:8px 24px 16px}
  .js .nav-open .nav{display:block}
  .nav-list{flex-direction:column;gap:0}
  .nav a{display:block;padding:12px 0;min-height:48px;border-bottom:1px solid var(--ke)}
  .nav-tel{display:block;font-weight:700;border-bottom:0!important}
  .nav{flex:none}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .nav{flex:1}
  html:not(.js) .nav-list{flex-direction:row;flex-wrap:wrap;gap:16px}
}
@media (max-width:600px){
  body{font-size:17px}
  .wrap{padding-inline:20px}
  .hero{padding-top:32px}
  .lead{font-size:17px;margin-top:20px}
  .hero-cta .btn{width:100%}
  .hero-meta{display:block}
  .quote p{font-size:24px;line-height:1.35}
  .story{padding:48px 0 64px}
  .services{padding-bottom:96px}
  .hang{display:block;padding:24px 0}
  .hang-dai{padding:32px 0}
  .hang>p:nth-child(2){margin-top:8px}
  .hang .lk{margin-top:12px;flex-direction:row;gap:20px;flex-wrap:wrap}
  .mn-anh{margin-left:-20px;margin-right:-20px}
  .mn-anh figcaption{padding-left:20px}
  .anh-hang{padding-top:40px}
  .khach{padding:96px 0 72px}
  .ten{grid-template-columns:1fr}
  .ten li{font-size:20px}
  .know,.lien-he{padding-bottom:88px}
  .form-khung{padding:20px}
  .form-khung form{grid-template-columns:1fr}
  .ftr .wrap{grid-template-columns:1fr;gap:32px}
  .dau-bai,.dau-trang{padding:36px 0 28px}
  .prose{font-size:17px}
  .tim{flex-wrap:wrap}
  .tim .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}