/* ═══════════════════════════════════════════════════════
   VINAPRO B2B — HOMEPAGE CSS
   Palette: Navy #0D2B5B + Orange #F57C00
   ═══════════════════════════════════════════════════════ */

:root {
    --hp-nv:  #0D2B5B;
    --hp-nv2: #1A3F7A;
    --hp-or:  #F57C00;
    --hp-or2: #E65100;
    --hp-bd:  #e0e6ef;
    --hp-bg:  #f8f9fa;
    --hp-tx:  #1a1a2e;
    --hp-mu:  #526070;
    --hp-r:   8px;
    --hp-t:   0.2s ease;
}

/* ── HERO ──────────────────────────────────────────────── */
.hp-hero {
    background: linear-gradient(105deg,#071C3E 0%,#0D2B5B 45%,#163670 100%);
    padding: 48px 0;
    position: relative;
    overflow: hidden;
}
.hp-hero__bg-glow {
    position: absolute; top: -40px; right: 20%;
    width: 300px; height: 300px;
    background: radial-gradient(circle,rgba(245,124,0,.18) 0%,transparent 70%);
    pointer-events: none;
}
.hp-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hp-hero__kicker {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(245,124,0,.15);
    border: 1px solid rgba(245,124,0,.32);
    color: #FFB74D; border-radius: 999px;
    padding: 4px 12px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .8px; margin-bottom: 14px;
}
.hp-hero__kicker-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--hp-or); display: inline-block; flex-shrink: 0;
}
.hp-hero__title {
    font-size: 2.4rem; font-weight: 900; color: #fff;
    line-height: 1.05; margin-bottom: 10px;
}
.hp-hero__title-em { color: var(--hp-or); font-style: italic; display: block; }
.hp-hero__bullets {
    display: flex; gap: 18px; color: rgba(255,255,255,.72);
    font-size: 13.5px; margin-bottom: 24px; flex-wrap: wrap;
}
.hp-hero__bullets span::before { content: '✓ '; color: #66BB6A; font-weight: 700; }
.hp-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.hp-btn-primary {
    background: var(--hp-or); color: #fff !important;
    padding: 12px 22px; border-radius: var(--hp-r);
    font-weight: 700; font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 7px;
    border: none; cursor: pointer; text-decoration: none;
    transition: all var(--hp-t);
}
.hp-btn-primary:hover { background: var(--hp-or2); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(245,124,0,.38); }
.hp-btn-secondary {
    background: rgba(255,255,255,.10); color: #fff;
    border: 2px solid rgba(255,255,255,.40);
    padding: 12px 22px; border-radius: var(--hp-r);
    font-weight: 600; font-size: 13.5px; cursor: pointer;
    transition: all var(--hp-t); font-family: inherit;
}
.hp-btn-secondary:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.75); }
.hp-hero__stats {
    display: flex; gap: 24px; flex-wrap: wrap;
    padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13);
}
.hp-hero__stat strong { display: block; font-size: 1.7rem; font-weight: 900; color: var(--hp-or); line-height: 1; }
.hp-hero__stat span { display: block; font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.hp-hero__visual { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.hp-hero__visual:empty { display: none; }
.hp-hero__visual img { width: 100%; max-width: 460px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); object-fit: cover; }

/* ── CATEGORY STRIP ────────────────────────────────────── */
.hp-cat-strip { background: #fff; border-top: 3px solid var(--hp-or); box-shadow: 0 2px 8px rgba(13,43,91,.07); }
.hp-cat-strip .container.wraper { padding: 0 16px; }
.hp-cat-strip .category-container { margin: 0; }
.hp-cat-strip .category-container .row {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; scrollbar-width: none; gap: 0; margin: 0;
}
.hp-cat-strip .category-container .row::-webkit-scrollbar { display: none; }
.hp-cat-strip .category-container [class*="col-"] {
    flex: 1 0 130px !important; max-width: none !important;
    width: auto !important; padding: 0 !important;
    border-right: 1px solid #eef2f7;
}
.hp-cat-strip .category-container [class*="col-"]:last-child { border-right: none; }
.hp-cat-strip .category-box {
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 12px 12px; gap: 7px; cursor: pointer;
    transition: background var(--hp-t); text-align: center;
}
.hp-cat-strip .category-box:hover { background: rgba(245,124,0,.04); }
.hp-cat-strip .category-box img {
    width: 56px !important; height: 56px !important;
    object-fit: contain; transition: transform .28s;
}
.hp-cat-strip .category-box:hover img { transform: scale(1.07) translateY(-2px); }
.hp-cat-strip .category-name { font-size: 12.5px; font-weight: 600; color: var(--hp-tx); line-height: 1.3; margin: 0; }
.hp-cat-strip .category-box:hover .category-name,
.hp-cat-strip .category-box:hover .category-name a { color: var(--hp-or); }
.hp-cat-strip .category-name a { color: inherit; text-decoration: none; }

/* ── BRANDS SECTION ────────────────────────────────────── */
.hp-brands-sec { background: var(--hp-bg); padding: 28px 0; border-bottom: 1px solid #eef2f7; }
.hp-brands-layout { display: grid; grid-template-columns: 1fr 290px; gap: 24px; align-items: center; }
.hp-brands-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hp-section-title { font-weight: 800; font-size: 1.3rem; color: var(--hp-nv); position: relative; padding-bottom: 8px; }
.hp-section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 32px; height: 3px; background: var(--hp-or); border-radius: 2px; }
.hp-view-all { font-size: 12.5px; font-weight: 600; color: var(--hp-or); text-decoration: none; }
.hp-view-all:hover { color: var(--hp-or2); }
.hp-brands-main .block_doitac,
.hp-brands-main > div { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.hp-brands-main img { height: 36px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: .55; transition: all .22s; }
.hp-brands-main img:hover { filter: none; opacity: 1; }
.hp-bulk-cta { background: var(--hp-nv); border-radius: 12px; padding: 20px; cursor: pointer; transition: transform var(--hp-t),box-shadow var(--hp-t); position: relative; overflow: hidden; }
.hp-bulk-cta__bg { position: absolute; top: -25px; right: -25px; width: 95px; height: 95px; background: rgba(245,124,0,.17); border-radius: 50%; pointer-events: none; }
.hp-bulk-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,43,91,.28); }
.hp-bulk-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; }
.hp-bulk-cta__icon { font-size: 1.7rem; color: var(--hp-or); }
.hp-bulk-cta__title { font-size: 1.05rem; font-weight: 800; color: #fff; line-height: 1.2; }
.hp-bulk-cta__sub { font-size: 11.5px; color: rgba(255,255,255,.55); }
.hp-btn-bulk { background: #fff; color: var(--hp-nv); padding: 9px 16px; border-radius: var(--hp-r); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; width: fit-content; border: none; cursor: pointer; transition: all var(--hp-t); font-family: inherit; }
.hp-btn-bulk:hover { background: var(--hp-or); color: #fff; }

/* ── FEATURED PRODUCTS ─────────────────────────────────── */
.hp-featured-sec { padding: 36px 0; background: #fff; }
.hp-featured-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.hp-tabs { display: flex; gap: 3px; background: #f0f4f8; border-radius: 999px; padding: 4px; }
.hp-tab { padding: 6px 16px; border: none; background: none; font-size: 12.5px; font-weight: 600; color: var(--hp-mu); cursor: pointer; border-radius: 999px; transition: all .18s; white-space: nowrap; font-family: inherit; }
.hp-tab--active, .hp-tab.active { background: #fff; color: var(--hp-nv); box-shadow: 0 1px 4px rgba(0,0,0,.09); }
.hp-nav-arrows { display: flex; gap: 4px; margin-left: auto; }
.hp-arrow-btn { width: 30px; height: 30px; border: 1.5px solid var(--hp-bd); background: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--hp-mu); transition: all .15s; font-family: inherit; }
.hp-arrow-btn:hover { border-color: var(--hp-nv); color: var(--hp-nv); }

/* shops wrap trên homepage */
.hp-shops-wrap { width: 100%; }
.hp-shops-wrap .sort-cate { display: none; }
.hp-shops-wrap .shops-main-page { margin: 0; }

/* 5 cột product grid */
.hp-shops-wrap #showContent .row,
.hp-shops-wrap .row.row-fix,
.hp-shops-wrap .row-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(5,1fr) !important;
    gap: 14px !important;
    margin: 0 !important;
}
.hp-shops-wrap .col,
.hp-shops-wrap .col-xl-20,
.hp-shops-wrap [class*="col-"] { width: auto !important; padding: 0 !important; max-width: none !important; flex: none !important; }

.hp-shops-wrap .b2b-product-card { border-radius: 11px; }
.hp-shops-wrap .b2b-product-card:hover { box-shadow: 0 4px 18px rgba(13,43,91,.12); transform: translateY(-2px); border-color: var(--hp-or); }

.hp-featured-more { text-align: center; margin-top: 24px; }
.hp-btn-more { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; border: 2px solid var(--hp-nv); color: var(--hp-nv); border-radius: var(--hp-r); font-weight: 700; font-size: 13.5px; text-decoration: none; transition: all var(--hp-t); }
.hp-btn-more:hover { background: var(--hp-nv); color: #fff; }

/* ── POLICY + NEWS + SEO ───────────────────────────────── */
.hp-policy-bar { background: var(--hp-bg); border-top: 1px solid var(--hp-bd); border-bottom: 1px solid var(--hp-bd); padding: 20px 0; }
.hp-news-sec { padding: 36px 0; background: #fff; }
.hp-news-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.hp-news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hp-seo-block { background: var(--hp-bg); padding: 32px 0; border-top: 1px solid var(--hp-bd); }
.hp-seo-block .rte, .hp-seo-block .bodytext { font-size: 14px; color: var(--hp-mu); line-height: 1.75; }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width:1280px) {
    .hp-shops-wrap #showContent .row,
    .hp-shops-wrap .row.row-fix,
    .hp-shops-wrap .row-cols-2 { grid-template-columns: repeat(4,1fr) !important; }
}
@media (max-width:1024px) {
    .hp-brands-layout { grid-template-columns: 1fr; }
    .hp-bulk-cta { display: none; }
    .hp-shops-wrap #showContent .row,
    .hp-shops-wrap .row.row-fix,
    .hp-shops-wrap .row-cols-2 { grid-template-columns: repeat(3,1fr) !important; }
    .hp-news-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:768px) {
    .hp-hero__inner { grid-template-columns: 1fr; }
    .hp-hero__visual { display: none; }
    .hp-hero__title { font-size: 1.8rem; }
    .hp-shops-wrap #showContent .row,
    .hp-shops-wrap .row.row-fix,
    .hp-shops-wrap .row-cols-2 { grid-template-columns: repeat(2,1fr) !important; }
    .hp-news-grid { grid-template-columns: 1fr; }
}