/*
Theme Name: Thanh Ly 24H
Theme URI: https://thanhly24h.vn
Author: Thanh Ly 24H
Description: Theme WordPress tuy chinh cho dich vu thanh ly cong ty, truong hoc, nha hang, khach san va thiet bi dien tu. Toi uu SEO, toc do tai trang va hien thi tren di dong.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: thanhly24h
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Y tuong: "Phieu dinh gia / Bien ban thanh ly" - the tag giay treo tren
   moi mon do duoc dinh gia, con dau tham dinh mau do, giay kraft.
   ========================================================================== */
:root{
  /* mau sac */
  --ink:        #20241f;   /* muc but - chu chinh, gan den nhung am xanh reu */
  --ink-soft:   #52564c;   /* chu phu */
  --kraft:      #d9cba6;   /* nen giay kraft - mau chinh cua trang */
  --kraft-dark: #c2b088;   /* giay kraft dam hon, dung cho dai phan cach */
  --paper:      #faf6ea;   /* giay trang nga - nen cac the/card */
  --paper-line: #e6dabb;   /* duong ke tren giay */
  --stamp:      #b23c26;   /* do con dau tham dinh - dung cho CTA, nhan */
  --stamp-dark: #8c2e1c;
  --steel:      #2f4a56;   /* xanh thep cong nghiep - dung cho nen toi, nut phu */
  --steel-light:#4d7383;
  --white:      #ffffff;
  --line:       rgba(32,36,31,.14);

  /* typography */
  --font-display: 'Archivo Black', 'Be Vietnam Pro', sans-serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* nhip do */
  --radius-tag: 6px;
  --shadow-tag: 0 10px 30px -12px rgba(32,36,31,.35);
  --container: 1180px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
  margin:0;
  background:var(--kraft);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;margin:0 0 .5em;letter-spacing:.01em;text-transform:uppercase}
p{margin:0 0 1em}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--stamp);outline-offset:3px}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--stamp-dark);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:.9em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--stamp);display:inline-block}

.section{padding:88px 0}
.section--tight{padding:56px 0}
.section-head{max-width:640px;margin-bottom:48px}
.section-head p{color:var(--ink-soft);font-size:1.05rem}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.25rem;text-transform:none}

/* ==========================================================================
   3. NUT BAM (BUTTONS)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-mono);font-weight:600;font-size:.95rem;
  letter-spacing:.03em;
  padding:.9em 1.5em;
  border-radius:var(--radius-tag);
  border:2px solid var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--stamp{background:var(--stamp);border-color:var(--stamp);color:var(--white);box-shadow:var(--shadow-tag)}
.btn--stamp:hover{background:var(--stamp-dark);border-color:var(--stamp-dark)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--kraft)}
.btn--light{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--kraft);
  border-bottom:2px dashed var(--kraft-dark);
}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--kraft);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:.75rem;
  border:2px solid var(--ink);
  position:relative;
}
.brand__mark::after{
  content:"";position:absolute;inset:4px;border:1px dashed var(--kraft);border-radius:50%;
}
.brand__name{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.brand__tag{display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft);text-transform:none;letter-spacing:.03em;margin-top:2px}

.main-nav{display:flex;gap:0;flex-wrap:nowrap}
.main-nav a{
  padding:8px 9px;font-size:.8rem;font-weight:600;border-radius:var(--radius-tag);
  transition:background .15s ease;white-space:nowrap;
}
.main-nav a:hover, .main-nav a.is-active{background:var(--paper)}

.header-cta{display:flex;align-items:center;gap:10px}
.header-cta .icon-btn{border-color:var(--ink)}
.header-cta .phone{
  font-family:var(--font-mono);font-weight:700;font-size:1rem;
  display:flex;flex-direction:column;line-height:1.2;
}
.header-cta .phone small{font-weight:500;color:var(--ink-soft);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}

.nav-toggle{display:none;background:none;border:2px solid var(--ink);border-radius:var(--radius-tag);padding:8px 10px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

/* Menu mobile: dung id de thang duoc rule .main-nav{display:none} trong media query ben duoi */
#mobileNav{display:none;background:var(--kraft)}
#mobileNav a{padding:12px 4px;border-bottom:1px dashed var(--kraft-dark);font-weight:600}
#mobileNav a:last-child{border-bottom:none}

/* ==========================================================================
   5. HERO - TAG DINH GIA
   ========================================================================== */
.hero{position:relative;padding:64px 0 100px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:.4em}
.hero h1 em{font-style:normal;color:var(--stamp)}
.hero__lead{font-size:1.15rem;color:var(--ink-soft);max-width:46ch;margin-bottom:1.6em}

.hero__stats{display:flex;gap:28px;margin-top:40px;flex-wrap:wrap}
.hero__stats div{font-family:var(--font-mono)}
.hero__stats strong{display:block;font-size:1.7rem;font-family:var(--font-display);color:var(--ink)}
.hero__stats span{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}

/* tam the treo - signature element */
.appraisal-tag{
  position:relative;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:38px 30px 30px;
  max-width:400px;
  margin-left:auto;
  transform:rotate(2.5deg);
  box-shadow:var(--shadow-tag);
}
.appraisal-tag::before{ /* lo treo the */
  content:"";
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;
  background:var(--kraft);border:2px solid var(--ink);
}
.appraisal-tag::after{ /* day treo */
  content:"";
  position:absolute;top:-38px;left:50%;transform:translateX(-50%) rotate(-2.5deg);
  width:2px;height:26px;background:var(--ink);
}
.appraisal-tag .stamp{
  position:absolute;right:-14px;top:36px;
  font-family:var(--font-mono);font-weight:700;font-size:.8rem;
  color:var(--stamp);border:3px solid var(--stamp);border-radius:50%;
  width:88px;height:88px;display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.2;transform:rotate(12deg);
  background:rgba(250,246,234,.9);letter-spacing:.02em;
}
.appraisal-tag .tag-id{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-soft);letter-spacing:.08em}
.appraisal-tag h3{margin:.5em 0 .3em;font-size:1.3rem}
.appraisal-tag ul{margin-top:14px;display:grid;gap:8px}
.appraisal-tag li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--paper-line);padding-bottom:8px;font-size:.92rem}
.appraisal-tag li b{font-family:var(--font-mono);color:var(--stamp-dark)}

/* ==========================================================================
   6. DOI TUONG PHUC VU
   ========================================================================== */
.audience{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--kraft-dark);border:1px solid var(--kraft-dark);border-radius:var(--radius-tag);overflow:hidden}
.audience__item{background:var(--paper);padding:24px 14px;text-align:center}
.audience__item svg{width:34px;height:34px;margin:0 auto 10px;color:var(--stamp)}
.audience__item span{font-size:.85rem;font-weight:600}

/* ==========================================================================
   7. DICH VU - CAC TAG
   ========================================================================== */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.service-tag{
  position:relative;background:var(--paper);border:1.5px solid var(--ink);
  border-radius:12px;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-tag:hover{transform:translateY(-4px);box-shadow:var(--shadow-tag)}
.service-tag__visual{
  height:172px;
  background:var(--paper);
  border-bottom:2px dashed var(--kraft-dark);
  position:relative;
}
.service-tag__visual svg{width:100%;height:100%}
.service-tag__visual .tag-id-float{position:absolute;top:12px;left:14px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--stamp-dark);background:var(--paper);border:1.5px dashed var(--stamp);border-radius:20px;padding:2px 10px;z-index:1}
.service-tag__body{padding:24px 26px 26px}
.service-tag__num{
  font-family:var(--font-mono);font-size:.78rem;color:var(--stamp);
  border:1.5px dashed var(--stamp);border-radius:20px;padding:3px 12px;display:inline-block;margin-bottom:14px;
}
.service-tag h3{margin-bottom:.4em}
.service-tag p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1em}
.service-tag__list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.service-tag__list span{font-size:.78rem;background:var(--kraft);padding:4px 10px;border-radius:20px;color:var(--ink-soft)}
.service-tag__actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.service-tag a.link{font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:var(--ink);border-bottom:2px solid var(--stamp)}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1.5px solid var(--ink);background:var(--white);transition:transform .15s ease, background .15s ease;
}
.icon-btn:hover{transform:translateY(-2px);background:var(--stamp);border-color:var(--stamp);color:var(--white)}
.icon-btn svg{width:18px;height:18px}
.icon-btn--zalo{background:#fff}
.icon-btn--sm{width:30px;height:30px}
.icon-btn--sm svg{width:15px;height:15px}
.inline-zalo{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--steel);margin-top:10px}
.inline-zalo:hover{color:var(--stamp)}

/* ==========================================================================
   8. VI SAO CHON CHUNG TOI
   ========================================================================== */
.why{background:var(--ink);color:var(--kraft);border-radius:18px;padding:64px 48px;position:relative;overflow:hidden}
.why::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(-45deg, rgba(217,203,166,.05) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.why .section-head p{color:#c9c2ac}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.why-item{border-top:2px solid var(--stamp);padding-top:16px}
.why-item svg{width:30px;height:30px;color:var(--stamp);margin-bottom:12px;display:block}
.why-item h3{color:var(--white);font-size:1.1rem}
.why-item p{color:#c9c2ac;font-size:.92rem}

/* ==========================================================================
   9. QUY TRINH
   ========================================================================== */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.process::before{
  content:"";position:absolute;top:26px;left:6%;right:6%;height:2px;
  background-image:linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 16px);
  background-size:16px 2px;
}
.process-step{position:relative;padding:0 16px;text-align:left}
.process-step__dot{
  width:54px;height:54px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;
  margin-bottom:18px;position:relative;z-index:1;
}
.process-step h3{font-size:1.05rem;margin-bottom:.4em}
.process-step p{color:var(--ink-soft);font-size:.9rem}

/* ==========================================================================
   10. TIN TUC
   ========================================================================== */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{background:var(--paper);border:1px solid var(--paper-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.post-card__thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--steel),var(--steel-light));position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.post-card__thumb::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px);
}
.post-card__thumb svg{width:44px;height:44px;color:rgba(250,246,234,.85);position:relative}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;position:relative}
.post-card__thumb .tag-id{position:absolute;bottom:10px;left:10px;background:var(--paper);font-family:var(--font-mono);font-size:.7rem;padding:3px 9px;border-radius:20px;z-index:1}
.post-card__body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.post-card time{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-soft);text-transform:uppercase}
.post-card h3{font-size:1.05rem;margin:.5em 0;text-transform:none}
.post-card p{color:var(--ink-soft);font-size:.9rem;flex:1}
.post-card a.link{font-family:var(--font-mono);font-size:.82rem;font-weight:700;border-bottom:2px solid var(--stamp);align-self:flex-start}

/* ==========================================================================
   11. CTA CUOI TRANG / LIEN HE NHANH
   ========================================================================== */
.cta-strip{
  background:var(--stamp);color:var(--white);border-radius:18px;
  padding:48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-strip h2{color:var(--white);margin:0;font-size:clamp(1.4rem,3vw,2rem)}
.cta-strip p{color:rgba(255,255,255,.85);margin:.4em 0 0}
.cta-strip .btn--light:hover{background:var(--ink);color:var(--kraft)}

/* form lien he */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact-form{background:var(--paper);border:1px solid var(--paper-line);border-radius:14px;padding:34px}
.contact-form .field{margin-bottom:18px}
.contact-form label{display:block;font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;color:var(--ink-soft)}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--ink);border-radius:8px;
  font-family:var(--font-body);font-size:.95rem;background:var(--white);color:var(--ink);
}
.contact-form textarea{min-height:110px;resize:vertical}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:3px solid var(--stamp);outline-offset:1px}
.form-note{font-size:.82rem;color:var(--ink-soft);margin-top:10px}
.contact-info-card{background:var(--ink);color:var(--kraft);border-radius:14px;padding:34px}
.contact-info-card h3{color:var(--white)}
.contact-info-card .row{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed rgba(217,203,166,.25)}
.contact-info-card .row svg{width:22px;height:22px;flex-shrink:0;color:var(--stamp)}
.contact-info-card .row strong{display:block;color:var(--white)}
.contact-info-card .row span{color:#c9c2ac;font-size:.92rem}
.map-embed{border-radius:12px;overflow:hidden;margin-top:20px;border:1px solid var(--paper-line)}
.map-embed iframe{width:100%;height:220px;border:0;display:block}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:var(--kraft);margin-top:90px;padding-top:64px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(217,203,166,.15)}
.site-footer h4{font-family:var(--font-mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:#c9c2ac;margin-bottom:16px}
.site-footer .brand__name, .site-footer .brand__tag{color:var(--kraft)}
.site-footer p{color:#a9a28c;font-size:.92rem}
.footer-links li{margin-bottom:10px}
.footer-links a{color:#c9c2ac;font-size:.92rem}
.footer-links a:hover{color:var(--white)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:.8rem;color:#8b8570;flex-wrap:wrap;gap:10px}
.social-row{display:flex;gap:10px}
.social-row a{width:36px;height:36px;border:1px solid rgba(217,203,166,.3);border-radius:50%;display:flex;align-items:center;justify-content:center}
.social-row a:hover{background:var(--stamp);border-color:var(--stamp)}

/* nut noi (floating) */
.float-actions{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;gap:10px}
.float-actions a{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -6px rgba(32,36,31,.5);border:2px solid var(--ink);
}
.float-actions a.call{background:var(--stamp);color:var(--white)}
.float-actions a.zalo{background:var(--white);color:var(--ink)}
.float-actions svg{width:24px;height:24px}

/* ==========================================================================
   13. TRANG DANH MUC / BAI VIET DON
   ========================================================================== */
.page-hero{padding:56px 0 40px;border-bottom:2px dashed var(--kraft-dark)}
.breadcrumb{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft);margin-bottom:14px}
.breadcrumb a{border-bottom:1px dashed var(--ink-soft)}
.single-post{max-width:760px;margin:0 auto}
.single-post .entry-content{font-size:1.05rem;line-height:1.8}
.single-post .entry-content h2{text-transform:none;font-size:1.5rem;margin-top:1.4em}
.single-post .entry-content h3{margin-top:1.2em}
.single-post .entry-content img{border-radius:10px;margin:1.2em 0}
.single-post .entry-content ul{list-style:disc;padding-left:1.4em;margin-bottom:1em}
.single-post .entry-content ul li{margin-bottom:.4em}
.single-post .entry-content a{border-bottom:2px solid var(--stamp)}
.post-meta{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);margin-bottom:24px}
.pagination{display:flex;gap:10px;margin-top:40px}
.pagination a, .pagination span{padding:8px 14px;border:1.5px solid var(--ink);border-radius:8px;font-family:var(--font-mono);font-size:.85rem}
.pagination .current{background:var(--ink);color:var(--kraft)}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .appraisal-tag{margin:0 auto;transform:rotate(1.5deg)}
  .why-grid{grid-template-columns:1fr 1fr}
  .services{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  #mobileNav:not([hidden]){display:flex;flex-direction:column;padding:6px 24px 16px}
  .header-cta .phone small{display:none}
  .audience{grid-template-columns:repeat(2,1fr)}
  .why{padding:40px 24px}
  .why-grid{grid-template-columns:1fr}
  .process{grid-template-columns:1fr;gap:28px}
  .process::before{display:none}
  .posts{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-strip{flex-direction:column;align-items:flex-start}
}

@media (max-width:1180px) and (min-width:761px){
  .main-nav a{font-size:.72rem;padding:8px 6px}
  .header-cta .phone{font-size:.85rem}
  .header-cta .btn--stamp{font-size:.8rem;padding:.7em 1em}
  .brand__tag{display:none}
}