/* ============================================================
   HPTECH BLOG / MODERN INDUSTRIAL
   Tự chứa trong page, không sửa CSS của theme cũ.
============================================================ */
.hp-blog-page{
    --blog-navy:#103451;
    --blog-navy-dark:#08283f;
    --blog-navy-soft:#173f5f;
    --blog-yellow:#ffbd00;
    --blog-yellow-dark:#a97700;
    --blog-bg:#f4f7fa;
    --blog-card:#ffffff;
    --blog-line:#dce6ed;
    --blog-text:#173650;
    --blog-muted:#7a91a3;

    width:100%;
    margin:0;
    padding:0 0 70px;
    background:
        radial-gradient(circle at 88% 7%,rgba(255,189,0,.06),transparent 24%),
        linear-gradient(180deg,#f8fafc 0%,#f3f7f9 100%);
    color:var(--blog-text);
    font-family:Arial,Helvetica,sans-serif;
}
.hp-blog-page i[class*="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal;
}
.hp-blog-page,
.hp-blog-page *{
    font-family:'Nunito', sans-serif !important;
}
.hp-blog-page,
.hp-blog-page *{
    box-sizing:border-box;
}

.hp-blog-page a{
    text-decoration:none;
}

.hp-blog-shell{
    width:min(1400px,calc(100% - 70px));
    margin:0 auto;
}

.hp-blog-inner{
    width:min(1180px,100%);
    margin:0 auto;
}

/* ============================================================
   HERO
============================================================ */
.hp-blog-hero{
    position:relative;
    overflow:hidden;
    width:100%;
    min-height:330px;
    display:flex;
    align-items:center;
    background:
        radial-gradient(circle at 83% 20%,rgba(255,189,0,.13),transparent 23%),
        radial-gradient(circle at 72% 85%,rgba(91,170,195,.10),transparent 25%),
        linear-gradient(115deg,#061f33 0%,#0b3049 48%,#103451 100%);
    color:#fff;
}

.hp-blog-hero::before,
.hp-blog-hero::after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,189,0,.10);
    pointer-events:none;
}

.hp-blog-hero::before{
    width:500px;
    height:500px;
    right:-180px;
    top:-350px;
}

.hp-blog-hero::after{
    width:350px;
    height:350px;
    right:15px;
    bottom:-275px;
    border-color:rgba(255,255,255,.08);
}

.hp-blog-hero-grid{
    position:absolute;
    inset:0;
    opacity:.24;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.82),transparent 82%);
    mask-image:linear-gradient(to right,rgba(0,0,0,.82),transparent 82%);
}

.hp-blog-hero-content{
    position:relative;
    z-index:2;
    width:min(1400px,calc(100% - 70px));
    margin:0 auto;
    padding:58px 0 52px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
}

.hp-blog-hero-copy{
    max-width:820px;
}

.hp-blog-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    color:var(--blog-yellow);
    font-size:12px;
    font-weight:900;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.hp-blog-eyebrow span{
    width:32px;
    height:2px;
    background:var(--blog-yellow);
}

.hp-blog-eyebrow b{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--blog-yellow);
    box-shadow:0 0 0 5px rgba(255,189,0,.09);
}

.hp-blog-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(39px,4.4vw,62px);
    line-height:1.03;
    font-weight:900;
    letter-spacing:-1.8px;
}

.hp-blog-hero h1 strong{
    display:block;
    color:var(--blog-yellow);
    font-weight:900;
}

.hp-blog-hero-copy > p{
    max-width:760px;
    margin:17px 0 0;
    color:rgba(255,255,255,.69);
    font-size:15px;
    line-height:1.75;
}

.hp-blog-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:19px;
}

.hp-blog-tags span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:33px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:7px;
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.84);
    font-size:11px;
    font-weight:900;
    letter-spacing:.4px;
}

.hp-blog-tags b{
    color:var(--blog-yellow);
}

.hp-blog-hero-meta{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:18px;
    padding-bottom:5px;
}

.hp-blog-hero-meta-item{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.hp-blog-hero-meta-item strong{
    color:#fff;
    font-size:24px;
    line-height:1;
    font-weight:900;
}

.hp-blog-hero-meta-item span{
    color:rgba(255,255,255,.42);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.hp-blog-hero-meta > i{
    width:1px;
    height:38px;
    background:rgba(255,255,255,.16);
}

/* ============================================================
   MAIN
============================================================ */
.hp-blog-main{
    padding-top:32px;
}

/* ============================================================
   FEATURED
============================================================ */
.hp-blog-feature{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(300px,.9fr);
    gap:20px;
    margin-bottom:20px;
}

.hp-blog-feature-card,
.hp-blog-side-card,
.hp-blog-card,
.hp-blog-knowledge{
    border:1px solid var(--blog-line);
    border-radius:14px;
    background:var(--blog-card);
    box-shadow:0 10px 30px rgba(16,52,81,.055);
}

.hp-blog-feature-card{
    overflow:hidden;
    min-width:0;
}

.hp-blog-feature-media{
    position:relative;
    display:block;
    overflow:hidden;
    min-height:330px;
    background:#e9f0f4;
}

.hp-blog-feature-media img{
    display:block;
    width:100%;
    height:100%;
    min-height:330px;
    object-fit:cover;
    transition:transform .5s ease;
}

.hp-blog-feature-card:hover .hp-blog-feature-media img{
    transform:scale(1.035);
}

.hp-blog-date{
    position:absolute;
    left:17px;
    bottom:17px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:30px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:7px;
    background:rgba(8,40,63,.9);
    color:#fff;
    font-size:11px;
    font-weight:900;
    backdrop-filter:blur(8px);
}

.hp-blog-date i{
    color:var(--blog-yellow);
}

.hp-blog-feature-body{
    padding:22px 24px 24px;
}

.hp-blog-mini-label{
    margin-bottom:8px;
    color:var(--blog-yellow-dark);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.7px;
    text-transform:uppercase;
}

.hp-blog-feature-title{
    display:block;
    margin:0 0 10px;
    color:var(--blog-navy);
    font-size:27px;
    line-height:1.22;
    font-weight:900;
}

.hp-blog-feature-title:hover{
    color:var(--blog-yellow-dark);
}

.hp-blog-feature-summary{
    color:var(--blog-muted);
    font-size:14px;
    line-height:1.75;
}

.hp-blog-feature-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid #e9eff3;
}

.hp-blog-reading{
    color:#8498a7;
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.hp-blog-read{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--blog-navy);
    font-size:12px;
    font-weight:900;
}

.hp-blog-read i{
    color:var(--blog-yellow-dark);
}

.hp-blog-side-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.hp-blog-side-card{
    padding:20px;
}

.hp-blog-side-head{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid #e6edf1;
}

.hp-blog-side-icon{
    width:39px;
    height:39px;
    flex:0 0 39px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--blog-navy);
    color:var(--blog-yellow);
}

.hp-blog-side-head small,
.hp-blog-section-label,
.hp-blog-knowledge-head small{
    display:block;
    margin-bottom:4px;
    color:var(--blog-yellow-dark);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.hp-blog-side-head strong,
.hp-blog-knowledge-head strong{
    display:block;
    color:var(--blog-navy);
    font-size:16px;
    font-weight:900;
}

.hp-blog-side-list{
    display:flex;
    flex-direction:column;
}

.hp-blog-side-item{
    display:grid;
    grid-template-columns:28px 1fr 14px;
    align-items:center;
    gap:8px;
    min-height:47px;
    border-bottom:1px solid #e9eef2;
    color:#516b7d;
}

.hp-blog-side-item:last-child{
    border-bottom:0;
}

.hp-blog-side-num{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:#eef4f7;
    color:#8f6a00;
    font-size:10px;
    font-weight:900;
}

.hp-blog-side-title{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:12px;
    font-weight:800;
}

.hp-blog-side-item > b{
    color:#aebbc4;
    font-size:13px;
}

.hp-blog-support p{
    margin:0 0 13px;
    color:var(--blog-muted);
    font-size:13px;
    line-height:1.7;
}

.hp-blog-support-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-top:11px;
    border-top:1px solid #e9eef2;
    color:var(--blog-navy);
    font-size:12px;
    font-weight:900;
}

.hp-blog-support-link b{
    color:var(--blog-yellow-dark);
}

/* ============================================================
   ARTICLE GRID
============================================================ */
.hp-blog-list-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin:0 0 16px;
}

.hp-blog-section-label{
    margin-bottom:5px;
}

.hp-blog-list-head h2{
    margin:0;
    color:var(--blog-navy);
    font-size:24px;
    line-height:1.2;
    font-weight:900;
}

.hp-blog-list-note{
    color:#8297a6;
    font-size:12px;
    font-weight:800;
}

.hp-blog-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.hp-blog-card{
    overflow:hidden;
    min-width:0;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.hp-blog-card:hover{
    transform:translateY(-5px);
    border-color:#cadbe4;
    box-shadow:0 18px 38px rgba(16,52,81,.10);
}

.hp-blog-card-media{
    position:relative;
    display:block;
    overflow:hidden;
    background:#edf3f6;
}

.hp-blog-card-media img{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:transform .5s ease;
}

.hp-blog-card:hover .hp-blog-card-media img{
    transform:scale(1.04);
}

.hp-blog-card-body{
    display:flex;
    flex-direction:column;
    min-height:235px;
    padding:18px 19px 18px;
}

.hp-blog-card-title{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    min-height:49px;
    margin:0 0 9px;
    color:var(--blog-navy);
    font-size:17px;
    line-height:1.4;
    font-weight:900;
}

.hp-blog-card-title:hover{
    color:var(--blog-yellow-dark);
}

.hp-blog-card-summary{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    min-height:61px;
    margin:0 0 16px;
    color:var(--blog-muted);
    font-size:13px;
    line-height:1.75;
}

.hp-blog-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
    padding-top:13px;
    border-top:1px solid #e9eef2;
}

.hp-blog-card-footer span{
    color:#9aadb9;
    font-size:10px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.hp-blog-card-footer a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--blog-navy);
    font-size:12px;
    font-weight:900;
}

.hp-blog-card-footer a i{
    color:var(--blog-yellow-dark);
}

/* ============================================================
   PAGINATION
============================================================ */
.hp-blog-pagination{
    display:flex;
    justify-content:center;
    margin:28px 0 40px;
}

.hp-blog-pagination .pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
    padding:0;
}

.hp-blog-pagination .pagination > li{
    list-style:none;
}

.hp-blog-pagination .pagination > li > a,
.hp-blog-pagination .pagination > li > span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 11px;
    border:1px solid var(--blog-line);
    border-radius:8px;
    background:#fff;
    color:var(--blog-navy);
    font-size:12px;
    font-weight:900;
    box-shadow:0 3px 10px rgba(16,52,81,.035);
    transition:.18s ease;
}

.hp-blog-pagination .pagination > li > a:hover{
    border-color:var(--blog-yellow);
    background:#fff9e8;
    color:var(--blog-yellow-dark);
}

.hp-blog-pagination .pagination > .active > a,
.hp-blog-pagination .pagination > .active > span{
    border-color:var(--blog-navy);
    background:var(--blog-navy);
    color:#fff;
}

.hp-blog-pagination .pagination > .disabled > a,
.hp-blog-pagination .pagination > .disabled > span{
    opacity:.45;
}

/* ============================================================
   CTA
============================================================ */
.hp-blog-cta{
    position:relative;
    overflow:hidden;
    margin-top:4px;
    background:
        radial-gradient(circle at 88% 35%,rgba(255,189,0,.13),transparent 23%),
        linear-gradient(115deg,#061f33,#103451 60%,#174566);
    color:#fff;
}

.hp-blog-cta::before,
.hp-blog-cta::after{
    content:"";
    position:absolute;
    border:1px solid rgba(255,189,0,.10);
    border-radius:50%;
    pointer-events:none;
}

.hp-blog-cta::before{
    width:320px;
    height:320px;
    right:-90px;
    top:-230px;
}

.hp-blog-cta::after{
    width:460px;
    height:460px;
    right:-220px;
    top:-300px;
    border-color:rgba(255,255,255,.07);
}

.hp-blog-cta-inner{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    padding:34px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.hp-blog-cta-label{
    color:var(--blog-yellow);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.7px;
    text-transform:uppercase;
    margin-bottom:6px;
}

.hp-blog-cta h2{
    margin:0 0 6px;
    color:#fff;
    font-size:22px;
    font-weight:900;
}

.hp-blog-cta p{
    margin:0;
    color:rgba(255,255,255,.62);
    font-size:13px;
}

.hp-blog-cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 20px;
    border-radius:8px;
    background:var(--blog-yellow);
    color:#103451 !important;
    font-size:12px;
    font-weight:900;
    letter-spacing:.4px;
    white-space:nowrap;
    box-shadow:0 10px 25px rgba(255,189,0,.18);
    transition:.18s ease;
}

.hp-blog-cta-button:hover{
    transform:translateY(-2px);
    background:#ffc72f;
}

/* ============================================================
   EMPTY
============================================================ */
.hp-blog-empty{
    grid-column:1/-1;
    padding:55px 20px;
    border:1px dashed #cbd9e1;
    border-radius:14px;
    background:#fff;
    text-align:center;
    color:var(--blog-muted);
    font-size:14px;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1199px){
    .hp-blog-shell,
    .hp-blog-hero-content{
        width:calc(100% - 45px);
    }

    .hp-blog-feature{
        grid-template-columns:minmax(0,1.4fr) minmax(290px,.85fr);
    }
}

@media (max-width:991px){
    .hp-blog-shell,
    .hp-blog-hero-content{
        width:calc(100% - 24px);
    }

    .hp-blog-hero-content{
        display:block;
        padding:48px 0 40px;
    }

    .hp-blog-hero-meta{
        margin-top:24px;
    }

    .hp-blog-feature{
        grid-template-columns:1fr;
    }

    .hp-blog-feature-media,
    .hp-blog-feature-media img{
        min-height:280px;
    }

    .hp-blog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:640px){
    .hp-blog-shell,
    .hp-blog-hero-content,
    .hp-blog-cta-inner{
        width:calc(100% - 18px);
    }

    .hp-blog-hero-content{
        padding:40px 0 34px;
    }

    .hp-blog-hero h1{
        font-size:32px;
        letter-spacing:-.8px;
    }

    .hp-blog-hero-copy > p{
        font-size:14px;
    }

    .hp-blog-tags span{
        min-height:29px;
        font-size:10px;
        padding:6px 8px;
    }

    .hp-blog-hero-meta{
        gap:11px;
    }

    .hp-blog-hero-meta-item strong{
        font-size:18px;
    }

    .hp-blog-hero-meta-item span{
        font-size:6.5px;
    }

    .hp-blog-feature-media,
    .hp-blog-feature-media img{
        min-height:210px;
    }

    .hp-blog-feature-body{
        padding:18px;
    }

    .hp-blog-feature-title{
        font-size:21px;
    }

    .hp-blog-grid{
        grid-template-columns:1fr;
    }

    .hp-blog-list-head{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .hp-blog-cta-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .hp-blog-cta-button{
        width:100%;
    }
}

@media (max-width:420px){
    .hp-blog-hero h1{
        font-size:28px;
    }

    .hp-blog-card-body{
        min-height:210px;
    }
}