/* === SANTECH LAYOUT — MANH HUNG COLORS === */

/* Reset overrides */
.top-bar{background:#f5f5f5;border-bottom:1px solid #e0e0e0;padding:6px 0;font-size:.78rem}
.top-bar .container{display:flex;justify-content:space-between;align-items:center}
.top-bar-left{color:#555}
.top-bar-right{display:flex;gap:20px}
.top-bar a{color:#555}
.top-bar a:hover{color:#D62828}

.site-header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);border-bottom:none}
.header-inner{height:76px;gap:16px}
.site-logo{font-size:2rem;font-weight:900;color:#0B1F3A;flex-shrink:0}
.site-logo span{color:#D62828}
.header-search{flex:1;max-width:420px;display:flex;border:1px solid #ddd;border-radius:3px;overflow:hidden}
.header-search-cat{padding:0 12px;background:#f5f5f5;border-right:1px solid #ddd;font-size:.82rem;color:#555;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap}
.header-search input{flex:1;padding:10px 12px;border:none;outline:none;font-size:.88rem}
.header-search button{width:44px;background:#D62828;border:none;color:#fff;cursor:pointer;font-size:1rem;transition:background .2s}
.header-search button:hover{background:#b01f1f}
.header-phone .label{font-size:.68rem;color:#999;text-transform:uppercase;letter-spacing:.05em}
.header-phone .number{font-size:1.5rem;font-weight:900;color:#D62828}
.btn-contact{background:#D62828;color:#fff;border:none;padding:11px 22px;font-weight:700;border-radius:3px;font-size:.88rem;cursor:pointer;transition:background .2s}
.btn-contact:hover{background:#b01f1f}

.site-nav{background:#0B1F3A}
.nav-inner{min-height:48px}
.nav-products-btn{background:rgba(0,0,0,.3);padding:0 20px;font-size:.83rem;font-weight:700;border-right:2px solid rgba(255,255,255,.1)}
.nav-menu>li>a{line-height:48px;padding:0 16px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.88)}
.nav-menu>li.current>a{color:#fff;box-shadow:inset 0 -3px 0 #D62828}
.nav-menu>li>a:hover{color:#fff;background:rgba(255,255,255,.08)}

.hero{min-height:520px}
.hero-overlay{left:220px}
.hero-left{background:#fff}
.hero-text h1{font-size:3.4rem;line-height:1.1}
.hero-text h1 em{color:#ff4444}
.hero-content{padding:52px 64px}

/* Feature boxes - icon LEFT style like Santech mobile */
.features{background:#f8f8f8;padding:0;border-bottom:2px solid #e8e8e8}
.features-grid{grid-template-columns:repeat(3,1fr)}
.feat-box{display:flex;gap:16px;align-items:flex-start;padding:24px 28px;background:#fff;border-right:1px solid #eee}
.feat-box:last-child{border-right:none}
.feat-icon{width:52px;height:52px;background:#D62828;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s}
.feat-box:hover .feat-icon{transform:scale(1.08)}
.feat-icon svg{filter:brightness(100);width:26px;height:26px}
.feat-body{}
.feat-title{font-size:.95rem;font-weight:700;color:#0B1F3A;margin-bottom:4px}
.feat-desc{font-size:.82rem;color:#666;line-height:1.6}

/* Sticky bottom CTA bar */
.mobile-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:9999;display:none;grid-template-columns:1fr 1fr;box-shadow:0 -3px 16px rgba(0,0,0,.25)}
.mobile-cta-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;font-weight:700;font-size:.95rem;color:#fff;text-decoration:none}
.cta-zalo{background:#0068ff}
.cta-phone{background:#1db954}
.cta-zalo:hover{background:#0055d4}
.cta-phone:hover{background:#17a349}

/* === MOBILE === */
@media(max-width:768px){
  body{padding-bottom:58px}
  .mobile-cta-bar{display:grid}
  .top-bar{background:#D62828;border:none;padding:6px 0}
  .top-bar .container{justify-content:space-between}
  .top-bar-left{display:none}
  .top-bar-right{width:100%;justify-content:space-between}
  .top-bar a{color:#fff;font-size:.8rem;font-weight:600}

  /* Header: hamburger LEFT, logo CENTER, search RIGHT */
  .site-header{position:sticky;top:0;z-index:300}
  .header-inner{height:60px;justify-content:space-between;padding:0 16px;gap:0}
  .site-logo{position:absolute;left:50%;transform:translateX(-50%);font-size:1.5rem}
  .mobile-nav-toggle{display:flex;order:-1;background:none;border:none;cursor:pointer;color:#0B1F3A;padding:8px}
  .header-search{display:none}
  .header-search-cat{display:none}
  .header-right{margin-left:0}
  .header-phone,.btn-contact{display:none}
  .mobile-search-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#0B1F3A;padding:8px;font-size:1.2rem}

  .site-nav{display:none}
  .hero{min-height:280px}
  .hero-left{display:none}
  .hero-overlay{left:0}
  .hero-content{padding:28px 20px}
  .hero-text h1{font-size:1.8rem}
  .hero-btns{flex-direction:column;gap:10px}
  .hero-btns .btn{width:100%;justify-content:center}

  /* Feature boxes: VERTICAL list, icon left */
  .features-grid{grid-template-columns:1fr;gap:0}
  .feat-box{border-right:none;border-bottom:1px solid #eee;padding:18px 20px;background:#fff}
  .feat-box:last-child{border-bottom:none}

  .about-grid{grid-template-columns:1fr;gap:20px}
  .about-img img{height:220px}
  .about{padding:36px 0}
  .sec-head h2{font-size:1.15rem}
  .products{padding:32px 0}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .prod-thumb{height:145px}
  .prod-body{padding:10px}
  .prod-title{font-size:.85rem}
  .cta-banner{padding:32px 0}
  .cta-banner h2{font-size:1.3rem}
  .cta-banner-btns{flex-direction:column;align-items:center;gap:10px}
  .cta-banner-btns .btn{width:100%;max-width:300px;justify-content:center}
  .site-footer{padding:28px 0 0}
  .footer-grid{grid-template-columns:1fr;gap:20px;padding-bottom:20px}
  .footer-bottom{flex-direction:column;text-align:center}
  .container{padding:0 16px}
}
@media(max-width:480px){
  .prod-grid{grid-template-columns:1fr}
  .header-inner{height:56px}
  .site-logo{font-size:1.3rem}
}

/* === DANH MUC DROPDOWN (unified) === */
.hero-left { display: none !important; }
.hero-overlay { left: 0 !important; }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 260px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  z-index: 400;
  display: none;
  flex-direction: column;
  border-top: 3px solid #D62828;
}
.nav-dropdown.open { display: flex; }
.nav-dropdown li a {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; font-size: .85rem; font-weight: 600;
  color: #0B1F3A; border-bottom: 1px solid #f3f4f6;
  transition: background .2s, color .2s;
  text-decoration: none;
}
.nav-dropdown li a:hover { background: #D62828; color: #fff; }
.nav-dropdown .view-all {
  background: #0B1F3A; color: #fff;
  font-weight: 700; font-size: .83rem;
  justify-content: center; padding: 13px 20px;
  transition: background .2s;
}
.nav-dropdown .view-all:hover { background: #162f56; color: #fff; }
.nav-products-btn.active { background: rgba(0,0,0,.5) !important; }
.site-nav { position: relative; }

/* === FIX: data-reveal luon hien thi tren WordPress === */
/* Neu JS chua chay kip, noi dung van luon hien */
[data-reveal] {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}

/* Reset hero overlay (hero-left da bi an) */
.hero-overlay { left: 0 !important; }
.hero-left { display: none !important; }
.hero-content { width: 100%; }

/* v2 fixes */
[data-reveal]{opacity:1!important;transform:translateY(0)!important;transition:none!important}
.hero-left{display:none!important}
.hero-overlay{left:0!important}
.hero-content{width:100%}
.mhv2-enqueue{display:none}

/* ── FLOATING ZALO BUTTON ───────────────────────────────── */
.zalo-float {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0068ff;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  padding: 10px 18px 10px 12px;
  font-size: .85rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0,104,255,.45);
  animation: zalo-bounce 2s ease-in-out infinite;
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.zalo-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 30px rgba(0,104,255,.55);
  color: #fff;
}
.zalo-float-icon { display:flex;align-items:center;flex-shrink:0 }
.zalo-float-label { font-size:.82rem }
@keyframes zalo-bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (max-width:767px) {
  .zalo-float { bottom: 76px; right: 12px; padding: 10px 14px 10px 10px; font-size:.78rem }
}

/* ── FOOTER SOCIAL ICONS ────────────────────────────────── */
.footer-social a {
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;
  text-decoration:none;margin-right:8px;transition:background .2s;
}
.footer-social a:hover { background:#D62828 }