/* =========================================================
   RESET
========================================================= */
.container{margin:auto;padding:0 15px}
.flex-between{display:flex;align-items:center;gap:9px}
/* =========================================================
   HEADER WRAPPER
========================================================= */
.site-header{background:linear-gradient(
      180deg,rgba(7,16,34,0.97) 0%,rgba(10,22,48,0.98) 100%
    );backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,0.35)}
/* =========================================================
   TOP BAR
========================================================= */
.top-bar{background:linear-gradient(
      90deg,#081224 0%,#0d1d3a 100%
    );color:#d7e3ff;font-size:13px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.top-left{display:flex;align-items:center;gap:8px}
.top-left .text{opacity:0.75}
.top-bar .hotline{background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );color:#081224;padding:4px 10px;border-radius:30px;font-weight:700;box-shadow:0 0 12px rgba(255,179,0,0.35)}
.top-right{display:flex;gap:18px;flex:1;justify-content:flex-end}
.top-right span{opacity:0.9;transition:0.25s}
.top-right span:hover{color:#fff}
/* =========================================================
   MAIN HEADER
========================================================= */
.main-header{position:relative;padding:16px 0;/*border-bottom:1px solid rgba(255,255,255,0.05);*/}
.main-header::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(
      90deg,transparent,rgba(255,179,0,0.45),transparent
    )}
/* =========================================================
   LOGO
========================================================= */
.logo{flex:0 0 auto}
.logo img{height:48px;display:block}
/* =========================================================
   MAKITA BADGE
========================================================= */
.makita-badge{display:flex;flex-direction:column;align-items:center;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 4px 18px rgba(0,0,0,0.2)}
.badge-text{font-size:11px;font-weight:700;color:#ffb300;margin-bottom:4px;letter-spacing:0.4px}
.makita-badge img{height:32px}
/* =========================================================
   SEARCH BOX
========================================================= */
.search-box{display:flex;flex:1;max-width:560px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 4px 18px rgba(0,0,0,0.22);transition:0.3s}
.search-box:hover{border-color:rgba(255,179,0,0.25);box-shadow:0 0 18px rgba(255,179,0,0.12)}
.search-box input{flex:1;padding:12px 16px;border:none;background:transparent;color:#fff;font-size:16px;outline:none;min-width: 0; width: 100%; font-size: 16px;}
.search-box input::placeholder{color:rgba(255,255,255,0.45)}
.search-box button{width:54px;border:none;cursor:pointer;background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );color:#081224;font-weight:700;transition:0.25s}
.search-box button:hover{filter:brightness(1.05)}

/* HIỆU ỨNG NHẤP NHÁY TỰ ĐỘNG SEARCH */
.search-field{caret-color:#fff}
.search-box{position:relative}
.fake-placeholder{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.5);pointer-events:none;white-space:nowrap}
.fake-placeholder::after{content:"|";margin-left:2px;animation:blink 1s infinite}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes caretBlink{0%{caret-color:#fff}50%{caret-color:transparent}100%{caret-color:#fff}}
.search-field:focus{animation:caretBlink 1s infinite}
/* =========================================================
   HEADER ACTIONS
========================================================= */
.header-actions{display:flex;gap:10px; margin-left:auto}
.header-actions .item{position:relative;min-width:74px;padding:10px 8px;flex-direction: column;border-radius:16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(8px);color:#fff;text-align:center;cursor:pointer;transition:0.25s}
.header-actions .item:hover{transform:translateY(-2px);background:rgba(255,179,0,0.1);border-color:rgba(255,179,0,0.25);box-shadow:0 10px 22px rgba(0,0,0,0.3)}
.header-actions .item a{color:#fff;text-decoration:none}
.header-actions .item span{display:block;font-size:12px;padding-top:6px}
/* =========================================================
   CART
========================================================= */
.cart{position:relative}
.cart-count{position:absolute;top:2px;right:5px;background:linear-gradient(
      135deg,#ffb300,#ff8f00
    );color:#081224;font-size:10px;font-weight:700;padding:3px 6px;border-radius:30px;box-shadow:0 0 10px rgba(255,179,0,0.4)}
/* =========================================================
   BUTTON EFFECT
========================================================= */
button,.header-actions .item{transition:transform 0.12s ease,opacity 0.12s ease}
button:active,.header-actions .item:active{transform:scale(0.94);opacity:0.7}
/* =========================================================
   RIPPLE EFFECT
========================================================= */
.ripple-btn{position:relative;overflow:hidden}
.ripple{position:absolute;width:20px;height:20px;background:rgba(255,255,255,0.4);border-radius:50%;transform:scale(0);animation:ripple 0.5s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(10);opacity:0}}
/* =========================================================
   DESKTOP LARGE
========================================================= */
@media (min-width:1201px){.search-box{max-width:620px}}
/* =========================================================
   TABLET
========================================================= */
@media (max-width:1023px){.makita-badge{display:none}.main-header .container{gap:10px}.logo img{height:36px}.search-box{min-width:0}.header-actions{gap:8px}.header-actions .item{min-width:62px;padding:8px 6px}.header-actions .item span{font-size:11px}}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width:767px){.top-right{display:none}.top-bar{padding:6px 0}.top-left{font-size:12px;margin:0 auto}.main-header{padding:10px 0}.main-header .container{gap:8px;padding:0}.logo img{height:28px}.search-box{height:38px;border-radius:12px}.search-box input{padding:0 12px;font-size:16px}.search-box button{width:42px}.header-actions{gap:6px}.header-actions .item{min-width:auto;padding:8px;border-radius:12px}.header-actions .item span{padding-top:0!important}.header-actions .item:not(:first-child){display:none}.cart-count{top:0;right:7px}}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width:540px){.logo img{height:24px}.search-box{height:34px}.search-box input{font-size:16px}.header-actions .item span{display:none}.search-box button{width:38px}.header-actions .item{padding:7px}}


/* =========================================================
   FOTTER: CSS TOÀN BỘ
========================================================= */
/*******************************
 * STYLE FOR FOOTER
 * *****************************/
.footer-col,.footer-block,.newsletter-footer{background:rgba(255,255,255,0.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:18px;margin-bottom:20px;transition:0.3s ease}
.footer-col:hover,.footer-block:hover,.newsletter-footer:hover{transform:translateY(-4px);border-color:rgba(245,158,11,0.4)}
.site-footer{background:linear-gradient(135deg,#0b1220,#0f172a);color:#cbd5e1;padding-top:60px;font-family:Arial,sans-serif}
/* Title */
.site-footer h3{color:#ffffff;font-size:15px;font-weight:700;margin-bottom:18px;position:relative;padding-bottom:8px}
.site-footer h3::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:2px;background:#f59e0b;border-radius:2px}
/* Text */
.footer-col p{font-size:14px;line-height:1.7;color:#cbd5e1;margin-bottom:8px}
/* Links */
.footer-col a{color:#94a3b8;display:block;padding:4px 0;text-decoration:none;transition:all 0.25s ease;position:relative}
.footer-col a:hover{color:#ffffff;transform:translateX(6px)}
/* Block spacing */
.footer-block{margin-bottom:30px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-right:8px;border-radius:50%;background:rgba(255,255,255,0.08);color:#fff;transition:all 0.3s ease}
.footer-social a:hover{background:#f59e0b;color:#0f172a;transform:translateY(-3px)}
/* ===============================
FORM
=============================== */
.subscribe-form{display:flex;gap:10px;margin-top:5px}
.subscribe-form .form-control{height:48px;border:none;border-radius:4px;background:#0d1a27;color:#fff;box-shadow:none;padding:0 16px;font-size:16px;}
.subscribe-form .form-control:focus{outline:none;box-shadow:none}
.subscribe-form .form-control::-webkit-input-placeholder{color:rgba(255,255,255,.45)}
.subscribe-form button{width:160px;height:48px;border:none;border-radius:4px;background:#ff2a2a;color:#fff;font-weight:700}
.subscribe-form button:hover{background:#e41c1c}
@media (max-width:991px){.subscribe-form{display:block}.subscribe-form .form-control{margin-bottom:10px}.subscribe-form button{width:100%}}
.newsletter-footer h4{font-size:14px;color:#fff;margin-bottom:8px}
.newsletter-footer p{font-size:13px;color:#94a3b8}
.newsletter input{border-radius:8px;border:none;padding:10px;margin-bottom:10px;outline:none}
.newsletter button{background:#f59e0b;border:none;color:#111827;font-weight:bold;border-radius:8px;padding:10px;transition:0.3s}
.newsletter button:hover{background:#fbbf24}
/* Bottom bar */
.footer-bottom{margin-top:50px;padding:18px;background:#020617;font-size:13px;color:#64748b;border-top:1px solid rgba(255,255,255,0.06)}
.bct{margin-top:15px;max-width:160px;filter:brightness(0.95);opacity:0.9;transition:0.3s}
.bct:hover{opacity:1;transform:scale(1.05)}
.footer-social{display:flex;gap:10px;margin:10px}
.footer-social .social{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,0.05);transition:all 0.3s ease}
.footer-social .social svg{width:20px;height:20px;fill:#cbd5e1;transition:0.3s}
/* NEON EFFECT */
.footer-social .fb:hover{background:#1877f2;box-shadow:0 0 12px #1877f2}
.footer-social .zalo:hover{background:#0068ff;box-shadow:0 0 14px #0068ff}
.footer-social .yt:hover{background:#ff0033;box-shadow:0 0 12px #ff0033}
.footer-social .tt:hover{background:#00f2ea;box-shadow:0 0 12px #00f2ea}
.footer-social .social:hover svg{fill:#fff}
@media (max-width:768px){.site-footer{text-align:center;padding-top:40px}.footer-social{justify-content:center}.site-footer h3::after{left:50%;transform:translateX(-50%)}.footer-col a:hover{transform:none}}

/***KHU VỰC NẰM NGOÀI FOOTER**/
.banner_ads.stickytop .banner-right{position:fixed;top:40%;transform:translateY(-50%);z-index:999;right:0;transition:all 0.45s linear}
.banner_ads.stickytop .banner-left{top:0;transform:none}
.banner_ads .banner-right{position:fixed;top:40%;transform:translateY(-50%);right:0;z-index:9;transition:all 0.45s linear;width:auto;display:flex;flex-direction:column;align-items:flex-end}
.banner_ads .banner-left{position:fixed;top:50%;transform:translateY(-50%);left:0;z-index:999;transition:all 0.3s ease}
.banner-right > div{border:2px solid #0f1a32;border-radius:15px 0 0 15px;background:#ffffffcf;border-right:none;display:flex;align-items:center;flex-shrink:0;height:50px;width:180px;padding:5px 12px;margin-bottom:10px;margin-left:auto;border-radius:5px 0 0 5px;transition:all 0.3s ease}
.banner-right > div:hover{width:200px;box-shadow:-4px 4px 12px rgba(0,0,0,0.2)}
.banner-right span,.banner-right img{margin-right:8px;flex-shrink:0}
.connect_phone:hover{background:#c62828}
.connect_zalo:hover{background:#006edc}
.connect_fb:hover{background:#2f4a86}
.connect_map:hover{background:#e64a19}
.connect_phone:hover a,.connect_phone:hover span,.connect_phone:hover .phone-text strong,.connect_zalo:hover a,.connect_fb:hover a,.connect_map:hover a{color:#fff!important}
.connect_fb:hover .glyphicon,.connect_phone:hover .glyphicon,.connect_zalo:hover img,.connect_map:hover .glyphicon{color:#fff!important;border:2px solid #fff!important;border-radius:50%}
.banner-right a{display:flex;align-items:center;gap:8px;text-decoration:none;color:#000}
.banner-right img,.banner-right .glyphicon{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;object-fit:contain;flex-shrink:0;font-size:23px;line-height:1;vertical-align:middle;margin-right:10px;color:#016067;border:2px solid #016067;border-radius:50%}
@media (max-width:1439px){.banner_ads{display:none}}
@media (min-width:1440px){.banner_ads .banner-right img{right:0;float:left}.banner_ads .banner-left img{left:0;float:left}}

.back-to-top{position:fixed;left:10px;display:none;cursor:pointer;}
.back-to-top span{background: #666;border-radius: 50%;padding: 10px;color: #fff;height: 100%;width: 100%;border: 5px solid #ccc;}