/* =====================================================================
   SUMO MATERIALS - giao diện mới (phong cách sạch, hiện đại, B2B)
   File này được nạp SAU cùng các CSS cũ để ghi đè. Xoá dòng <link> trong
   master.blade.php là web trở về giao diện cũ.
   ===================================================================== */
:root{
  --zb:#125988;      /* xanh thương hiệu SUMO */
  --zbd:#0b3d62;     /* xanh đậm */
  --zo:#f28c1c;      /* cam logo SUMO */
  --zod:#d9730a;
  --zink:#1e293b;
  --zmute:#64748b;
  --zbg:#f8fafc;
  --zline:#e2e8f0;
  --zr:14px;
  --zshadow:0 10px 30px -12px rgba(15,23,42,.18);
}
html{scroll-behavior:smooth}
body{font-family:Roboto,"Segoe UI",Arial,sans-serif!important;color:var(--zink);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:Roboto,"Segoe UI",Arial,sans-serif!important;color:var(--zink);letter-spacing:-.2px}
a{transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .2s}
img{border-radius:0}

/* ---------- Thanh liên hệ trên cùng ---------- */
#top-bar,.header-top{background:var(--zbd)!important;margin:0!important;min-height:36px}
.header-top .nav>li>a,.header-top .header-contact a,.header-top a{color:#e2ecf5!important;font-size:12.5px;font-weight:500}
.header-top a:hover{color:#fff!important}
.header-top i{font-size:15px!important;color:var(--zo)}

/* ---------- Header trắng ---------- */
.header-wrapper,.header-bg-color,.header-main{background:#fff!important}
.header-main{height:78px!important;border-bottom:1px solid var(--zline)!important;box-shadow:0 1px 0 rgba(15,23,42,.02)}
.header .flex-row,.header-inner{max-width:1280px}
#logo{width:auto!important}
#logo img{max-height:62px!important;padding:0!important;width:auto}
#logo a:hover img{opacity:.9}
.stuck .header-main,.header.show-on-scroll .header-main{height:66px!important;box-shadow:0 6px 24px -12px rgba(15,23,42,.25)}
.stuck #logo img{max-height:50px!important}
.header-main .nav>li>a{color:var(--zink)!important;font-size:13px!important;font-weight:600;letter-spacing:.3px;padding:0 14px!important;line-height:78px!important;position:relative}
.stuck .header-main .nav>li>a{line-height:66px!important}
.header-main .nav>li>a:hover,.header-main .nav>li.active>a,.header-main .nav>li.current>a{color:var(--zb)!important}
.header-main .nav>li:not(.zen-cta)>a:after{content:"";position:absolute;left:14px;right:14px;bottom:18px;height:2px;background:var(--zo);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.stuck .header-main .nav>li:not(.zen-cta)>a:after{bottom:12px}
.header-main .nav>li:not(.zen-cta):hover>a:after,.header-main .nav>li.active>a:after{transform:scaleX(1)}
.header-main .nav>li.zen-cta{margin-left:10px}
.header-main .nav>li.zen-cta>a{line-height:1!important;background:transparent;border:1.5px solid var(--zb);color:var(--zb)!important;border-radius:6px;padding:11px 20px!important;font-weight:700}
.header-main .nav>li.zen-cta>a:hover{background:var(--zb);color:#fff!important}
.header-main .nav>li.zen-cta>a:after{display:none}
.nav-dropdown{background:#fff!important;border:1px solid var(--zline)!important;border-radius:var(--zr);box-shadow:0 24px 48px -16px rgba(15,23,42,.22)!important;padding:20px 12px!important}
.nav-dropdown .menu-item-has-children>a,.nav-dropdown .title>a,.nav-dropdown .nav-dropdown-col>a{color:var(--zbd)!important;font-size:13px!important;font-weight:700;letter-spacing:.3px}
.nav-dropdown-default .nav-column li>a,.nav-dropdown.nav-dropdown-default>li>a{color:var(--zmute)!important;font-size:14px;line-height:1.5;padding:5px 0!important}
.nav-dropdown>li>a:hover,.nav-column li>a:hover,.nav-dropdown li ul li>a:hover{color:var(--zo)!important}
.mobile-nav .icon-menu{color:var(--zbd)}

/* ---------- Slider đầu trang ---------- */
.section.hero{background:#fff!important}
#slider-1348981655{max-width:1280px;margin:18px auto 0;border-radius:18px;overflow:hidden;box-shadow:var(--zshadow)}
#slider-1348981655 .flickity-page-dots{bottom:12px}
.flickity-page-dots .dot{background:rgba(255,255,255,.55)!important;border:0!important;width:9px;height:9px}
.flickity-page-dots .dot.is-selected{background:var(--zo)!important;width:26px;border-radius:6px}
.slider-nav-light .flickity-prev-next-button{opacity:.9}
.flickity-prev-next-button .arrow{fill:var(--zbd)}

/* ---------- Khối chung ---------- */
.section{padding-top:0}
.row.row-small>.col,.row-large>.col{margin-bottom:0}
.title_home,.section h3.title_home{text-transform:uppercase;text-align:center;font-weight:800!important;letter-spacing:.4px;color:var(--zink)!important;margin:0 0 38px!important;padding-bottom:18px;position:relative}
.title_home span{font-size:clamp(22px,2.6vw,32px)!important;color:var(--zink)!important}
.title_home:after{content:"";position:absolute;left:50%;bottom:0;width:60px;height:4px;border-radius:4px;background:var(--zo);transform:translateX(-50%)}

/* Giới thiệu ngắn */
#section_1200627607{background:#fff!important;padding:70px 0!important}
#section_1200627607 .col-inner img{border-radius:var(--zr);box-shadow:var(--zshadow)}
#section_1200627607 .text h1,#section_1200627607 .text h2,#section_1200627607 .text h3{color:var(--zb)!important;font-weight:800}
#section_1200627607 .text p{color:var(--zmute);line-height:1.8;font-size:15.5px}
#section_1200627607 .text h3:first-child,#section_1200627607 .text h4:first-child{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--zb)!important}
a.button.primary.is-link{background:var(--zo)!important;color:#fff!important;border-radius:8px;padding:0 24px;font-weight:700;text-transform:none;box-shadow:0 8px 20px -8px rgba(242,140,28,.7)}
a.button.primary.is-link:hover{background:var(--zod)!important}
a.button.primary.is-link span{color:#fff}

/* Sản phẩm của chúng tôi */
#section_1830970943{background:var(--zbg)!important;padding:74px 0!important;min-height:0!important}
#section_1830970943 h2{margin-bottom:34px}
#section_1830970943 h2 span,#section_1830970943 h2 strong{color:var(--zink)!important;font-size:clamp(24px,2.8vw,34px)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.4px}
#section_1830970943 h2:after{content:"";display:block;width:60px;height:4px;border-radius:4px;background:var(--zo);margin:16px auto 0}
.col-dich-vu-noi-bat{padding:12px!important}
.col-dich-vu-noi-bat .col-inner{background:#fff;border:1px solid var(--zline);border-radius:var(--zr);padding:20px!important;height:100%;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.col-dich-vu-noi-bat .col-inner:hover{transform:translateY(-6px);box-shadow:var(--zshadow);border-color:#cbd5e1}
.col-dich-vu-noi-bat h5{background:transparent!important;color:var(--zink)!important;padding:0!important;text-align:left;font-size:15px;font-weight:700;line-height:1.45;text-transform:uppercase;min-height:44px;margin:0 0 14px}
.col-dich-vu-noi-bat a{color:inherit;font-size:inherit}
.col-dich-vu-noi-bat a.boton2{color:var(--zb)!important}
.col-dich-vu-noi-bat .img-inner{border-radius:10px;background:#fff;overflow:hidden}
.col-dich-vu-noi-bat .img-inner img{transition:transform .4s}
.col-dich-vu-noi-bat .col-inner:hover .img-inner img{transform:scale(1.05)}
.col-dich-vu-noi-bat p{margin:auto 0 0;padding-top:16px}
.boton2,a.boton2{display:inline-block;background:transparent!important;border:1.5px solid var(--zb)!important;color:var(--zb)!important;border-radius:6px!important;padding:9px 24px!important;font-weight:700;font-size:13.5px;text-transform:none;box-shadow:none!important}
.boton2:hover,a.boton2:hover{background:var(--zb)!important;color:#fff!important}

/* Ứng dụng thực tế */
#section_954202373{padding:70px 0!important;margin:0!important;background:#fff}
#section_954202373 img{border-radius:var(--zr)}

/* Bài viết nổi bật (hàng 3 cột & 4 cột) */
.tin-tuc .col.post-item{padding:12px!important}
.tin-tuc .box{background:#fff;border:1px solid var(--zline);border-radius:var(--zr);overflow:hidden;box-shadow:none;transition:transform .25s,box-shadow .25s}
.tin-tuc .box:hover{transform:translateY(-6px);box-shadow:var(--zshadow)}
.tin-tuc .col-inner{border:0!important;outline:0!important;box-shadow:none!important}
.tin-tuc *:focus{outline:none!important}
a:focus:not(:focus-visible){outline:none}
.tin-tuc .box-image{border-radius:0!important}
.tin-tuc .box-text{background:#fff}
.tin-tuc .post-title{color:var(--zink)!important;font-weight:700;font-size:15px;line-height:1.5;text-transform:none}
.tin-tuc .from_the_blog_excerpt{color:var(--zmute);font-size:14px;line-height:1.7}
.tin-tuc .is-divider{display:block!important;background:var(--zo)!important;height:3px;width:40px;max-width:40px;margin:10px 0}
.tin-tuc .button.success.is-outline,.tin-tuc button{border:1.5px solid var(--zb)!important;color:var(--zb)!important;background:transparent!important;border-radius:6px;font-weight:700;text-transform:none}
.tin-tuc .button.success.is-outline:hover,.tin-tuc button:hover{background:var(--zb)!important;color:#fff!important}
.button.primary.is-outline.box-shadow-1.expand{border-radius:8px;border:1.5px solid var(--zb)!important;color:var(--zb)!important;font-weight:700;text-transform:none;box-shadow:none!important;max-width:240px;margin:24px auto 0;display:block}
.button.primary.is-outline.box-shadow-1.expand:hover{background:var(--zb)!important;color:#fff!important}
#row-264085476{padding:60px 0 20px;max-width:1280px;margin:0 auto}

/* Lý do chọn chúng tôi */
.section.clientes,#section_1196872709{background:var(--zbg)!important;padding:74px 0!important;margin-bottom:0!important}
.section.clientes,#section_1196872709{height:auto!important;min-height:0!important}
.cliente{display:flex;align-self:stretch;height:auto!important;min-height:0!important}
.cliente .col-inner{width:100%;background:#fff;border:1px solid var(--zline);border-radius:var(--zr);padding:22px!important;height:auto!important;min-height:0!important;max-height:none!important;display:flow-root;transition:transform .25s,box-shadow .25s}
.cliente .col-inner:hover{transform:translateY(-6px);box-shadow:var(--zshadow)}
.cliente .titulo h3{color:var(--zb)!important;font-size:17px;font-weight:800;margin:0 0 12px;position:relative;padding-left:14px}
.cliente .titulo h3:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:3px;background:var(--zo)}
.cliente .img-inner{border-radius:10px;overflow:hidden}
.cliente p,.cliente div{color:var(--zmute);line-height:1.7;font-size:14.5px}

/* Khối liên hệ cuối trang chủ */
#section_863668222{background:linear-gradient(135deg,#0b3d62 0%,#125988 60%,#1b6fa5 100%)!important;padding:70px 0!important}
#section_863668222 h4{color:#fff!important;font-weight:800;letter-spacing:.5px;text-transform:uppercase;font-size:15px;border-left:4px solid var(--zo);padding-left:12px;margin-bottom:18px}
#section_863668222,#section_863668222 p,#section_863668222 li,#section_863668222 a{color:#dbe7f2}
#section_863668222 a:hover{color:var(--zo)!important}
#section_863668222 strong{color:#fff}
#section_863668222 ul{list-style:none;margin-left:0}
#section_863668222 .chat-message{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--zr);padding:22px}

/* ---------- Nút chung ---------- */
.button.primary:not(.is-outline):not(.is-link){background:var(--zb)!important;border-radius:8px;font-weight:700;text-transform:none}
.button.primary:not(.is-outline):not(.is-link):hover{background:var(--zbd)!important}
.button.white{border-radius:8px;font-weight:700;color:var(--zbd)!important}

/* ---------- Trang trong (breadcrumb, danh sách, chi tiết) ---------- */
.page-title,.page-title-inner{background:var(--zbg)!important}
.breadcrumbs,.woocommerce-breadcrumb{font-size:13px;color:var(--zmute)}
.breadcrumbs a{color:var(--zb)}
.page-wrapper,#content.content-area{background:#fff}
.entry-title,.page-title h1,h1.entry-title{font-weight:800;color:var(--zink);line-height:1.3}
.entry-content p,.entry-content li{line-height:1.8;color:#334155;font-size:15.5px}
.entry-content h2,.entry-content h3{color:var(--zbd);font-weight:800}
.entry-content img{border-radius:10px}
.entry-content table{border-collapse:collapse;border-radius:10px;overflow:hidden;border:1px solid var(--zline)}
.entry-content table td,.entry-content table th{border:1px solid var(--zline);padding:10px 12px}
.entry-content table th,.entry-content table tr:first-child td{background:var(--zbg)}
.box.box-blog-post,.product-small .box,.box-category .box{border-radius:var(--zr)}
.product-small.box{border:1px solid var(--zline);border-radius:var(--zr);overflow:hidden;background:#fff;transition:transform .25s,box-shadow .25s}
.product-small.box:hover{transform:translateY(-5px);box-shadow:var(--zshadow)}
.product-title a,.name.product-title a{color:var(--zink)!important;font-weight:700}
.product-title a:hover{color:var(--zb)!important}
.price,.amount{color:var(--zo);font-weight:800}
.widget-title,.widget>span.widget-title,.is-uppercase.widget-title{color:var(--zbd);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.5px}
.widget ul li a{color:var(--zmute)}
.widget ul li a:hover,.widget ul li.current-cat>a{color:var(--zb)}
.is-divider{background:var(--zo)!important}
.pagination,.page-numbers{margin-top:20px}
.page-numbers .current,.page-numbers li span.current{background:var(--zb)!important;border-color:var(--zb)!important;color:#fff!important}
.page-numbers a:hover{border-color:var(--zb);color:var(--zb)}
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],textarea,select{border:1px solid #cbd5e1;border-radius:8px;box-shadow:none;background:#fff;color:var(--zink)}
input:focus,textarea:focus,select:focus{border-color:var(--zb)!important;box-shadow:0 0 0 3px rgba(18,89,136,.12)!important}
label{color:var(--zink)}

/* ---------- Footer ---------- */
#footer.zen-footer,.zen-footer{background:#0a2f4d;color:#cbd9e6;margin:0;padding:0}
.zen-footer a{color:#cbd9e6}
.zen-footer a:hover{color:var(--zo)}
.zen-footer-main{max-width:1280px;margin:0 auto;padding:64px 20px 36px;display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.5fr;gap:44px}
.zen-footer-brand img{max-height:70px;width:auto;background:#fff;border-radius:10px;padding:8px 12px;margin-bottom:16px}
.zen-footer-brand .zen-name{font-weight:800;color:#fff;font-size:15px;line-height:1.5;text-transform:uppercase;letter-spacing:.3px}
.zen-footer-brand p{font-size:14px;line-height:1.8;margin:12px 0 0;color:#a9bed1}
.zen-footer h4{color:#fff;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin:0 0 20px;position:relative;padding-bottom:12px}
.zen-footer h4:after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:var(--zo)}
.zen-footer ul{list-style:none;margin:0;padding:0}
.zen-footer li{margin:0 0 11px;font-size:14px;line-height:1.6}
.zen-footer li i{color:var(--zo);margin-right:8px}
.zen-contact li{display:flex;gap:10px}
.zen-contact li span:first-child{color:var(--zo);font-weight:700;min-width:60px}
.zen-social{display:flex;gap:10px;margin-top:20px}
.zen-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff!important;letter-spacing:0}
.zen-social a:hover{background:var(--zo);transform:translateY(-3px)}
.zen-footer-bottom{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:18px 20px;font-size:13px;color:#8aa3b8;text-transform:none;margin:0;background:transparent}

/* ---------- Nút gọi nhanh nổi (mobile) ---------- */
.zen-callbar{display:none}

/* ---------- Mobile ---------- */
@media (max-width:849px){
  .header-main{height:64px!important}
  #logo img{max-height:46px!important}
  .zen-footer-main{grid-template-columns:1fr 1fr;gap:32px;padding:48px 20px 28px}
  #section_1830970943,#section_1196872709,#section_1200627607,#section_863668222{padding:48px 0!important}
  #slider-1348981655{margin:10px 10px 0;border-radius:12px;max-width:calc(100% - 20px)}
  .col-dich-vu-noi-bat h5{min-height:0}
}
@media (max-width:549px){
  .zen-footer-main{grid-template-columns:1fr}
  .zen-callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99;background:#fff;border-top:1px solid var(--zline);box-shadow:0 -6px 20px -10px rgba(15,23,42,.25)}
  .zen-callbar a{flex:1;text-align:center;padding:12px 4px;font-size:13px;font-weight:700;color:var(--zbd)}
  .zen-callbar a+a{border-left:1px solid var(--zline)}
  .zen-callbar a.zen-call{background:var(--zo);color:#fff}
  body{padding-bottom:46px}
}