/*
Theme Name: Cầm Đồ Sinh Viên
Theme URI: https://camdosinhvien.com.vn/
Author: Cầm Đồ Sinh Viên Cần Thơ
Author URI: https://camdosinhvien.com.vn/
Description: Theme WordPress cho website cầm đồ sinh viên — mobile-first, chuẩn SEO, tối ưu tốc độ. Tương thích Rank Math / Yoast SEO, có sẵn Custom Post Type "Banner khuyến mãi" và Customizer để chỉnh thông tin liên hệ không cần sửa code.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cds
*/

  :root{
    --teal-deep:#155a64;
    --teal:#1f7f8c;
    --teal-soft:#4a9ea8;
    --teal-pale:#e4f3f4;
    --ink:#0f2b2e;
    --paper:#fbfaf6;
    --purple:#155a64; /* trước là tím, nay dùng xanh teal đậm của web */
    --amber:#f5b942;
    --line: rgba(15,43,46,0.10);
    --radius-lg: 22px;
    --radius-sm: 12px;
    --shadow: 0 14px 30px -14px rgba(15,43,46,0.35);
  }
  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; color-scheme:light; background:var(--paper); }
  body{
    margin:0;
    font-family:'Be Vietnam Pro', sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    padding-bottom:64px;
    color-scheme:light;
  }
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  h1,h2,h3,h4{font-family:'Sora', 'Be Vietnam Pro', sans-serif; margin:0; line-height:1.2;}
  p{margin:0;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
  .eyebrow-tag{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--teal-pale); color:var(--teal-deep);
    font-weight:600; font-size:13px; padding:6px 14px; border-radius:99px;
    border:1px solid rgba(31,127,140,0.18);
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 22px; border-radius:14px; font-weight:700; font-size:15px;
    border:2px solid transparent; cursor:pointer; transition:transform .15s ease;
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{ background:var(--amber); color:var(--ink); box-shadow:0 10px 22px -8px rgba(245,185,66,.6); }
  .btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
  .btn-ghost{ background:#fff; color:var(--teal-deep); border-color:var(--teal); }
  .btn-purple{ background:var(--purple); color:#fff; box-shadow:0 10px 22px -8px rgba(21,90,100,.5); }
  .btn-block{ width:100%; }

  .topbar{ display:none; background:var(--teal-deep); color:#fff; font-size:12.5px; }
  .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:6px 20px; gap:10px; flex-wrap:wrap;}
  .topbar a{color:#cdeef1;}

  header.site-header{ position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line); }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; }
  .logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; color:var(--teal-deep); min-width:0; flex:1 1 auto; }
  .logo img{ height:32px; width:32px; flex:none; }
  .logo .logo-text{ min-width:0; overflow:hidden; }
  .logo .logo-text .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .logo small{ display:none; font-weight:500; font-size:11px; color:var(--teal-soft); }
  .call-chip{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--teal-pale); color:var(--teal-deep);
    width:38px; height:38px; border-radius:50%; flex:none; font-weight:700; font-size:14px;
  }
  .call-chip svg{flex:none;}
  .call-chip .call-text{ display:none; white-space:nowrap; }
  nav.desktop-nav{display:none;}

  .menu-btn{
    display:flex; align-items:center; justify-content:center; width:38px; height:38px;
    border-radius:50%; border:1px solid var(--line); background:#fff; flex:none; cursor:pointer;
  }
  .menu-btn svg{ pointer-events:none; }

  .mobile-menu{
    position:fixed; inset:0; z-index:80; background:rgba(15,43,46,.5);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .mobile-menu.open{ opacity:1; pointer-events:auto; }
  .mobile-menu-panel{
    position:absolute; top:0; right:0; bottom:0; width:80%; max-width:300px; background:#fff;
    padding:22px 22px 26px; display:flex; flex-direction:column; gap:2px;
    transform:translateX(102%); transition:transform .3s ease; box-shadow:-14px 0 32px rgba(0,0,0,.18);
  }
  .mobile-menu.open .mobile-menu-panel{ transform:translateX(0); }
  .mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .mobile-menu-head span{ font-weight:800; color:var(--teal-deep); font-size:15px; }
  .menu-close{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; color:var(--ink);
  }
  .mobile-menu-panel a{
    padding:13px 6px; font-weight:700; font-size:15px; color:var(--ink);
    border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;
  }
  .mobile-menu-panel a.call-link{ color:var(--teal-deep); border-bottom:none; margin-top:8px; }

  /* ===== HERO — chữ/CTA độc lập, không phụ thuộc ảnh ===== */
  .hero-main{
    background:linear-gradient(165deg, var(--teal-deep), var(--teal) 78%);
    color:#fff; padding:34px 0 30px; text-align:center; position:relative; overflow:hidden;
  }
  .hero-main::before{
    content:""; position:absolute; width:280px; height:280px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
    top:-90px; right:-80px;
  }
  .hero-main .wrap{ position:relative; z-index:1; }
  .hero-chip{
    display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.25); padding:7px 14px; border-radius:99px;
    font-size:12.5px; font-weight:600; margin-bottom:16px;
  }
  .hero-main h1{ font-size:clamp(27px,8vw,42px); font-weight:800; letter-spacing:-.5px; margin-bottom:12px; }
  .hero-main h1 .accent{ color:var(--amber); }
  .hero-main p.lede{ font-size:14.5px; color:#dbf1f2; max-width:38ch; margin:0 auto 22px; line-height:1.6; }
  .hero-ctas{ display:flex; flex-direction:column; gap:10px; max-width:340px; margin:0 auto 24px; }
  .hero-ctas .btn{ width:100%; }
  .hero-stat-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .hero-stat-chip{
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:14px;
    padding:9px 14px; min-width:88px;
  }
  .hero-stat-chip strong{ display:block; font-family:'Sora',sans-serif; font-size:17px; }
  .hero-stat-chip span{ font-size:10.5px; color:#cdeef1; }
  .hero-illustration{ display:none; }

  /* ===== PROMO CAROUSEL — dải banner khuyến mãi, tỉ lệ cố định nên ảnh nào cũng vừa ===== */
  .promo-section{ padding:26px 0 8px; }
  .promo-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .promo-head h2{ font-size:15.5px; font-weight:700; color:var(--teal-deep); display:flex; align-items:center; gap:6px; }
  .promo-viewport{ overflow:hidden; border-radius:18px; box-shadow:0 14px 26px -16px rgba(15,43,46,.4); background:var(--paper); }
  .slider-track{
    display:flex; will-change:transform; touch-action:pan-y; cursor:grab;
    transition:transform .45s cubic-bezier(.22,.68,0,1);
  }
  .slider-track.dragging{ transition:none; cursor:grabbing; }
  .slider-track.dragging img{ pointer-events:none; }
  .promo-slide{ flex:0 0 100%; min-width:100%; }
  .promo-slide a{ display:block; aspect-ratio:12/5; background:var(--paper); }
  .promo-slide img{ width:100%; height:100%; object-fit:contain; object-position:center; }
  .slider-controls{ display:flex; align-items:center; justify-content:center; gap:14px; padding-top:12px; }
  .slider-arrow{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff;
    color:var(--teal-deep); font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
  }
  .slider-arrow:hover{ background:var(--teal-pale); }
  .slider-dots{ display:flex; gap:7px; }
  .slider-dots button{
    width:7px; height:7px; border-radius:99px; border:none; background:var(--line);
    padding:0; cursor:pointer; transition:all .25s ease;
  }
  .slider-dots button.active{ width:20px; background:var(--teal); }

  section{ padding:44px 0; }
  .section-head{ text-align:center; max-width:560px; margin:0 auto 26px; }
  .section-head h2{ font-size:clamp(22px,5.5vw,30px); color:var(--teal-deep); margin-top:10px; }
  .section-head p{ color:#5b6b6d; font-size:14.5px; margin-top:8px; }
  .section-alt{ background:#fff; }

  .intro-grid{ display:grid; gap:22px; }
  .intro-text p{ color:#465759; font-size:15px; line-height:1.7; margin-bottom:16px; }
  .usp-list{ display:grid; gap:14px; margin:20px 0 20px; }
  .usp-item{ display:flex; gap:14px; align-items:flex-start; background:var(--teal-pale); padding:14px; border-radius:var(--radius-sm); }
  .usp-item img{ width:44px; height:44px; object-fit:contain; flex:none; }
  .usp-item h4{ font-size:15.5px; color:var(--teal-deep); margin-bottom:3px; }
  .usp-item p{ font-size:13.5px; color:#4f6062; }
  .intro-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
  .intro-media img{ width:100%; }

  .service-scroll{
    display:flex; gap:14px; overflow-x:auto; padding:4px 20px 14px; margin:0 -20px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .service-scroll::-webkit-scrollbar{display:none;}
  .service-card{
    scroll-snap-align:start; flex:0 0 78%; background:#fff; border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line);
  }
  .service-card .thumb{ aspect-ratio:16/10; background:#eef7f7; padding:14px; display:flex; align-items:center; justify-content:center;}
  .service-card .thumb img{ max-height:100%; object-fit:contain; }
  .service-card .body{ padding:16px 18px 20px; }
  .service-card h3{ font-size:17px; color:var(--teal-deep); margin-bottom:6px; }
  .service-card p{ font-size:13.5px; color:#5b6b6d; margin-bottom:10px; line-height:1.55; }
  .service-card a{ font-weight:700; color:var(--teal); font-size:13.5px; }
  .service-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .service-tags span{ background:var(--teal-pale); color:var(--teal-deep); font-size:11px; font-weight:700; padding:4px 9px; border-radius:99px; }

  .brand-panel{
    background:linear-gradient(160deg, var(--teal-deep), var(--teal) 70%);
    border-radius:var(--radius-lg); padding:26px 20px; color:#fff; text-align:center; margin-bottom:26px;
  }
  .brand-panel img{ width:180px; margin:0 auto 16px; background:rgba(255,255,255,.14); border-radius:20px; padding:14px; }
  .brand-panel h3{ font-size:19px; margin-bottom:6px; }
  .brand-panel p{ font-size:13px; color:#cdeef1; }
  .why-grid{ display:grid; gap:16px; }
  .why-item{ display:flex; gap:14px; align-items:flex-start; }
  .why-num{
    flex:none; width:34px; height:34px; border-radius:50%; background:var(--teal); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  }
  .why-icon{
    flex:none; width:52px; height:52px; border-radius:14px; background:var(--teal-pale);
    display:flex; align-items:center; justify-content:center; padding:10px;
  }
  .why-icon img{ width:100%; height:100%; object-fit:contain; }
  .why-item h4{ font-size:15.5px; color:var(--ink); margin-bottom:4px; }
  .why-item p{ font-size:13.5px; color:#5b6b6d; line-height:1.55; }

  .utility-strip{ background:linear-gradient(120deg,var(--teal-deep),var(--teal-soft)); color:#fff; }
  .utility-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; text-align:center; }
  .utility-grid img{ width:52px; height:52px; object-fit:contain; margin:0 auto 10px; filter:brightness(0) invert(1); }
  .utility-grid h4{ font-size:14.5px; margin-bottom:4px; }
  .utility-grid p{ font-size:12px; color:#dff2f3; line-height:1.5; }

  .cert-scroll{ display:flex; gap:12px; overflow-x:auto; padding:4px 20px; margin:0 -20px; }
  .cert-scroll img{ height:150px; width:auto; border-radius:14px; flex:none; box-shadow:var(--shadow); }

  .blog-card{
    display:flex; gap:14px; background:#fff; border-radius:var(--radius-sm); padding:12px;
    border:1px solid var(--line); align-items:center;
  }
  .blog-card img{ width:96px; height:96px; object-fit:cover; border-radius:10px; flex:none; }
  .blog-card h4{ font-size:14.5px; color:var(--ink); margin-bottom:4px; line-height:1.4; }
  .blog-card span{ font-size:11.5px; color:#8a9a9c; }

  .cta-band{
    margin:0 20px; border-radius:var(--radius-lg); background:var(--purple); color:#fff;
    padding:28px 22px; text-align:center;
  }
  .cta-band h2{ font-size:22px; margin-bottom:8px; }
  .cta-band p{ font-size:13.5px; color:#d6eef0; margin-bottom:18px; }
  .cta-band .btn{ background:#fff; color:var(--purple); }

  footer{ background:#0d2224; color:#cfe6e7; padding:40px 0 100px; margin-top:20px; }
  .footer-grid{ display:grid; gap:26px; }
  footer h4{ color:#fff; font-size:14.5px; margin-bottom:12px; }
  footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:13.5px; }
  footer p{ font-size:13.5px; line-height:1.6; }
  .footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .footer-logo img{ height:32px; }
  .footer-social{ display:flex; gap:10px; margin-top:12px; }
  .footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
  .footer-bottom{ text-align:center; font-size:12px; color:#7f9d9e; margin-top:26px; border-top:1px solid rgba(255,255,255,.08); padding-top:18px; }

  .mobile-cta{
    position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex; background:#fff;
    box-shadow:0 -8px 20px rgba(0,0,0,.12); border-top:1px solid var(--line);
  }
  .mobile-cta a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:9px 4px; font-size:11.5px; font-weight:700; color:var(--teal-deep); }
  .mobile-cta a.fill{ background:var(--teal); color:#fff; }
  .mobile-cta a.zalo{ background:#0068ff; color:#fff; }

  @media (min-width:900px){
    .topbar{ display:block; }
    .header-inner{ padding:16px 20px; }
    .logo{ font-size:17px; gap:10px; }
    .logo img{ height:38px; width:38px; }
    .logo small{ display:block; }
    .call-chip{
      width:auto; height:auto; border-radius:99px; padding:8px 16px; gap:8px;
    }
    .call-chip .call-text{ display:inline; }
    .menu-btn{ display:none; }
    body{padding-bottom:0;}
    .mobile-cta{display:none;}
    nav.desktop-nav{ display:flex; gap:26px; font-weight:600; font-size:14.5px; color:#3c4d4f; }
    nav.desktop-nav a:hover{ color:var(--teal); }
    .header-inner{ padding:16px 20px; }

    .hero-main{ padding:64px 0 44px; text-align:left; }
    .hero-main .wrap{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; }
    .hero-chip{ margin-bottom:18px; font-size:14px; }
    .hero-main h1{ font-size:52px; }
    .hero-main p.lede{ margin:0 0 26px; font-size:17px; max-width:42ch; }
    .hero-ctas{ flex-direction:row; margin:0 0 28px; max-width:none; }
    .hero-ctas .btn{ width:auto; flex:0 0 auto; font-size:16px; padding:16px 26px; }
    .hero-stat-row{ justify-content:flex-start; }
    .hero-stat-chip{ padding:12px 18px; min-width:104px; }
    .hero-stat-chip strong{ font-size:20px; }
    .hero-stat-chip span{ font-size:11.5px; }
    .hero-illustration{ display:block; }
    .hero-illustration img{ max-width:460px; margin-left:auto; filter:drop-shadow(0 20px 34px rgba(0,0,0,.35)); }

    .promo-section{ padding:38px 0 10px; }
    .promo-viewport{ max-width:1140px; margin:0 auto; }
    .promo-slide a{ aspect-ratio:12/5; }
    .promo-head .wrap{ padding:0; }
    .intro-grid{ grid-template-columns:1fr 1fr; align-items:center; gap:50px; }
    .usp-list{ grid-template-columns:1fr; }
    .service-scroll{ display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; padding:4px 0 0; margin:0; }
    .service-card{ flex:none; }
    .why-grid{ grid-template-columns:1fr 1fr; column-gap:60px; }
    .brand-panel{ grid-column:1/-1; order:-1; }
    .why-wrap{ display:grid; grid-template-columns:1fr; }
    .utility-grid{ grid-template-columns:repeat(4,1fr); }
    .cert-scroll{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0; padding:0; }
    .cert-scroll img{ width:100%; height:220px; object-fit:cover; }
    .footer-grid{ grid-template-columns:2fr 1fr 1fr 1.3fr; }
    .cta-band{ margin:0 auto; max-width:900px; padding:44px 60px; }
  }


  /* ===== PAGE HERO (trang con) ===== */
  .page-hero{
    background:linear-gradient(165deg, var(--teal-deep), var(--teal) 78%);
    color:#fff; padding:26px 0 34px; position:relative; overflow:hidden;
  }
  .page-hero::before{
    content:""; position:absolute; width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
    top:-70px; right:-60px;
  }
  .page-hero .wrap{ position:relative; z-index:1; }
  .breadcrumb{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:#cdeef1; margin-bottom:12px; flex-wrap:wrap; }
  .breadcrumb a{ color:#cdeef1; }
  .breadcrumb .sep{ opacity:.6; }
  .breadcrumb .current{ color:#fff; font-weight:600; }
  .page-hero h1{ font-size:clamp(24px,7vw,34px); font-weight:800; margin-bottom:8px; }
  .page-hero p{ font-size:14px; color:#dbf1f2; max-width:52ch; line-height:1.6; }

  /* ===== NỘI DUNG BÀI VIẾT (trang con) ===== */
  .content-grid{ display:block; }
  .intro-lede{
    font-size:16px; line-height:1.75; color:#2e4547; font-weight:600;
    padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line);
  }
  .prose p{ font-size:14.5px; line-height:1.85; color:#42585a; margin-bottom:16px; }
  .prose strong{ color:var(--teal-deep); }

  .pull-quote{
    background:var(--teal-pale); border-left:4px solid var(--teal); border-radius:12px;
    padding:18px 20px; margin:22px 0; font-family:'Sora',sans-serif; font-weight:700;
    font-size:16px; color:var(--teal-deep); line-height:1.5;
  }

  .values-grid{ display:grid; gap:14px; margin-top:8px; }
  .value-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:18px; text-align:center;
  }
  .value-card .num{
    width:38px; height:38px; border-radius:50%; background:var(--teal-pale); color:var(--teal-deep);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Sora',sans-serif;
    margin:0 auto 12px;
  }
  .value-card h3{ font-size:15.5px; color:var(--ink); margin-bottom:6px; }
  .value-card p{ font-size:13px; color:#5b6b6d; line-height:1.6; }

  .stat-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
  .stat-chip{
    background:var(--teal-pale); border-radius:14px; padding:14px 18px; min-width:104px; text-align:center;
  }
  .stat-chip strong{ display:block; font-family:'Sora',sans-serif; font-size:20px; color:var(--teal-deep); }
  .stat-chip span{ font-size:11px; color:#5b6b6d; }

  .related-card{
    display:flex; gap:14px; background:#fff; border-radius:var(--radius-sm); padding:12px;
    border:1px solid var(--line); align-items:center;
  }
  .related-card img{ width:88px; height:88px; object-fit:cover; border-radius:10px; flex:none; }
  .related-card h4{ font-size:14px; color:var(--ink); margin-bottom:4px; line-height:1.4; }
  .related-card span{ font-size:11.5px; color:#8a9a9c; }

  @media (min-width:900px){
    .page-hero{ padding:44px 0 50px; }
    .content-grid{ display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start; }
    .location-grid{ grid-template-columns:repeat(3,1fr); }
    .location-square .body{ padding:20px 22px 24px; }
    .values-grid{ grid-template-columns:repeat(3,1fr); }
    .post-grid{ grid-template-columns:repeat(2,1fr); }
    .price-list{ grid-template-columns:1fr 1fr; }
    .stat-row{ justify-content:flex-start; }
  }

  /* ===== BẢNG GIÁ DẠNG CARD (mobile-first, không dùng table thô) ===== */
  .price-list{ display:grid; gap:14px; margin-top:16px; }
  .price-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:16px; display:flex; gap:14px; align-items:flex-start;
  }
  .price-card .thumb{
    width:56px; height:56px; border-radius:12px; background:var(--teal-pale); flex:none;
    display:flex; align-items:center; justify-content:center; padding:8px;
  }
  .price-card .thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
  .price-card h3{ font-size:15.5px; color:var(--teal-deep); margin-bottom:8px; }
  .price-rows{ display:grid; gap:6px; }
  .price-row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; }
  .price-row .label{ color:#8a9a9c; }
  .price-row .value{ font-weight:700; color:var(--ink); text-align:right; }
  .price-note{
    margin-top:16px; background:var(--teal-pale); border-radius:12px; padding:14px 16px;
    font-size:12.5px; color:var(--teal-deep); line-height:1.6;
  }

  .commit-list{ display:grid; gap:10px; margin-top:14px; }
  .commit-item{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#42585a; line-height:1.6; }
  .commit-item .tick{
    flex:none; width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; margin-top:1px;
  }

  /* ===== CHIP DANH SÁCH TÀI SẢN ===== */
  .asset-chip-wrap{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
  .asset-chip{
    display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--teal);
    color:var(--teal-deep); font-weight:700; font-size:13px; padding:9px 14px; border-radius:99px;
  }

  /* ===== HOTLINE CALLOUT ===== */
  .hotline-callout{
    background:var(--teal-deep); color:#fff; border-radius:var(--radius-lg); padding:20px 22px;
    display:flex; align-items:center; gap:16px; margin-top:24px;
  }
  .hotline-callout .icon{
    width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); flex:none;
    display:flex; align-items:center; justify-content:center; font-size:20px;
  }
  .hotline-callout h4{ font-size:15px; margin-bottom:4px; }
  .hotline-callout p{ font-size:13px; color:#cdeef1; }
  .hotline-callout a.num{ color:var(--amber); font-weight:800; }

  /* ===== LƯỚI BÀI VIẾT ===== */
  .post-grid{ display:grid; gap:18px; }
  .post-card-full{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow); position:relative;
  }
  .post-card-full .thumb{ aspect-ratio:16/9; background:var(--teal-pale); }
  .post-card-full .thumb img{ width:100%; height:100%; object-fit:cover; }
  .post-card-full .date-badge{
    position:absolute; top:12px; left:12px; background:#fff; border-radius:10px;
    padding:6px 10px; text-align:center; box-shadow:0 6px 14px rgba(0,0,0,.15); line-height:1.1;
  }
  .post-card-full .date-badge strong{ display:block; font-family:'Sora',sans-serif; font-size:15px; color:var(--teal-deep); }
  .post-card-full .date-badge span{ font-size:10px; color:#8a9a9c; text-transform:uppercase; }
  .post-card-full .body{ padding:16px 18px 20px; }
  .post-card-full h3{ font-size:16.5px; color:var(--ink); margin-bottom:8px; line-height:1.4; }
  .post-card-full p{ font-size:13.5px; color:#5b6b6d; line-height:1.6; margin-bottom:12px; }
  .post-card-full .read-more{ font-weight:700; color:var(--teal); font-size:13px; }

  .empty-note{
    text-align:center; padding:30px 16px; color:#8a9a9c; font-size:13.5px;
    border:1px dashed var(--line); border-radius:var(--radius-sm); margin-top:6px;
  }

  /* ===== CARD TƯ VẤN NHANH (sidebar) ===== */
  .quick-help-card{
    background:linear-gradient(160deg, var(--teal-deep), var(--teal) 75%); color:#fff;
    border-radius:var(--radius-lg); padding:20px; text-align:center;
  }
  .quick-help-card h4{ font-size:15.5px; margin-bottom:8px; }
  .quick-help-card p{ font-size:12.5px; color:#dbf1f2; margin-bottom:16px; line-height:1.6; }
  .quick-help-card .btn{ width:100%; margin-bottom:8px; }

  /* ===== ĐỊA CHỈ / LIÊN HỆ — card ngang giống mẫu, có bản đồ nhúng + QR ===== */
  .location-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:16px; }
  .location-square{
    background:#fff !important; border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  }
  .location-square .map-embed{ position:relative; width:100%; aspect-ratio:16/7; background:var(--teal-pale); }
  .location-square .map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .location-square .body{ padding:14px 16px 16px; text-align:left; display:flex; flex-direction:column; flex:1; }
  .location-square h3{ font-size:14.5px; color:var(--teal-deep) !important; margin-bottom:6px; font-family:'Sora',sans-serif; font-weight:800; }
  .location-square address{ font-style:normal; font-size:12.5px; color:#42585a !important; line-height:1.5; margin-bottom:8px; }
  .location-square .hotline-line{
    font-weight:700; color:var(--ink) !important; font-size:13px; margin-bottom:10px;
  }
  .location-square .hotline-line a{ color:var(--teal-deep) !important; }
  .location-square .qr-row{ display:flex; align-items:center; gap:10px; background:var(--teal-pale); border-radius:10px; padding:8px 10px; margin-bottom:12px; width:100%; }
  .location-square .qr-row img{ width:48px; height:48px; object-fit:contain; background:#fff !important; border-radius:7px; padding:3px; flex:none; }
  .location-square .qr-row .qr-text{ text-align:left; }
  .location-square .qr-row .qr-text strong{ display:block; font-size:12px; color:var(--teal-deep) !important; }
  .location-square .qr-row .qr-text span{ font-size:10.5px; color:#5b6b6d !important; }
  .location-square .btn-row{ display:flex; gap:8px; margin-top:auto; }
  .location-square .btn-row a{
    flex:1; text-align:center; font-size:12.5px; font-weight:700; padding:9px 8px; border-radius:9px;
  }
  .location-square .btn-call{ background:#fff !important; color:var(--teal-deep) !important; border:1.5px solid var(--line); }
  .location-square .btn-direction{ background:var(--teal-deep) !important; color:#fff !important; }

  .working-hours-note{
    display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
    background:var(--teal-pale) !important; color:var(--teal-deep) !important; font-weight:700; font-size:13.5px;
    border-radius:var(--radius-sm); padding:14px 16px; margin-top:18px;
  }

  /* Khoá cứng giao diện sáng — chặn trình duyệt/app tự ý bật chế độ tối đè lên các khối trắng */
  @media (prefers-color-scheme: dark){
    body, .location-square, .location-square .body, .contact-info-row, .price-card, .value-card,
    .related-card, .service-card, .post-card-full, header.site-header, .mobile-menu-panel,
    .quick-help-card .btn[style], .qr-row img{
      background-color:#fff !important;
    }
    .location-square h3, .location-square address, .location-square .hotline-line,
    .contact-info-row .v, .value-card h3, .value-card p{
      color:inherit !important;
    }
  }

  @media (min-width:640px){
    .location-grid{ grid-template-columns:repeat(2,1fr); }
  }

  .contact-info-list{ display:grid; gap:10px; margin-top:18px; }
  .contact-info-row{
    display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:12px 14px;
  }
  .contact-info-row .ic{
    flex:none; width:34px; height:34px; border-radius:50%; background:var(--teal-pale);
    display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  .contact-info-row span.k{ display:block; font-size:11px; color:#8a9a9c; }
  .contact-info-row span.v{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); }

  .contact-portrait{ border-radius:var(--radius-lg); overflow:hidden; background:var(--teal-pale); margin-top:20px; }
  .contact-portrait img{ width:100%; display:block; }


/* ===== Tương thích wp_nav_menu (WordPress xuất ra <ul><li><a>) ===== */
nav.desktop-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
nav.desktop-nav li{ list-style:none; }
nav.desktop-nav li.current-menu-item > a{ color:var(--teal); }
.mobile-menu-panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mobile-menu-panel li{ list-style:none; }
.mobile-menu-panel li.current-menu-item > a{ color:var(--teal); }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; color:var(--ink); padding:10px 16px; z-index:999; }
.skip-link:focus{ left:10px; top:10px; }
img{ height:auto; }
.wp-block-latest-posts, article ul, article ol{ margin:0 0 16px; padding-left:20px; }

/* ===== TRANG ĐỊNH GIÁ — khối chọn tài sản + form ===== */
.val-section{ background:#fff; padding:22px 0 34px; }
.val-section .breadcrumb{ margin-bottom:10px; }
.val-title{ text-align:center; color:#e8a317; font-size:clamp(20px,5.6vw,30px); font-weight:800; margin:6px 0 18px; }
.val-card{ max-width:860px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.val-tabs{ display:flex; gap:0; overflow-x:auto; background:#f4f7f7; border-bottom:1px solid var(--line); scrollbar-width:none; }
.val-tabs::-webkit-scrollbar{ display:none; }
.val-tab{
  flex:1 0 96px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px;
  background:transparent; border:0; border-bottom:3px solid transparent; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; color:#5b6b6d; line-height:1.3; text-align:center;
}
.val-tab .ic{ font-size:22px; line-height:1; }
.val-tab:hover{ color:var(--teal-deep); }
.val-tab.active{ background:#fff; color:var(--teal-deep); border-bottom-color:var(--amber); }
.val-body{ padding:20px 18px 22px; }
.val-sub{ font-size:15px; color:var(--teal-deep); font-weight:800; }
.val-sub span{ font-weight:600; color:var(--teal-soft); font-size:13px; }
.val-desc{ font-size:13px; color:#5b6b6d; line-height:1.65; margin:8px 0 16px; }
.val-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.val-form input[type=text], .val-form input[type=tel], .val-form select{
  width:100%; height:46px; padding:0 14px; border:1px solid #cfd9da; border-radius:10px; background:#fff;
  font-family:inherit; font-size:14px; color:var(--ink); appearance:none; -webkit-appearance:none;
}
.val-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23155a64' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.val-form input:focus, .val-form select:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,127,140,.15); }
.val-submit{
  display:block; width:100%; margin-top:14px; height:48px; border:0; border-radius:10px; cursor:pointer;
  background:var(--amber); color:var(--ink); font-family:'Sora',sans-serif; font-weight:800; font-size:15px; letter-spacing:.5px;
  box-shadow:0 10px 22px -8px rgba(245,185,66,.7); transition:transform .15s ease;
}
.val-submit:active{ transform:scale(.98); }
.val-submit[disabled]{ opacity:.6; cursor:wait; }
.val-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.val-alert{ padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:600; margin-bottom:14px; }
.val-alert.ok{ background:#e6f6ec; color:#14653a; border:1px solid #b7e2c6; }
.val-alert.err{ background:#fdecec; color:#9b1c1c; border:1px solid #f3c1c1; }
@media (min-width:700px){
  .val-grid{ grid-template-columns:1fr 1fr; gap:12px 14px; }
  .val-tab{ flex-basis:0; font-size:13px; padding:14px 8px; }
  .val-body{ padding:26px 30px 30px; }
  .val-submit{ width:240px; margin-left:auto; margin-right:auto; }
}

/* ===== Header: menu không xuống dòng, logo gọn ===== */
.logo .logo-text small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
nav.desktop-nav a{ white-space:nowrap; }
@media (min-width:900px){
  .header-inner{ gap:22px; }
  .logo{ flex:0 1 auto; }
  nav.desktop-nav{ flex:1 1 auto; justify-content:center; }
  nav.desktop-nav ul{ gap:22px; }
  .call-chip{ flex:none; }
}


/* ===== Logo ảnh (đã chứa sẵn tên thương hiệu) — ẩn chữ bên cạnh, khống chế kích thước ===== */
.logo.has-image .logo-text{ display:none; }
.logo.has-image img.custom-logo{ height:44px; width:auto; max-width:200px; object-fit:contain; flex:none; }
@media (min-width:900px){
  .logo.has-image img.custom-logo{ height:56px; max-width:260px; }
}
.footer-logo img.custom-logo{ height:auto; width:auto; max-width:200px; max-height:70px; }


/* ===== Khối "Vì sao chọn" (trang chủ) ===== */
.wy-section{ padding:44px 0; }
.wy-layout{ display:grid; gap:18px; }
.wy-panel{
  position:relative; overflow:hidden; border-radius:28px; padding:30px 24px;
  background:linear-gradient(160deg,var(--teal-deep) 0%,var(--teal) 100%); color:#fff;
}
.wy-panel::after{
  content:""; position:absolute; right:-80px; bottom:-90px; width:260px; height:260px; border-radius:50%;
  border:30px solid rgba(255,255,255,.07); pointer-events:none;
}
.wy-panel h2{ position:relative; font-family:'Sora',sans-serif; font-size:clamp(24px,6.4vw,34px); line-height:1.2; margin:0 0 12px; color:#fff; }
.wy-panel p{ position:relative; margin:0; max-width:34ch; font-size:15px; line-height:1.65; color:#d6eef0; }
.wy-actions{ position:relative; display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.wy-list{
  display:grid; grid-template-columns:1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:28px; overflow:hidden;
}
.wy-cell{ display:flex; gap:16px; align-items:flex-start; padding:24px 22px; background:#fff; }
.wy-ic{ flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--teal-pale); color:var(--teal-deep); }
.wy-fact{ display:inline-block; margin-bottom:8px; padding:3px 11px; border-radius:999px; background:#fdf0cf; color:#7a5200; font-size:12px; font-weight:700; }
.wy-cell h4{ font-family:'Sora',sans-serif; font-size:16.5px; line-height:1.3; margin:0 0 6px; color:var(--ink); }
.wy-cell p{ margin:0; font-size:14px; line-height:1.65; color:#546466; }
@media (min-width:900px){
  .wy-section{ padding:64px 0; }
  .wy-layout{ grid-template-columns:5fr 7fr; gap:24px; align-items:stretch; }
  .wy-panel{ display:flex; flex-direction:column; justify-content:center; padding:48px 42px; }
  .wy-list{ grid-template-columns:1fr 1fr; }
  .wy-cell{ padding:30px 26px; }
}


/* ===== Bảng giá tham khảo — dạng bảng so sánh ===== */
.pt-wrap{ margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.pt{ width:100%; border-collapse:collapse; text-align:left; }
.pt thead th{ padding:14px 18px; background:var(--teal-pale); color:var(--teal-deep); font-size:13px; font-weight:700; }
.pt tbody td{ padding:16px 18px; border-top:1px solid var(--line); vertical-align:middle; font-size:14px; font-weight:600; color:var(--ink); }
.pt-id{ display:flex; align-items:center; gap:14px; }
.pt-thumb{ flex:none; width:56px; height:56px; border-radius:16px; background:var(--teal-pale); display:grid; place-items:center; padding:7px; }
.pt-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.pt-name h3{ margin:0; font-family:'Sora',sans-serif; font-size:16px; line-height:1.25; color:var(--teal-deep); }
.pt-rate{ display:inline-block; padding:4px 11px; border-radius:999px; background:#fdf0cf; color:#7a5200; font-size:13px; font-weight:700; white-space:nowrap; }
.pt-note{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:14px 16px; border-radius:16px; background:#fff8e6; border:1px solid #f3e1ae; font-size:13.5px; line-height:1.6; color:#5b4a1a; }
.pt-note svg{ flex:none; margin-top:2px; color:#b07a00; }
@media (max-width:639px){
  .pt thead{ display:none; }
  .pt, .pt tbody, .pt tr, .pt td{ display:block; }
  .pt tr{ padding:16px 16px 10px; border-top:1px solid var(--line); }
  .pt tr:first-child{ border-top:0; }
  .pt tbody td{ padding:0; border:0; }
  .pt tbody td.pt-name{ margin-bottom:8px; }
  .pt tbody td[data-label]{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-top:1px dashed var(--line); }
  .pt tbody td[data-label]::before{ content:attr(data-label); font-weight:500; color:#7b8c8e; }
}