/*
Theme Name: Vân Huy Sơn Nước
Theme URI: https://sonnuocnhadep.com
Author: Vân Huy
Description: Giao diện WordPress chuẩn SEO cho dịch vụ sơn nước nhà đẹp tại TP.HCM
Version: 4.0.0
Text Domain: son-nuoc-theme
*/
/* Font loaded via wp_enqueue in functions.php — no @import needed */

:root {
  --primary: #0d1b4b;
  --primary-mid: #1e3799;
  --primary-light: #0984e3;
  --teal: #00cec9;
  --green: #2ecc71;
  --green-dark: #27ae60;
  --orange: #ff9f43;
  --orange-dark: #e67e22;
  --text: #2c3e50;
  --text-light: #636e72;
  --bg: #ffffff;
  --bg-light: #f8f9fa;
  --bg-cream: #fdfcfb;
  --border: #e9ecef;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box}
body{font-family:'Be Vietnam Pro',sans-serif;color:var(--text);background:var(--bg);margin:0;padding:0;line-height:1.7;font-size:1rem;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Be Vietnam Pro',sans-serif;font-weight:700}
input,textarea,select,button{font-family:'Be Vietnam Pro',sans-serif}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0;margin:0}
.container{max-width:1140px;margin:0 auto;padding:0 20px}

/* TOP BAR */
.top-bar{background:var(--primary);color:rgba(255,255,255,0.85);font-size:0.82rem;padding:8px 0}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.top-bar a{color:#fff;text-decoration:none;font-weight:600;transition:color .2s}
.top-bar a:hover{color:var(--teal)}
.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:18px}

/* HEADER */
header{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:1000;border-bottom:1px solid rgba(0,0,0,0.06);transition:var(--transition)}
header.scrolled{box-shadow:0 4px 30px rgba(0,0,0,0.1)}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.logo{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:10px}
.logo span{background:linear-gradient(135deg,var(--green),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-icon{font-size:1.8rem}
nav ul{display:flex;gap:6px;align-items:center}
nav a{color:var(--text);font-weight:500;font-size:0.92rem;padding:8px 14px;border-radius:8px;transition:var(--transition)}
nav a:hover{background:rgba(14,27,75,0.06);color:var(--primary-mid)}
.nav-cta{background:var(--green)!important;color:#fff!important;font-weight:700!important;padding:10px 22px!important;border-radius:30px!important;box-shadow:0 4px 15px rgba(46,204,113,0.3);animation:ctaPulse 3s infinite}
.nav-cta:hover{background:var(--green-dark)!important;transform:translateY(-2px);box-shadow:0 6px 20px rgba(46,204,113,0.4)}
@keyframes ctaPulse{0%,100%{box-shadow:0 4px 15px rgba(46,204,113,0.3)}50%{box-shadow:0 4px 25px rgba(46,204,113,0.5)}}

/* MOBILE MENU */
.nav-toggle-input{position:absolute;opacity:0;pointer-events:none}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--primary);padding:8px}
@media(max-width:900px){
  .menu-toggle{display:block}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:20px;box-shadow:var(--shadow-lg);border-radius:0 0 var(--radius) var(--radius)}
  nav ul.open,#nav-toggle:checked~nav ul{display:flex}
  nav a{padding:12px 16px;width:100%}
}

/* HERO */
.hero{position:relative;background:linear-gradient(135deg,rgba(13,27,75,0.85) 0%,rgba(9,132,227,0.7) 50%,rgba(0,206,201,0.5) 100%),url('https://images.pexels.com/photos/6474471/pexels-photo-6474471.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover;color:#fff;padding:100px 0 110px;overflow:hidden}
.hero::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:80px;background:linear-gradient(to top,#fff,transparent)}
.hero-grid{display:grid;grid-template-columns:1.2fr 0.9fr;gap:50px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(46,204,113,0.2);border:1px solid rgba(46,204,113,0.4);color:#2ecc71;padding:8px 20px;border-radius:30px;font-size:0.85rem;font-weight:700;margin-bottom:20px;backdrop-filter:blur(10px)}
.hero h1{font-size:3.2rem;font-weight:900;line-height:1.1;margin:0 0 20px}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-desc{font-size:1.1rem;color:rgba(255,255,255,0.9);margin-bottom:28px;max-width:540px;line-height:1.8}
.hero-trust{display:flex;gap:24px;flex-wrap:wrap}
.hero-trust span{display:flex;align-items:center;gap:6px;font-size:0.9rem;font-weight:600;color:rgba(255,255,255,0.95)}

/* HERO FORM */
.hero-form{background:rgba(255,255,255,0.97);backdrop-filter:blur(15px);padding:36px;border-radius:var(--radius);box-shadow:0 25px 60px rgba(0,0,0,0.2);color:var(--text)}
.hero-form h3{font-size:1.5rem;color:var(--primary);margin:0 0 6px;text-align:center}
.hero-form>p{text-align:center;color:var(--text-light);margin:0 0 22px;font-size:0.92rem}
.hero-form input,.hero-form select{width:100%;padding:13px 16px;margin-bottom:14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:0.95rem;transition:var(--transition)}
.hero-form input:focus,.hero-form select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(46,204,113,0.15)}
.hero-form button{width:100%;padding:15px;background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;border:none;border-radius:var(--radius-sm);font-weight:800;font-size:1.05rem;cursor:pointer;transition:var(--transition);box-shadow:0 6px 20px rgba(255,159,67,0.35)}
.hero-form button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,159,67,0.45)}
.form-note{text-align:center;font-size:0.78rem;color:var(--text-light);margin-top:14px}
.hero-form-cta{display:flex;gap:10px;margin-top:16px}
.hero-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 10px;border-radius:var(--radius-sm);font-weight:700;font-size:0.92rem;text-decoration:none;transition:var(--transition);text-align:center}
.hero-btn-phone{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;box-shadow:0 4px 15px rgba(46,204,113,0.35)}
.hero-btn-phone:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(46,204,113,0.45);color:#fff}
.hero-btn-zalo{background:linear-gradient(135deg,#0068FF,#0055CC);color:#fff;box-shadow:0 4px 15px rgba(0,104,255,0.3)}
.hero-btn-zalo:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,104,255,0.4);color:#fff}

/* TRUST BAR */
.trust-bar{background:var(--bg);padding:50px 0;border-bottom:1px solid var(--border)}
.trust-grid{display:flex;justify-content:space-around;flex-wrap:wrap;gap:30px}
.trust-item{text-align:center}
.trust-item strong{font-family:'Outfit',sans-serif;font-size:2.6rem;font-weight:800;color:var(--primary-mid);display:block;line-height:1}
.trust-item span{font-size:0.88rem;color:var(--text-light);font-weight:500;margin-top:4px;display:block}

/* SECTION COMMONS */
.section{padding:90px 0}
.section-alt{background:var(--bg-light)}
.section-dark{background:var(--primary);color:#fff}
.section-title{text-align:center;font-size:2.2rem;font-weight:800;color:var(--primary);margin:0 0 10px}
.section-dark .section-title{color:#fff}
.section-sub{text-align:center;color:var(--text-light);margin:0 auto 50px;max-width:600px;font-size:1rem}
.section-dark .section-sub{color:rgba(255,255,255,0.75)}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.service-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);cursor:pointer;border:1px solid var(--border)}
.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:transparent}
.service-card img{width:100%;height:220px;object-fit:cover;transition:transform .5s}
.service-card:hover img{transform:scale(1.06)}
.service-card-body{padding:22px}
.service-card-body h3{font-size:1.15rem;color:var(--primary);margin:0 0 8px}
.service-card-body p{font-size:0.92rem;color:var(--text-light);margin:0;line-height:1.6}

/* OFFER BANNER */
.offer-banner{background:linear-gradient(135deg,var(--orange),#ff6b35);color:#fff;padding:50px 0;text-align:center;position:relative;overflow:hidden}
.offer-banner::before{content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;background:rgba(255,255,255,0.08);border-radius:50%}
.offer-banner h2{font-size:2rem;margin:0 0 10px}
.offer-banner p{font-size:1.1rem;opacity:0.9;margin:0 0 24px}
.offer-btn{display:inline-block;background:#fff;color:var(--orange-dark);padding:16px 40px;border-radius:50px;font-weight:800;font-size:1.1rem;box-shadow:0 8px 25px rgba(0,0,0,0.15);transition:var(--transition)}
.offer-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(0,0,0,0.2)}

/* PRICING */
.pricing-wrap{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pricing-table{width:100%;border-collapse:collapse}
.pricing-table th{background:var(--primary);color:#fff;padding:16px 20px;text-align:left;font-weight:600;font-size:0.95rem}
.pricing-table td{padding:14px 20px;border-bottom:1px solid var(--border);font-size:0.93rem}
.pricing-table tr:last-child td{border-bottom:none}
.pricing-table tr:hover td{background:rgba(46,204,113,0.04)}

/* CALCULATOR */
.calculator{background:#fff;padding:36px;border-radius:var(--radius);border:2px solid var(--green);box-shadow:var(--shadow);margin-bottom:40px}
.calculator h4{font-size:1.3rem;color:var(--primary);margin:0 0 24px;text-align:center}
.calc-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:end}
.calc-field label{display:block;font-weight:700;color:var(--text);margin-bottom:8px;font-size:0.9rem}
.calc-field input,.calc-field select{width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:1rem}
.calc-result{background:var(--green);color:#fff;padding:20px 28px;border-radius:var(--radius-sm);text-align:center;min-width:180px}
.calc-result span{font-size:0.85rem;opacity:0.9}
.calc-result strong{font-size:1.5rem;display:block;margin-top:4px}

/* PROCESS STEPS */
.process-grid{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;justify-content:center}
.process-step{background:#fff;border-radius:var(--radius);padding:28px 20px;text-align:center;flex:1;min-width:150px;max-width:180px;box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid var(--border)}
.process-step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step-num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary-mid),var(--teal));color:#fff;font-size:1.3rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.process-step h3{font-size:0.95rem;color:var(--primary);margin:0 0 6px}
.process-step p{font-size:0.82rem;color:var(--text-light);margin:0}
.step-arrow{font-size:1.6rem;color:var(--green);align-self:center;font-weight:700;flex-shrink:0}

/* TESTIMONIALS */
.testimonials{background:linear-gradient(180deg,#f0fff4 0%,#fff 100%);padding:90px 0}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px}
.testi-card{background:#fff;padding:32px 28px;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:var(--transition);position:relative}
.testi-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.testi-card::before{content:'"';position:absolute;top:16px;right:24px;font-size:3rem;color:rgba(46,204,113,0.15);font-family:serif;line-height:1}
.stars{color:#f1c40f;font-size:1.1rem;margin-bottom:14px;letter-spacing:2px}
.testi-text{font-size:0.95rem;color:var(--text);line-height:1.7;margin-bottom:20px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.1rem}
.testi-info h4{margin:0;font-size:0.95rem;color:var(--primary)}
.testi-info p{margin:2px 0 0;font-size:0.82rem;color:var(--text-light)}

/* FAQ */
.faq-wrap{max-width:780px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;transition:var(--transition)}
.faq-item.active{border-color:var(--green);box-shadow:0 4px 15px rgba(46,204,113,0.1)}
.faq-q{width:100%;background:#fff;border:none;padding:18px 22px;text-align:left;font-size:1.05rem;font-weight:700;color:var(--primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:'Outfit',sans-serif;transition:var(--transition)}
.faq-q:hover{background:rgba(46,204,113,0.04)}
.faq-q .icon{font-size:1.2rem;transition:transform .3s;color:var(--green)}
.faq-item.active .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 22px}
.faq-item.active .faq-a{max-height:200px;padding:0 22px 18px}
.faq-a p{color:var(--text-light);font-size:0.95rem;margin:0;line-height:1.7}

/* BLOG CARDS */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:var(--transition)}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.blog-card img{width:100%;height:200px;object-fit:cover}
.blog-card-body{padding:20px}
.blog-card-body .date{font-size:0.8rem;color:var(--green);font-weight:600;margin-bottom:6px}
.blog-card-body h3{font-size:1.05rem;margin:0 0 8px;line-height:1.4}
.blog-card-body h3 a{color:var(--primary);transition:color .2s}
.blog-card-body h3 a:hover{color:var(--primary-mid)}
.blog-card-body p{font-size:0.88rem;color:var(--text-light);margin:0 0 12px}
.read-more{color:var(--green);font-weight:700;font-size:0.88rem;transition:var(--transition)}
.read-more:hover{color:var(--green-dark)}

/* FINAL CTA */
.final-cta{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 100%);color:#fff;text-align:center;padding:80px 20px;position:relative;overflow:hidden}
.final-cta::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:rgba(0,206,201,0.1);border-radius:50%}
.final-cta h2{font-size:2.2rem;margin:0 0 12px}
.final-cta p{font-size:1.1rem;opacity:0.85;margin:0 0 30px}
.cta-heavy{display:inline-block;background:var(--green);color:#fff;padding:18px 45px;border-radius:50px;font-size:1.3rem;font-weight:800;box-shadow:0 8px 30px rgba(46,204,113,0.4);transition:var(--transition)}
.cta-heavy:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(46,204,113,0.5);background:var(--green-dark)}

/* FOOTER */
.footer{background:var(--primary);color:#fff;padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr;gap:40px}
.footer-col h4{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--green);margin:0 0 16px;text-transform:uppercase;letter-spacing:0.5px}
.footer-col p,.footer-col li{font-size:0.88rem;color:rgba(255,255,255,0.7);margin-bottom:8px;line-height:1.6}
.footer-col a{color:rgba(255,255,255,0.7);transition:color .2s}
.footer-col a:hover{color:var(--green)}
.footer-hotline{font-size:1.3rem!important;font-weight:700!important;color:var(--green)!important}
.footer-bottom{background:rgba(0,0,0,0.2);text-align:center;padding:16px;font-size:0.82rem;color:rgba(255,255,255,0.5);margin-top:40px}

/* FLOATING BUTTONS — see line ~347 for consolidated rules */

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb{background:var(--bg-light);padding:14px 0;font-size:0.85rem;color:var(--text-light);border-bottom:1px solid var(--border)}
.breadcrumb a{color:var(--primary-mid);text-decoration:none;font-weight:500;transition:color .2s}
.breadcrumb a:hover{color:var(--green)}
.breadcrumb .sep{margin:0 8px;color:#ccc}
.breadcrumb .current{color:var(--text-light);font-weight:400}

/* ============================================
   SINGLE POST
   ============================================ */
.single-wrap{max-width:800px;margin:40px auto;padding:0 20px}
.single-wrap h1{font-size:2rem;color:var(--primary);border-left:4px solid var(--green);padding-left:14px;margin-bottom:14px;line-height:1.3}

/* Post Meta Bar */
.post-meta-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:var(--text-light);font-size:0.88rem;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.post-meta-bar span{display:flex;align-items:center;gap:4px}

/* Featured Image */
.post-featured-img{margin-bottom:28px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}

/* Post Content Typography */
.post-content{line-height:1.9;font-size:1.02rem}
.post-content h2{color:var(--primary);margin-top:2.5rem;margin-bottom:1rem;font-size:1.5rem;border-bottom:2px solid var(--border);padding-bottom:8px}
.post-content h3{color:var(--primary);margin-top:2rem;margin-bottom:0.8rem;font-size:1.25rem}
.post-content h4{color:var(--primary-mid);margin-top:1.5rem;margin-bottom:0.6rem;font-size:1.1rem}
.post-content p{margin-bottom:1.2em}
.post-content a{color:var(--primary-mid);text-decoration:underline;text-decoration-color:rgba(30,55,153,0.3);text-underline-offset:3px;transition:all .2s}
.post-content a:hover{color:var(--green);text-decoration-color:var(--green)}
.post-content ul,.post-content ol{margin:1em 0;padding-left:1.5em}
.post-content ul{list-style:disc}
.post-content ol{list-style:decimal}
.post-content li{margin-bottom:0.5em;padding-left:4px}
.post-content img{border-radius:var(--radius-sm);margin:16px 0;box-shadow:var(--shadow-sm)}
.post-content code{background:var(--bg-light);padding:2px 8px;border-radius:4px;font-size:0.9em;color:var(--primary-mid);border:1px solid var(--border)}
.post-content pre{background:var(--primary);color:#e0e0e0;padding:20px;border-radius:var(--radius-sm);overflow-x:auto;margin:20px 0;font-size:0.9rem;line-height:1.6}
.post-content pre code{background:none;border:none;color:inherit;padding:0}
.post-content strong{color:var(--primary)}
.post-content hr{border:none;border-top:2px solid var(--border);margin:2rem 0}

/* Post Content Tables */
.post-content table{width:100%;border-collapse:collapse;margin:20px 0;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.post-content th{background:var(--primary);color:#fff;padding:12px 16px;text-align:left;font-weight:600;font-size:0.93rem}
.post-content td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:0.93rem}
.post-content tr:nth-child(even) td{background:var(--bg-light)}
.post-content tr:hover td{background:rgba(46,204,113,0.06)}
.post-content blockquote{border-left:4px solid var(--green);padding:16px 24px;margin:24px 0;background:var(--bg-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--text-light)}

/* Social Share */
.social-share{display:flex;align-items:center;gap:12px;padding:20px 0;margin-top:32px;border-top:1px solid var(--border)}
.share-label{font-weight:700;color:var(--primary);font-size:0.92rem}
.share-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition);text-decoration:none}
.share-fb{background:#1877f2;color:#fff}
.share-zalo{background:#0068ff;color:#fff}
.share-x{background:#000;color:#fff}
.share-btn:hover{transform:scale(1.15);box-shadow:0 4px 12px rgba(0,0,0,0.2)}

/* Post Navigation */
.post-nav{display:flex;justify-content:space-between;gap:20px;padding:24px 0;margin-top:24px;border-top:1px solid var(--border)}
.post-nav a{color:var(--primary-mid);font-weight:600;font-size:0.92rem;transition:color .2s;text-decoration:none;max-width:45%}
.post-nav a:hover{color:var(--green)}
.nav-prev{text-align:left}
.nav-next{text-align:right;margin-left:auto}

/* Related Posts */
.related-posts{margin-top:48px;padding-top:40px;border-top:2px solid var(--border)}
.related-title{font-size:1.3rem;color:var(--primary);margin:0 0 24px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{display:block;background:#fff;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:var(--transition);text-decoration:none;color:var(--text)}
.related-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.related-card .related-img{width:100%;height:140px;object-fit:cover;display:block}
.related-img-placeholder{width:100%;height:140px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;font-size:2rem}
.related-body{padding:14px 16px}
.related-body h3{font-size:0.92rem;margin:0 0 6px;line-height:1.4;color:var(--primary)}
.related-date{font-size:0.78rem;color:var(--text-light)}

/* Post CTA — template level */
.post-cta{border-radius:var(--radius) !important;margin:40px 0 !important}
.post-cta .cta-buttons{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:8px}
.post-cta .cta-buttons a{text-decoration:none;flex-shrink:0}
.post-cta .cta-heavy{color:#fff;text-decoration:none}
.cta-outline{display:inline-block;background:transparent;color:#fff;padding:18px 40px;border-radius:50px;font-size:1.15rem;font-weight:700;border:2px solid rgba(255,255,255,0.5);transition:var(--transition);text-decoration:none}
.cta-outline:hover{background:rgba(255,255,255,0.15);border-color:#fff;transform:translateY(-3px);color:#fff}
/* Post CTA — inside post_content (inline HTML CTA boxes) */
.post-content .final-cta a,.post-content div[style*="background"] a[style*="border-radius:50px"],.post-content div[style*="background"] a[style*="border-radius: 50px"]{display:inline-block;margin:8px 10px}
.post-content div[style*="0d1b4b"] a,.post-content div[style*="text-align:center"] a[href^="tel:"],.post-content div[style*="text-align:center"] a[href*="zalo.me"]{margin:8px 10px !important;display:inline-block !important}

/* ============================================
   PROJECTS GALLERY
   ============================================ */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.project-card{position:relative !important;border-radius:var(--radius) !important;overflow:hidden !important;display:block !important;text-decoration:none !important;height:280px !important;box-shadow:var(--shadow-sm);transition:var(--transition)}
.project-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.project-card .project-img{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;transition:transform .5s}
.project-card:hover .project-img{transform:scale(1.08)}
.project-overlay{position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;padding:24px !important;background:linear-gradient(to top,rgba(13,27,75,0.9),rgba(13,27,75,0.3),transparent) !important;color:#fff !important;transition:var(--transition);z-index:2}
.project-overlay h3{font-size:1rem !important;margin:0 0 6px !important;font-weight:700 !important;line-height:1.3;color:#fff !important}
.project-overlay span{font-size:0.85rem;color:var(--green) !important;font-weight:600;opacity:0;transform:translateY(8px);transition:var(--transition)}
.project-card:hover .project-overlay span{opacity:1;transform:translateY(0)}
.btn-view-all{display:inline-block;padding:14px 36px;background:var(--primary);color:#fff;border-radius:50px;font-weight:700;text-decoration:none;transition:var(--transition)}
.btn-view-all:hover{background:var(--primary-mid);transform:translateY(-2px);box-shadow:var(--shadow)}

/* ============================================
   404 ERROR PAGE
   ============================================ */
.error-404-wrap{padding:80px 0;text-align:center}
.error-content{max-width:600px;margin:0 auto}
.error-icon{font-size:4rem;margin-bottom:20px}
.error-404-wrap h1{font-size:2rem;color:var(--primary);margin:0 0 12px}
.error-404-wrap p{color:var(--text-light);font-size:1.05rem;margin-bottom:30px}
.error-search{max-width:400px;margin:0 auto 32px}
.error-search form{display:flex;gap:10px}
.error-search input{flex:1;padding:14px 18px;border:2px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;font-family:inherit}
.error-search input:focus{outline:none;border-color:var(--green)}
.error-search button{padding:14px 24px;background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;font-family:inherit;transition:var(--transition)}
.error-search button:hover{background:var(--green-dark)}
.error-links{margin:32px 0}
.error-links h3{font-size:1.1rem;color:var(--primary);margin:0 0 16px}
.error-links ul{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.error-links a{color:var(--primary-mid);font-weight:600;transition:color .2s;text-decoration:none}
.error-links a:hover{color:var(--green)}
.error-cta{margin-top:32px}
.error-cta p{color:var(--text-light);margin-bottom:16px}

/* ============================================
   FLOATING BUTTONS (moved from footer inline)
   ============================================ */
.floating-btns{position:fixed;right:14px;bottom:24px;z-index:9999;display:flex;flex-direction:column;gap:12px}
.float-btn{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s;text-decoration:none;color:#fff}
.float-btn:hover{transform:scale(1.12);box-shadow:0 6px 20px rgba(0,0,0,.32);color:#fff}
.float-zalo{background:#0068ff;padding:0}
.float-zalo svg{width:32px;height:32px;display:block}
.float-phone{background:#2ecc71;font-size:1.5rem;color:#fff;animation:floatRing 2.5s infinite}
@keyframes floatRing{0%,20%,100%{transform:scale(1)}5%{transform:scale(1.15) rotate(12deg)}10%{transform:scale(1.15) rotate(-12deg)}15%{transform:scale(1.15) rotate(12deg)}}

/* RESPONSIVE — Tablet (≤900px) */
@media(max-width:900px){
  /* Fix parallax jank on tablet */
  .hero{background-attachment:scroll}
  /* Header */
  .menu-toggle{display:block}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:20px;box-shadow:var(--shadow-lg);border-radius:0 0 var(--radius) var(--radius)}
  nav ul.open{display:flex}
  nav a{padding:12px 16px;width:100%}

  /* Top bar: stack on small tablet */
  .top-bar .container{flex-direction:column;gap:4px;text-align:center}

  /* Hero */
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero h1{font-size:2.2rem}
  .hero-trust{justify-content:center}
  .hero-form{max-width:440px;margin:0 auto}

  /* Grids → 1 column */
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:repeat(2,1fr) !important}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr}

  /* Process 6-step: 2 columns on tablet */
  .process-grid-new{grid-template-columns:repeat(2,1fr) !important}

  /* Calculator */
  .calc-grid{grid-template-columns:1fr 1fr}
  .calc-result{min-width:unset}
}

/* RESPONSIVE — Mobile (≤600px) */
@media(max-width:600px){
  /* Top bar compact */
  .top-bar{font-size:0.78rem;padding:6px 0}
  .top-bar-left,.top-bar-right{gap:10px;flex-wrap:wrap;justify-content:center}

  /* Hero */
  .hero{padding:60px 0 80px;background-attachment:scroll}
  .hero h1{font-size:1.75rem;line-height:1.2}
  .hero-desc{font-size:0.96rem}
  .hero-form{padding:24px 18px}
  .hero-badge{font-size:0.78rem;padding:6px 14px}

  /* Sections */
  .section{padding:50px 0}
  .section-title{font-size:1.6rem}
  .section-sub{font-size:0.92rem;margin-bottom:32px}

  /* All grids → 1 column */
  .services-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr !important}

  /* Service cards */
  .service-card img{height:180px}

  /* PROCESS 6-STEP: 1 column on mobile — FIXED */
  .process-grid-new{grid-template-columns:1fr !important;gap:16px !important;margin-top:0 !important}
  .process-card{padding:24px 20px;display:flex;align-items:flex-start;gap:16px;text-align:left}
  .process-icon-wrap{width:60px;height:60px;flex-shrink:0;margin:0}
  .process-icon{font-size:1.6rem}
  .process-number{top:-4px;right:-4px;width:22px;height:22px;font-size:0.6rem}
  .process-card h3{font-size:1rem;margin-bottom:6px}
  .process-card p{font-size:0.88rem}

  /* OLD process-step (flex-row style) */
  .process-grid{flex-direction:column;align-items:center}
  .process-step{min-width:unset;max-width:100%;width:100%;display:flex;gap:16px;text-align:left;padding:20px}
  .step-num{flex-shrink:0;margin:0}
  .step-arrow{transform:rotate(90deg)}

  /* Calculator → full stack */
  .calc-grid{grid-template-columns:1fr;gap:14px}
  .calc-result{min-width:unset;width:100%}
  .calculator{padding:24px 18px}

  /* Pricing table → card layout */
  .pricing-table thead{display:none}
  .pricing-table,.pricing-table tbody,.pricing-table tr,.pricing-table td{display:block;width:100%}
  .pricing-table tr{margin-bottom:16px;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--border);padding:14px;box-shadow:var(--shadow-sm)}
  .pricing-table td{text-align:right;padding:8px 0;border-bottom:1px dotted var(--border);position:relative;padding-left:50%}
  .pricing-table td::before{content:attr(data-label);position:absolute;left:0;font-weight:700;color:var(--primary)}
  .pricing-table td:last-child{border-bottom:0}

  /* Trust bar */
  .trust-grid{flex-direction:column;align-items:center;gap:20px}
  .trust-item strong{font-size:2rem}

  /* Offer banner */
  .offer-banner h2{font-size:1.4rem}
  .offer-banner p{font-size:0.95rem}
  .offer-btn{padding:12px 28px;font-size:1rem}

  /* Testimonials */
  .testi-grid{grid-template-columns:1fr}

  /* Final CTA */
  .final-cta h2{font-size:1.6rem}
  .final-cta p{font-size:0.95rem}
  .cta-heavy{padding:14px 30px;font-size:1.1rem}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer{padding:40px 0 0}

  /* Blog cards */
  .blog-card img{height:170px}

  /* Floating buttons — smaller on mobile */
  .floating-btns{right:12px;bottom:16px;gap:10px}
  .float-btn{width:46px;height:46px;font-size:20px}
  .float-zalo svg{width:26px;height:26px}

  /* Single post */
  .single-wrap{margin:20px auto;padding:0 14px}
  .single-wrap h1{font-size:1.5rem}

  /* Related posts */
  .related-grid{grid-template-columns:1fr}
  .related-card .related-img{height:120px}

  /* Social share */
  .social-share{flex-wrap:wrap}

  /* Breadcrumb */
  .breadcrumb{padding:10px 0;font-size:0.8rem}
  .breadcrumb .current{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

  /* 404 */
  .error-404-wrap{padding:50px 0}
  .error-404-wrap h1{font-size:1.5rem}
  .error-search form{flex-direction:column}
  .error-links ul{flex-direction:column;align-items:center;gap:12px}

  /* Floating buttons */
  .floating-btns{right:10px;bottom:16px;gap:10px}
  .float-btn{width:44px;height:44px}
  .float-zalo svg{width:26px;height:26px}

  /* Post CTA */
  .post-cta .cta-buttons{flex-direction:column;align-items:center}
  .cta-outline{padding:14px 30px;font-size:1rem}

  /* Archive page */
  .archive-grid{grid-template-columns:1fr !important}
}

/* RESPONSIVE — Extra small (≤380px) */
@media(max-width:380px){
  .hero h1{font-size:1.5rem}
  .section-title{font-size:1.4rem}
  .logo{font-size:1.2rem}
  .logo-icon{font-size:1.5rem}
  .hero-form{padding:18px 14px}
}


/* PROCESS SECTION - 3x2 GRID */
.process-grid-new{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:40px;
}
.process-card{
  background:#fff;
  border-radius:var(--radius);
  padding:32px 24px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}
.process-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:var(--step-color,var(--primary-light));
  transition:height 0.3s ease;
}
.process-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.process-card:hover::before{
  height:6px;
}
.process-icon-wrap{
  position:relative;
  width:80px;
  height:80px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.process-icon-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--step-color,var(--primary-light));
  opacity:0.12;
  transition:opacity 0.3s;
}
.process-card:hover .process-icon-wrap::before{
  opacity:0.22;
}
.process-icon{
  font-size:2rem;
  position:relative;
  z-index:1;
}
.process-number{
  position:absolute;
  top:-6px;
  right:-6px;
  background:var(--step-color,var(--primary-light));
  color:#fff;
  font-size:0.7rem;
  font-weight:800;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  z-index:2;
}
.process-card h3{
  font-size:1.1rem;
  font-weight:700;
  color:var(--primary);
  margin:0 0 10px;
}
.process-card p{
  font-size:0.9rem;
  color:var(--text-light);
  line-height:1.6;
  margin:0;
}