/*
Theme Name: MKMOLD
Theme URI: https://mkmold.vn
Author: Công ty TNHH MKMOLD
Description: Theme tùy chỉnh cho website B2B khuôn mẫu & cơ khí chính xác.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mkmold
*/

:root{
  --primary:#1c2e4a; --primary-dark:#111d31; --accent:#d32f2f; --accent-dark:#b02323;
  --gray:#f3f4f6; --text:#1f2937; --muted:#6b7280; --container:1200px; --header-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--text);line-height:1.6}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}

/* ===== TOPBAR ===== */
.topbar{background:var(--primary-dark);color:#cbd5e1;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topbar-info{display:flex;gap:22px;flex-wrap:wrap}
.topbar a:hover{color:#fff}
.lang a{padding:2px 8px;border-radius:3px}
.lang a.active{background:var(--accent);color:#fff}

/* ===== HEADER ===== */
.site-header{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:26px;color:var(--primary);letter-spacing:.5px}
.logo-mark{width:40px;height:40px;background:var(--primary);color:#fff;display:grid;place-items:center;border-radius:6px;font-size:20px;border-bottom:4px solid var(--accent)}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:1.5px;margin-top:-4px}

.main-nav>ul{display:flex;align-items:center;gap:4px}
.main-nav li{position:relative}
.main-nav>ul>li>a{display:block;padding:28px 14px;font-weight:600;font-size:14.5px;text-transform:uppercase;color:var(--primary);position:relative}
.main-nav>ul>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:20px;height:3px;background:var(--accent);transform:scaleX(0);transition:.25s}
.main-nav>ul>li:hover>a::after,.main-nav>ul>li.current>a::after{transform:scaleX(1)}
.sub-menu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;box-shadow:0 10px 25px rgba(0,0,0,.12);border-top:3px solid var(--accent);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.main-nav li:hover>.sub-menu{opacity:1;visibility:visible;transform:none}
.sub-menu a{display:block;padding:11px 18px;font-size:14px;border-bottom:1px solid #eee}
.sub-menu a:hover{background:var(--gray);color:var(--accent);padding-left:24px}
.btn-rfq{background:var(--accent);color:#fff;padding:11px 20px;border-radius:4px;font-weight:700;font-size:14px;text-transform:uppercase;transition:.2s}
.btn-rfq:hover{background:var(--accent-dark)}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:9px;width:24px;height:3px;background:var(--primary);transition:.25s}
.nav-toggle span{top:20px}.nav-toggle span::before{top:-8px;left:0}.nav-toggle span::after{top:8px;left:0}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(8px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-8px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;height:min(78vh,640px);min-height:480px;overflow:hidden;background:var(--primary)}
.slide{position:absolute;inset:0;display:flex;align-items:center;color:#fff;opacity:0;visibility:hidden;transition:opacity .8s ease;
  background-size:cover;background-position:center}
.slide.active{opacity:1;visibility:visible}
/* Thay linear-gradient bằng ảnh thật: url('anh-xuong.jpg') */
.slide-1{background-image:linear-gradient(100deg,rgba(17,29,49,.95) 30%,rgba(28,46,74,.55)),repeating-linear-gradient(45deg,#24395a 0 2px,#1c2e4a 2px 14px)}
.slide-2{background-image:linear-gradient(100deg,rgba(17,29,49,.95) 30%,rgba(28,46,74,.55)),repeating-linear-gradient(-45deg,#2b4468 0 2px,#1c2e4a 2px 14px)}
.slide-3{background-image:linear-gradient(100deg,rgba(17,29,49,.95) 30%,rgba(28,46,74,.55)),repeating-linear-gradient(90deg,#24395a 0 2px,#1c2e4a 2px 16px)}
.slide-content{max-width:660px;transform:translateY(24px);opacity:0;transition:.7s .3s}
.slide.active .slide-content{transform:none;opacity:1}
.eyebrow{display:inline-block;background:var(--accent);padding:4px 14px;font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:2px;margin-bottom:18px}
.slide h1,.slide h2{font-size:clamp(28px,4.6vw,52px);line-height:1.2;font-weight:800;margin-bottom:16px}
.slide p{font-size:clamp(15px,1.6vw,18px);color:#dbe3ee;margin-bottom:28px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 28px;font-weight:700;text-transform:uppercase;font-size:14px;border-radius:4px;border:2px solid transparent;transition:.2s}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark)}
.btn-outline{border-color:#fff;color:#fff}.btn-outline:hover{background:#fff;color:var(--primary)}

.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.2);color:#fff;font-size:20px;cursor:pointer;z-index:5;transition:.2s}
.hero-arrow:hover{background:var(--accent);border-color:var(--accent)}
.hero-prev{left:20px}.hero-next{right:20px}
.hero-dots{position:absolute;bottom:90px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:5}
.hero-dots button{width:34px;height:4px;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s}
.hero-dots button.active{background:var(--accent);width:52px}

/* Thanh số liệu nổi dưới banner */
.hero-stats{position:absolute;left:0;right:0;bottom:0;background:rgba(17,29,49,.92);z-index:4}
.hero-stats .container{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:16px 10px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.12)}
.stat:last-child{border:0}
.stat b{display:block;font-size:24px;color:#fff;font-weight:800}
.stat span{font-size:12.5px;color:#aebbd0;text-transform:uppercase;letter-spacing:.5px}

/* ===== RESPONSIVE ===== */
@media(max-width:991px){
  .topbar-info .hide-md{display:none}
  .nav-toggle{display:block}
  .btn-rfq{display:none}
  .main-nav{position:absolute;top:var(--header-h);left:0;right:0;background:#fff;max-height:0;overflow:hidden;transition:max-height .35s;box-shadow:0 12px 20px rgba(0,0,0,.1)}
  .nav-open .main-nav{max-height:80vh;overflow-y:auto}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
  .main-nav>ul>li>a{padding:14px 20px;border-bottom:1px solid #eee}
  .main-nav>ul>li>a::after{display:none}
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:var(--gray);display:none}
  .main-nav li.open>.sub-menu{display:block}
  .sub-menu a{padding-left:34px}
  .hero-arrow{display:none}
}
@media(max-width:600px){
  .topbar .lang{margin-left:auto}
  .topbar-info span:not(:first-child){display:none}
  .logo{font-size:22px}
  .hero{min-height:520px}
  .hero-dots{bottom:120px}
  .hero-stats .container{grid-template-columns:repeat(2,1fr)}
  .stat{padding:8px;border-bottom:1px solid rgba(255,255,255,.12)}
  .stat b{font-size:19px}
}

/* ===== WP menu classes ===== */
.main-nav>ul>li.current-menu-item>a::after,.main-nav>ul>li.current_page_item>a::after{transform:scaleX(1)}
/* ===== SECTIONS ===== */
.section{padding:80px 0}.section.alt{background:var(--gray)}
.sec-title{text-align:center;margin-bottom:44px}
.sec-title span{color:var(--accent);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:2px}
.sec-title h2{font-size:clamp(24px,3vw,36px);color:var(--primary);margin-top:6px;line-height:1.25}
.grid{display:grid;gap:24px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid #e5e7eb;border-bottom:3px solid transparent;border-radius:6px;overflow:hidden;transition:.25s;display:block}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.1);border-bottom-color:var(--accent)}
.card-body{padding:22px}.card h3{color:var(--primary);font-size:18px;margin-bottom:8px}.card p{color:var(--muted);font-size:14.5px}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ph{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#e5e9f0 0 10px,#dde3ec 10px 20px);display:grid;place-items:center;color:var(--muted);font-size:13px}
.more{display:inline-block;margin-top:12px;color:var(--accent);font-weight:700;font-size:14px}
.about{align-items:center;gap:48px}
.about h2{font-size:clamp(24px,3vw,36px);color:var(--primary);margin:6px 0 16px;line-height:1.25}
.about .tag{color:var(--accent);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:2px}
.about p{color:var(--muted);margin-bottom:14px}
.checks li{padding-left:28px;position:relative;margin-bottom:8px;font-weight:500}
.checks li::before{content:"✔";position:absolute;left:0;color:var(--accent)}
.about .ph{aspect-ratio:5/4;border-radius:6px;border-left:8px solid var(--primary)}
.strength{text-align:center;padding:30px 20px}
.icon{width:64px;height:64px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:28px;margin:0 auto 16px;border-bottom:4px solid var(--accent)}
.partners{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.partner{border:1px solid #e5e7eb;background:#fff;padding:26px 8px;text-align:center;font-weight:700;color:#9ca3af;border-radius:4px;letter-spacing:1px}
.rfq{background:var(--primary);color:#fff}
.rfq-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.rfq h2{font-size:clamp(24px,3vw,36px);line-height:1.25;margin:6px 0 14px}
.rfq .tag{color:#ff8a80;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:2px}
.rfq p{color:#cbd5e1;margin-bottom:12px}
.rfq form{background:#fff;padding:28px;border-radius:6px;color:var(--text)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rfq input,.rfq textarea{width:100%;padding:13px;border:1px solid #d1d5db;border-radius:4px;font:inherit;margin-bottom:14px}
.rfq input:focus,.rfq textarea:focus{outline:2px solid var(--primary);border-color:var(--primary)}
.rfq label{font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
.rfq .btn{width:100%;cursor:pointer}
.hp{position:absolute;left:-9999px}
.notice{background:#e8f5e9;color:#1b5e20;padding:12px 16px;border-radius:4px;margin-bottom:14px}
.site-footer{background:var(--primary-dark);color:#aebbd0;padding-top:56px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px;padding-bottom:40px}
.site-footer h4{color:#fff;margin-bottom:16px;text-transform:uppercase;font-size:15px;letter-spacing:1px}
.site-footer li{margin-bottom:8px}.site-footer a:hover{color:#fff}
.copy{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;text-align:center;font-size:13px}
.entry{max-width:800px;margin:50px auto}.entry h1,.entry h2{color:var(--primary);margin-bottom:12px}
@media(max-width:991px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.g2,.rfq-wrap,.footer-grid{grid-template-columns:1fr}.partners{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.section{padding:56px 0}.g3,.g4{grid-template-columns:1fr}.frow{grid-template-columns:1fr}.partners{grid-template-columns:repeat(2,1fr)}}

.page-hero{background:linear-gradient(100deg,var(--primary-dark),var(--primary));color:#fff;padding:54px 0;border-bottom:4px solid var(--accent)}
.page-hero h1{font-size:clamp(26px,4vw,40px);font-weight:800}
.crumbs{margin-top:8px;font-size:14px;color:#aebbd0}.crumbs a:hover{color:#fff}
.entry-content{max-width:900px;margin:0 auto}
.entry-content h2,.entry-content h3{color:var(--primary);margin:22px 0 10px}
.entry-content p{margin-bottom:14px}.entry-content ul{list-style:disc;padding-left:22px;margin-bottom:14px}
.entry-content img{max-width:100%;height:auto}
.card[id]{scroll-margin-top:100px}
.pagination{margin-top:30px;text-align:center}.pagination .page-numbers{padding:8px 14px;border:1px solid #e5e7eb;margin:2px}
.pagination .current{background:var(--primary);color:#fff}