/*
Theme Name: MatBaoWS
Description: This is a child theme for Flatsome Theme
Author: MatBaoWS Team
Template: flatsome
Version: 3.0.1
*/
/*************** ADD CUSTOM CSS HERE.   ***************/

/* ==========================================================================
   HERO SECTION - anh phu TRON man hinh dau tien (100vh),
   navbar float trong suot de len tren, co overlay mo tu top xuong giua
   ========================================================================== */
:root {
    --ptp-adminbar-h: 0px;
    /* Dai trong o dinh hero (hien mau nen #0166B4), nam duoi top-bar */
    --ptp-hero-pt: 1.5rem;
}

body.admin-bar {
    --ptp-adminbar-h: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --ptp-adminbar-h: 46px;
    }
}

/* --------------------------------------------------------------------------
   1. NAVBAR FLOAT: header thoat khoi flow -> hero chiem luon cho cua navbar.
      position:absolute (khong set top/left) = giu nguyen vi tri tinh cua no,
      nen KHONG pha vo sticky cua Flatsome (.stuck van position:fixed).
   -------------------------------------------------------------------------- */
body.home #header {
    position: absolute !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 1001 !important;
}

/* Trong suot khi CHUA cuon. Khi cuon xuong, .stuck khong dinh toi rule nay
   nen header tu dong tra ve mau xanh dac nhu cu -> chu van doc duoc. */
body.home #header .header-wrapper:not(.stuck),
body.home #header .header-wrapper:not(.stuck) .header-bg-container,
body.home #header .header-wrapper:not(.stuck) .header-bg-color,
body.home #header .header-wrapper:not(.stuck) .header-bg-image,
body.home #header .header-wrapper:not(.stuck) #top-bar,
body.home #header .header-wrapper:not(.stuck) #masthead,
body.home #header .header-wrapper:not(.stuck) .header-main,
body.home #header .header-wrapper:not(.stuck) .header-bottom {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* An mang trang xeo sau logo de nhin thay tron ven anh hero */
body.home #header .header-wrapper:not(.stuck) #logo::before {
    display: none !important;
}

/* Vach ngan mo giua top-bar va menu chinh */
body.home #header .header-wrapper:not(.stuck) #top-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body.home #header .header-wrapper:not(.stuck) .top-divider {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* --------------------------------------------------------------------------
   2. HERO: cao tron 1 man hinh, anh zoom phu kin (cover)
   -------------------------------------------------------------------------- */
body.home #main,
body.home #content.content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.ptp-hero-section,
section:has(#row-1973973923) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: var(--ptp-hero-pt) 0 0 0 !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
    height: calc(100vh - var(--ptp-adminbar-h)) !important;
    min-height: 480px !important;
    background-color: #0166B4 !important;
}

/* 100svh: tren mobile khong bi thanh dia chi cua trinh duyet an mat 1 phan */
@supports (height: 100svh) {

    .ptp-hero-section,
    section:has(#row-1973973923) {
        height: calc(100svh - var(--ptp-adminbar-h)) !important;
    }
}

/* Khoi noi dung phu kin section -> triet tieu moi khoang trang do canh giua / flow.
   LUU Y: containing block cua phan tu absolute la PADDING BOX cua section, nen
   inset:0 se BO QUA padding-top -> phai set top = var(--ptp-hero-pt) thu cong,
   neu khong padding-top cua section se khong co tac dung gi ve mat hinh anh. */
.ptp-hero-section .section-content {
    position: absolute !important;
    top: var(--ptp-hero-pt) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.ptp-hero-section .section-content > p {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* object-fit: cover -> anh zoom len phu kin khung, khong bao gio ho vien.
   Da tra object-position ve center: viec "keo anh xuong" gio do padding-top
   1.5rem cua section lo, khong con can hack calc(50% + 20px) nua (neu giu ca
   hai thi tren ti le ~16:9 se lai ho mot dai trong long khung anh). */
.ptp-hero-section .hero-banner-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.ptp-hero-section .section-bg,
.ptp-hero-section .section-bg-overlay {
    display: none !important;
}

.ptp-hero-section .section-bg-overlay,
section:has(#row-1973973923) .section-bg-overlay {
    display: none !important;
}

/* Center and broaden the text column */
.ptp-hero-section .row:first-of-type .col,
#row-1973973923>.col {
    max-width: 900px !important;
    width: 100% !important;
    flex: 0 0 100% !important;
}

.ptp-hero-section .row:first-of-type .col .col-inner,
#row-1973973923 .col-inner {
    text-align: center !important;
}

/* Badge (Pill style) styling */
.ptp-hero-section .row:first-of-type .text p:first-child,
#row-1973973923 .text p:first-of-type {
    display: none !important;
}

/* Main Heading: Hidden */
.ptp-hero-section .row:first-of-type .text h1,
#row-1973973923 h1 {
    display: none !important;
}

/* Description paragraph: Hidden */
.ptp-hero-section .row:first-of-type .text p:nth-of-type(2),
#row-1973973923 .text p:nth-of-type(2) {
    display: none !important;
}

/* Buttons: Hidden */
.ptp-hero-section .row:first-of-type .button,
#row-1973973923 .button {
    display: none !important;
}

/* Hide old stats row INSIDE Hero Section completely */
.ptp-hero-section #row-299688760,
.ptp-hero-section .ptp-stats-row,
section:has(#row-1973973923) #row-299688760,
section:has(#row-1973973923) .ptp-stats-row {
    display: none !important;
}

/* --- STATS SECTION (BOX NỔI VÒNG TRÒN NÉT ĐỨT PHÍA DƯỚI) --- */
/* padding-top 25px de bu dung phan margin-bottom cua .stats-wave-top da bi an,
   neu khong box stats se dinh sat day hero */
.stats-wrapper,
.ptp-standalone-stats-section {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important;
    padding: 25px 0 30px 0 !important;
    background: transparent !important;
}

/* Dai song SVG: da tat theo yeu cau */
.stats-wave-top {
    display: none !important;
}

.stats-container {
    max-width: 1440px !important;
    width: 96% !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 25px 40px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f0f4f8 !important;
}

.stat-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    text-align: left !important;
    flex: 1 1 0% !important;
    width: 25% !important;
}

/* Icon vòng tròn đường viền nét đứt nhẹ */
.stat-icon-wrapper {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    border: 2px dashed #0056b3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0056b3 !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background-color: rgba(0, 86, 179, 0.04) !important;
}

/* Tự động tạo Icon dự phòng bằng CSS (chỉ kích hoạt khi UX Builder làm mất thẻ i rỗng) */
.stats-container>*:nth-child(1) .stat-icon-wrapper:empty::before,
.stat-item:nth-of-type(1) .stat-icon-wrapper:empty::before {
    content: "\f0b1" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: #0056b3 !important;
}

.stats-container>*:nth-child(2) .stat-icon-wrapper:empty::before,
.stat-item:nth-of-type(2) .stat-icon-wrapper:empty::before {
    content: "\f0c0" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: #0056b3 !important;
}

.stats-container>*:nth-child(3) .stat-icon-wrapper:empty::before,
.stat-item:nth-of-type(3) .stat-icon-wrapper:empty::before {
    content: "\f1b2" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: #0056b3 !important;
}

.stats-container>*:nth-child(4) .stat-icon-wrapper:empty::before,
.stat-item:nth-of-type(4) .stat-icon-wrapper:empty::before {
    content: "\f559" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: #0056b3 !important;
}

.stat-icon-wrapper i {
    font-size: 20px !important;
    color: #0056b3 !important;
}

/* Chấm nhỏ trang trí trên viền icon */
.stat-icon-wrapper::after {
    content: '' !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #0056b3 !important;
    border-radius: 50% !important;
    bottom: 2px !important;
    right: 2px !important;
}

.stat-info {
    display: flex !important;
    flex-direction: column !important;
}

.stat-number {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0b2545 !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}

.stat-label {
    font-size: 12px !important;
    color: #666666 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
}

/* RESPONSIVE FOR STATS SECTION */
@media (max-width: 992px) {
    .stats-container {
        padding: 20px 15px !important;
        gap: 10px !important;
    }

    .stat-item {
        gap: 10px !important;
    }

    .stat-icon-wrapper {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    .stat-number {
        font-size: 17px !important;
    }

    .stat-label {
        font-size: 11px !important;
    }
}

@media (max-width: 576px) {
    .stats-container {
        flex-wrap: wrap !important;
        gap: 15px !important;
        padding: 15px !important;
    }

    .stat-item {
        flex: 0 0 48% !important;
        width: 48% !important;
    }
}

/* Responsive adjustments */
@media (max-width: 549px) {

    .ptp-hero-section .row:first-of-type .text h1,
    #row-1973973923 h1 {
        font-size: 36px !important;
    }

    .ptp-hero-section .row:first-of-type .text p:first-child,
    #row-1973973923 .text p:first-of-type {
        font-size: 11px !important;
        padding: 4px 15px !important;
    }
}

/* ==========================================================================
   Services Section 5 Product Icon Cards (ptp-services-section)
   ========================================================================== */
.ptp-services-section {
    padding: 50px 0 !important;
    background-color: #ffffff !important;
}

.ptp-services-5icons-container {
    max-width: 1440px !important;
    width: 96% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
}

.service-icon-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #eef4fc !important;
    box-shadow: 0 10px 30px rgba(0, 86, 179, 0.05) !important;
    padding: 30px 20px 25px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.service-icon-card:hover {
    transform: translateY(-8px) !important;
    border-color: #d0e2fc !important;
    box-shadow: none !important;
}

.service-icon-box {
    margin-bottom: 0.5rem !important;
    color: #0066cc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.service-icon-box i {
    font-size: 2rem !important;
}

.service-card-icon {
    font-size: 2rem !important;
    color: #0066cc !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.service-card-title {
    color: #0b2545 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

.service-card-desc {
    color: #667085 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
    flex-grow: 1 !important;
}

.service-card-link {
    color: #0066cc !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.service-card-link:hover {
    color: #004499 !important;
}

@media (max-width: 992px) {
    .ptp-services-5icons-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .ptp-services-5icons-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* ==========================================================================
   Custom Product Section (.product-section)
   ========================================================================== */
.product-section {
    background-color: #f4f7f9 !important;
    padding: 40px 20px !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    text-align: center !important;
}

/* Phần Tiêu đề - Thu nhỏ size chữ */
.product-section .section-header {
    margin-bottom: 30px !important;
}

.product-section .badge {
    display: inline-block !important;
    background-color: #e6f0fa !important;
    color: #0056b3 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.product-section .title {
    font-size: 26px !important;
    color: #0a2540 !important;
    margin: 0 0 8px 0 !important;
    font-weight: 700 !important;
}

.product-section .subtitle {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* Grid Layout - Thu nhỏ khoảng cách (gap) */
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Thẻ Sản phẩm - Thiết kế phẳng, bỏ bóng đổ, giảm padding */
.product-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: border-color 0.2s ease !important;
}

.product-card:hover {
    border-color: #0066cc !important;
}

/* Hình ảnh - Ép chiều cao thấp xuống */
.card-image {
    width: 100% !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.card-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Tiêu đề thẻ */
.card-title {
    font-size: 14px !important;
    color: #111827 !important;
    margin: 0 0 16px 0 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Nút Action Xem chi tiết */
.product-card .action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 14px !important;
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    margin-top: auto !important;
}

.product-card .action-btn i {
    font-size: 11px !important;
    transition: transform 0.2s ease !important;
}

.product-card .action-btn:hover {
    background-color: #0052a3 !important;
    color: #ffffff !important;
}

.product-card .action-btn:hover i {
    transform: translateX(3px) !important;
}

/* Responsive */
@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .product-card {
        padding: 12px 8px !important;
    }

    .card-image {
        height: 70px !important;
    }

    .card-title {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   Products Section (ptp-products-section)
   ========================================================================== */

.ptp-products-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: #ffffff !important;
}

/* 1. Header & Text elements styling */
.ptp-products-section .text p:first-of-type {
    display: inline-block !important;
    background-color: rgba(16, 68, 156, 0.08) !important;
    color: #0c3c96 !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
    line-height: 1.5 !important;
}

.ptp-products-section .text h2 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 15px !important;
}

.ptp-products-section .text p:nth-of-type(2) {
    font-size: 15px !important;
    color: #64748b !important;
    margin-bottom: 40px !important;
}

/* 2. Tabs Navigation styling (Pills/Buttons style) */
.ptp-products-section .nav {
    border: none !important;
    margin-bottom: 40px !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.ptp-products-section .nav>li {
    margin: 0 !important;
    padding: 0 !important;
}

.ptp-products-section .nav>li>a {
    background-color: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 30px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

/* Active Tab */
.ptp-products-section .nav>li.active>a {
    background-color: #0c3c96 !important;
    color: #ffffff !important;
    border-color: #0c3c96 !important;
    box-shadow: 0 4px 12px rgba(12, 60, 150, 0.2) !important;
}

/* Hover Tab */
.ptp-products-section .nav>li:not(.active)>a:hover {
    border-color: #0c3c96 !important;
    color: #0c3c96 !important;
    background-color: rgba(12, 60, 150, 0.02) !important;
}

/* 3. Product grid and cards styling */
.ptp-products-section .product-small.box {
    background-color: #ffffff !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.ptp-products-section .product-small.box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}

/* Rounded top corners for product images */
.ptp-products-section .product-small.box .box-image {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    overflow: hidden !important;
}

/* Left-align text inside card & add padding */
.ptp-products-section .product-small.box .box-text {
    padding: 20px !important;
    text-align: left !important;
}

/* Mapping Category tags to the top of card */
.ptp-products-section .product-small.box .box-text::before {
    content: "BAO BÌ ĐÓNG GÓI" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #0c3c96 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

/* Map specific product IDs to their categories */
.ptp-products-section .post-89 .box-text::before,
.ptp-products-section .post-90 .box-text::before {
    content: "BAO BÌ CARTON" !important;
}

.ptp-products-section .post-91 .box-text::before,
.ptp-products-section .post-92 .box-text::before {
    content: "BAO BÌ NHỰA" !important;
}

.ptp-products-section .post-93 .box-text::before,
.ptp-products-section .post-94 .box-text::before {
    content: "BAO BÌ KRAFT" !important;
}

.ptp-products-section .post-95 .box-text::before,
.ptp-products-section .post-96 .box-text::before {
    content: "NHÃN MÁC" !important;
}

/* Product title basic styling */
.ptp-products-section .product-small.box .product-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.ptp-products-section .product-small.box .product-title a {
    color: #1e293b !important;
}

.ptp-products-section .product-small.box .product-title a:hover {
    color: #0c3c96 !important;
}

/* Map product IDs to their real titles (replacing bakery names) */
.ptp-products-section .post-89 .product-title a {
    font-size: 0 !important;
}

.ptp-products-section .post-89 .product-title a::before {
    content: "Thùng Carton 3 Lớp" !important;
    font-size: 16px !important;
}

.ptp-products-section .post-90 .product-title a {
    font-size: 0 !important;
}

.ptp-products-section .post-90 .product-title a::before {
    content: "Thùng Carton 5 Lớp" !important;
    font-size: 16px !important;
}

.ptp-products-section .post-91 .product-title a {
    font-size: 0 !important;
}

.ptp-products-section .post-91 .product-title a::before {
    content: "Túi PE Trong Suốt" !important;
    font-size: 16px !important;
}

.ptp-products-section .post-92 .product-title a {
    font-size: 0 !important;
}

.ptp-products-section .post-92 .product-title a::before {
    content: "Bao PP Dệt" !important;
    font-size: 16px !important;
}

.ptp-products-section .post-93 .product-title a {
    font-size: 0 !important;
}

.ptp-products-section .post-93 .product-title a::before {
    content: "Túi Kraft Có Quai" !important;
    font-size: 16px !important;
}

.ptp-products-section .post-94 .product-title a {
    font-size: 0 !important;
}

.ptp-products-section .post-94 .product-title a::before {
    content: "Hộp Giấy Kraft" !important;
    font-size: 16px !important;
}

.ptp-products-section .post-95 .product-title a {
    font-size: 0 !important;
}

.ptp-products-section .post-95 .product-title a::before {
    content: "Tem Nhãn Cuộn" !important;
    font-size: 16px !important;
}

.ptp-products-section .post-96 .product-title a {
    font-size: 0 !important;
}

.ptp-products-section .post-96 .product-title a::before {
    content: "Decal Trong Suốt" !important;
    font-size: 16px !important;
}

/* Insert product descriptions dynamically per post ID */
.ptp-products-section .product-small.box .title-wrapper::after {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin-top: 8px !important;
    margin-bottom: 15px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.ptp-products-section .post-89 .title-wrapper::after {
    content: "Thùng carton 3 lớp sóng E, B, C - chịu lực tốt, phù hợp đóng gói hàng hóa xuất..." !important;
}

.ptp-products-section .post-90 .title-wrapper::after {
    content: "Thùng carton 5 lớp độ bền cao, chịu tải trọng lớn, in ấn logo thương hiệu sắc nét" !important;
}

.ptp-products-section .post-91 .title-wrapper::after {
    content: "Túi PE trong suốt, độ bền cao, an toàn thực phẩm, đa dạng kích thước theo yê..." !important;
}

.ptp-products-section .post-92 .title-wrapper::after {
    content: "Bao PP dệt chịu tải trọng lớn, in offset nhiều màu, ứng dụng đóng gói gạo, phâ..." !important;
}

.ptp-products-section .post-93 .title-wrapper::after {
    content: "Túi giấy kraft thân thiện môi trường, quai xách chắc chắn, thích hợp cho shop..." !important;
}

.ptp-products-section .post-94 .title-wrapper::after {
    content: "Hộp giấy kraft đựng thực phẩm, chống thấm dầu mỡ, tự phân hủy sinh học..." !important;
}

.ptp-products-section .post-95 .title-wrapper::after {
    content: "Tem nhãn decal cuộn dán máy tự động, chất lượng in sắc nét, độ bám dính cao..." !important;
}

.ptp-products-section .post-96 .title-wrapper::after {
    content: "Decal nhựa trong suốt chống nước, chuyên dùng dán chai lọ mỹ phẩm, đồ uống..." !important;
}

/* Style price wrapper to hide price and display action buttons */
.ptp-products-section .product-small.box .price-wrapper {
    font-size: 0 !important;
    /* Hide original price text */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 15px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 15px !important;
}

.ptp-products-section .product-small.box .price-wrapper .price {
    display: none !important;
}

/* "Liên hệ báo giá" link button */
.ptp-products-section .product-small.box .price-wrapper::before {
    content: "Liên hệ báo giá" !important;
    font-size: 13px !important;
    color: #e31e24 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* "Đặt hàng" solid blue button */
.ptp-products-section .product-small.box .price-wrapper::after {
    content: "Đặt hàng" !important;
    font-size: 13px !important;
    color: #ffffff !important;
    background-color: #0c3c96 !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Hover effects for buttons */
.ptp-products-section .product-small.box:hover .price-wrapper::before {
    text-decoration: underline !important;
}

.ptp-products-section .product-small.box:hover .price-wrapper::after {
    background-color: #e31e24 !important;
}

/* 4. Custom image badges overlay ("Bán chạy", "Mới") */
.ptp-products-section .badge-container .badge-circle {
    display: none !important;
    /* Hide default sale circle badge */
}

.ptp-products-section .badge-container {
    top: 15px !important;
    left: 15px !important;
    display: block !important;
}

.ptp-products-section .badge-container::before {
    content: "Mới" !important;
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: #10b981 !important;
    /* Green for new */
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.ptp-products-section .product:first-child .badge-container::before,
.ptp-products-section .product:nth-child(4) .badge-container::before {
    content: "Bán chạy" !important;
    background-color: #e31e24 !important;
    /* Red for best seller */
}

/* 5. "Xem tất cả sản phẩm" button at bottom */
.ptp-products-section .panel>a.button {
    display: table !important;
    margin: 40px auto 0 auto !important;
    background-color: transparent !important;
    color: #0c3c96 !important;
    border: 2px solid #0c3c96 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 12px 35px !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

.ptp-products-section .panel>a.button:hover {
    background-color: #0c3c96 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(12, 60, 150, 0.25) !important;
}

/* 6. Responsive adjustments for mobile products */
@media (max-width: 549px) {
    .ptp-products-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .ptp-products-section .text h2 {
        font-size: 28px !important;
    }

    .ptp-products-section .nav>li>a {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    .ptp-products-section .product-small.box .box-text {
        padding: 15px !important;
    }

    .ptp-products-section .product-small.box .product-title {
        font-size: 14px !important;
    }

    .ptp-products-section .product-small.box .title-wrapper::after {
        font-size: 12px !important;
    }

    .ptp-products-section .product-small.box .price-wrapper {
        display: none !important;
    }

    .ptp-products-section .panel>a.button {
        margin: 20px auto 0 auto !important;
        padding: 8px 24px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   About Us Section (ptp-about-section)
   ========================================================================== */

.ptp-about-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: #ffffff !important;
}

/* Rounded corners and shadow for left images */
.ptp-about-section .img-inner {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Badge overlay container positioning */
.ptp-about-section .row:first-of-type .col:first-of-type .row .col:last-child .col-inner {
    position: relative !important;
}

/* Red container background and positioning using new HTML structure */
.ptp-about-section .position-img {
    position: absolute !important;
    bottom: -15px !important;
    right: 15px !important;
    width: 140px !important;
    background-color: var(--fs-color-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px #e97e5040 !important;
    z-index: 10 !important;
    padding: 15px 10px !important;
    text-align: center !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

.ptp-about-section .position-img:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px #e97e5050 !important;
}

/* Real HTML "20+" text badge */
.ptp-about-section .position-img .text-primary {
    color: #fff !important;
    /* Brand deep blue */
    font-size: 32px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 0 4px 0 !important;
    display: block !important;
}

/* Real HTML "Năm kinh nghiệm" text badge */
.ptp-about-section .position-img .text-gray-600 {
    color: #fff !important;
    /* Brand deep blue */
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: block !important;
}

/* 1. Header & Title styling (Right column) */
.ptp-about-section .col:last-child p:first-of-type {
    display: inline-block !important;
    background-color: rgba(16, 68, 156, 0.08) !important;
    color: #001e60 !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
    line-height: 1.5 !important;
    /* Hide original text "20+ Năm kinh nghiệm" */
}

.post-item .box-image {
    border-radius: 10px !important;
}




/* .ptp-about-section .col:last-child h2 span {
    display: block !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0px !important;
    text-transform: none !important;
    color: #0c3c96 !important;
}

*/

/* 2. Grid stats layout */
.ptp-about-section .icon-box.featured-box {
    background-color: #f8fafc !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 10px !important;
    padding: 15px 20px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

/* Add gaps between the collapsed columns both horizontally and vertically */
.ptp-about-section .row-collapse {
    margin-left: -8px !important;
    margin-right: -8px !important;
    width: calc(100% + 16px) !important;
}

.ptp-about-section .row-collapse>.col {
    padding: 8px !important;
    box-sizing: border-box !important;
}

.ptp-about-section .icon-box.featured-box:hover {
    background-color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
    border-color: #cbd5e1 !important;
}

.ptp-about-section .icon-box .icon-box-img {
    margin-right: 15px !important;
    margin-bottom: 0 !important;
    width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Custom styling for icons in stats grid */
.ptp-about-section .icon-box .icon-box-img img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}



.ptp-about-section .icon-box h5 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

/* 3. Learn More Button */
.ptp-about-section .col:last-child .col-inner>a.button {
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 8px 20px !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    margin-top: 12px !important;
    text-shadow: none !important;
}

.ptp-about-section .col:last-child .col-inner>a.button span::after {
    content: " →" !important;
    font-weight: bold !important;
}

.ptp-about-section .col:last-child .col-inner>a.button:hover {
    background-color: #b71c1c !important;
    border-color: #b71c1c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.3) !important;
}

/* Responsive adjustments for mobile about section */
@media (max-width: 549px) {
    .ptp-about-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .ptp-about-section .position-img {
        width: 110px !important;
        bottom: -10px !important;
        right: -10px !important;
        padding: 10px 5px !important;
        border-radius: 10px !important;
    }

    .ptp-about-section .position-img .text-primary {
        font-size: 24px !important;
        margin-bottom: 2px !important;
    }

    .ptp-about-section .position-img .text-gray-600 {
        font-size: 9px !important;
    }

    .ptp-about-section .col:last-child h2 span {
        font-size: 28px !important;
    }
}

/* ==========================================================================
   Why Choose Us Section (ptp-why-choose-section)
   ========================================================================== */

.ptp-why-choose-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: #0166B4 !important;
    /* Match Header & Footer brand blue */
}

/* Header/Title elements */
.ptp-why-choose-section .text p:first-of-type {
    display: inline-block !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

.ptp-why-choose-section .text h2 {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.5px !important;
}

.ptp-why-choose-section .text p:last-of-type {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 16px !important;
    margin-bottom: 50px !important;
}

/* Card layout */
.ptp-why-choose-section .icon-box.featured-box {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 40px 20px 30px 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    min-height: 290px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* .ptp-why-choose-section .icon-box.featured-box:hover {
    transform: translateY(-8px) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(248, 164, 26, 0.4) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
} */

/* Icon positioning and styling */
.ptp-why-choose-section .icon-box-img {
    /* width: 100% !important; */
    margin-bottom: 0 !important;
}

/* 
.ptp-why-choose-section .icon-box-img .icon {
    margin: 0 auto !important;
}

.ptp-why-choose-section .icon-box-img .icon-inner {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background-color: rgba(248, 164, 26, 0.12) !important;
    border: 1.5px solid rgba(248, 164, 26, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  
} */

.ptp-why-choose-section .icon-box-img img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}



/* Card titles and paragraphs */
.ptp-why-choose-section .icon-box h4 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    margin-bottom: 12px !important;
}

.ptp-why-choose-section .icon-box p {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Responsive styles for Why Choose Us Section */
@media (max-width: 549px) {
    .ptp-why-choose-section {
        padding-top: 50px !important;
        padding-bottom: 30px !important;
    }

    .ptp-why-choose-section .text h2 {
        font-size: 28px !important;
    }

    .ptp-why-choose-section .text p:last-of-type {
        margin-bottom: 30px !important;
        font-size: 14px !important;
    }

    .ptp-why-choose-section .row:last-of-type>.col {
        margin-bottom: 20px !important;
        /* Space between rows on mobile */
    }

    .ptp-why-choose-section .icon-box.featured-box {
        padding: 25px 15px 20px 15px !important;
        min-height: 250px !important;
    }

    .ptp-why-choose-section .icon-box h4 {
        font-size: 16px !important;
    }

    .ptp-why-choose-section .icon-box p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   Services Section (ptp-services-section)
   ========================================================================== */

.ptp-services-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    /* background-color: #f8f9fa !important; */
}

/* Header styling */
.ptp-services-section .text p:first-of-type {
    display: inline-block !important;
    background-color: rgba(12, 60, 150, 0.08) !important;
    color: #0c3c96 !important;
    /* Brand deep blue */
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

.ptp-services-section .text h2 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.5px !important;
    position: relative !important;
}

/* Add custom service subtitle below main title */
.ptp-services-section .text h2::after {
    content: "Giải pháp công nghệ toàn diện. Giúp doanh nghiệp vận hành hiệu quả và phát triển bền vững." !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin: 15px auto 40px auto !important;
    line-height: 1.6 !important;
    text-transform: none !important;
    max-width: 850px !important;
    width: 100% !important;
    letter-spacing: 0 !important;
}

@media (min-width: 850px) {
    .ptp-services-section .text h2::after {
        white-space: nowrap !important;
    }
}

/* Card item grid wrapper adjustments */
.ptp-services-section .box-blog-post {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #f1f5f9 !important;
    position: relative !important;
}

.ptp-services-section .box-blog-post:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* Image styling */
.ptp-services-section .box-image {
    position: relative !important;
}



/* Numbers badge ("01", "02", "03") on top-right of image */
.ptp-services-section .box-image::before {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background-color: var(--fs-color-primary) !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    line-height: 1.2 !important;
}

.ptp-services-section .post-item:nth-child(1) .box-image::before {
    content: "01" !important;
}

.ptp-services-section .post-item:nth-child(2) .box-image::before {
    content: "02" !important;
}

.ptp-services-section .post-item:nth-child(3) .box-image::before {
    content: "03" !important;
}

/* Hide default Flatsome post-date badge */
.ptp-services-section .post-date {
    display: none !important;
}

/* Content area within card */
.ptp-services-section .box-text {
    padding: 30px 25px 25px 25px !important;
    text-align: left !important;
    /* Left aligned content */
}

/* Hide default divider */
.ptp-services-section .is-divider {
    display: none !important;
}

/* Style actual post titles */
.ptp-services-section .post-title a {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    display: block !important;
    transition: color 0.3s ease !important;
}

.ptp-services-section .post-item:hover .post-title a {
    color: #0c3c96 !important;
}

/* Style actual post excerpts */
.ptp-services-section .from_the_blog_excerpt {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin: 10px 0 18px 0 !important;
    display: block !important;
}

/* Add CTA Link "Tìm hiểu thêm →" dynamically */
.ptp-services-section .box-text-inner::after {
    content: "Tìm hiểu thêm →" !important;
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0c3c96 !important;
    margin-top: 5px !important;
    transition: all 0.3s ease !important;
}

.ptp-services-section .post-item:hover .box-text-inner::after {
    color: #e31e24 !important;
    transform: translateX(4px) !important;
}

/* Responsive adjustments for Services Section */
@media (max-width: 549px) {
    .ptp-services-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .ptp-services-section .text h2 {
        font-size: 28px !important;
    }

    .ptp-services-section .text h2::after {
        font-size: 14px !important;
        margin-bottom: 30px !important;
    }

    .ptp-services-section .box-text {
        padding: 20px 15px 15px 15px !important;
    }

    .ptp-services-section .post-title a {
        font-size: 16px !important;
    }

    .ptp-services-section .from_the_blog_excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   Partners & Clients Section (ptp-partners-section)
   ========================================================================== */

.ptp-partners-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Header title styling */
.ptp-partners-section .text p:first-of-type {
    color: #1e293b !important;
    /* Elegant dark blue/black title */
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    margin-bottom: 35px !important;
}

/* Style logo cards in partners slider */
.ptp-partners-section .ptp-partners-slider .col-inner {
    padding: 0 10px !important;
}

.ptp-partners-section .ptp-partners-slider .uxb-image {
    background-color: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    font-size: 0 !important;
    /* Hide default "Upload Image..." text */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    margin: 0 !important;
    opacity: 0.85 !important;
}

.ptp-partners-section .ptp-partners-slider .uxb-image:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
    border-color: #e2e8f0 !important;
    opacity: 1 !important;
}

/* Styling for actual logo images inside the cards */
.ptp-partners-section .ptp-partners-slider .uxb-image img {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: grayscale(100%) !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
}

.ptp-partners-section .ptp-partners-slider .col-inner:hover img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* Hide dots and navigation in partners section for cleaner ticker look */
.ptp-partners-section .flickity-page-dots,
.ptp-partners-section .flickity-button {
    display: none !important;
}

/* Automatic continuous panning animation on all screen widths */
@keyframes panLogos {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-25%, 0, 0);
        /* Pan left to reveal hidden logos */
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes panLogosMobile {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-45%, 0, 0);
        /* Pan further on mobile screens */
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.ptp-partners-section .flickity-viewport {
    overflow: hidden !important;
}

.ptp-partners-section .ptp-partners-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 130% !important;
    /* Make row wider than container to enable panning */
    animation: panLogos 25s ease-in-out infinite !important;
}

.ptp-partners-section .ptp-partners-slider>.col {
    flex: 0 0 16.666% !important;
    /* Keep columns at original width ratio (1/6th of row) */
    max-width: 16.666% !important;
}

@media (max-width: 991px) {
    .ptp-partners-section .ptp-partners-slider {
        width: 180% !important;
        /* Expand row width on mobile to fit columns horizontally */
        animation: panLogosMobile 18s ease-in-out infinite !important;
    }

    .ptp-partners-section .ptp-partners-slider>.col {
        flex: 0 0 33.333% !important;
        /* 3 columns visible at once on mobile */
        max-width: 33.333% !important;
    }
}

/* ==========================================================================
   News & Events Section (ptp-news-section)
   ========================================================================== */

.ptp-news-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: #ffffff !important;
}

/* Header/Subtitle elements */
.ptp-news-section .text p:first-of-type {
    display: inline-block !important;
    background-color: #e8eeff !important;
    /* Soft blue background badge */
    color: #0c3c96 !important;
    /* Brand deep blue */
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

.ptp-news-section .text h2 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    /* Dark slate blue */
    margin-bottom: 15px !important;
    letter-spacing: -0.5px !important;
}

.ptp-news-section .text p:last-of-type {
    color: #64748b !important;
    /* Muted gray-blue */
    font-size: 16px !important;
    margin-bottom: 50px !important;
}

/* Card item grid wrapper adjustments */
.ptp-news-section .box-blog-post {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    overflow: visible !important;
    /* Allow category tag to overflow cleanly if needed */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    /* For absolute positioned category pill */
}

.ptp-news-section .box-blog-post:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* Image container and hover scale effect */
.ptp-news-section .box-image {
    order: 1 !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important;
    /* Force exact 16:9 aspect ratio container */
    height: 0 !important;
}

.ptp-news-section .image-cover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow: hidden !important;
    transition: transform 0.5s ease !important;
}

.ptp-news-section .image-cover a {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.ptp-news-section .image-cover img {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ptp-news-section .post-item:hover .image-cover {
    transform: scale(1.05) !important;
}

/* Dynamically styled category badge overlaying the image */
.ptp-news-section .cat-label {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background-color: #0c3c96 !important;
    /* Primary blue */
    color: #ffffff !important;
    padding: 5px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    z-index: 12 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    margin: 0 !important;
    display: inline-block !important;
    opacity: 1 !important;
    box-shadow: 0 4px 10px rgba(12, 60, 150, 0.3) !important;
}

/* Hide fallback CSS hardcoded category badges */
.ptp-news-section .box-image::before {
    display: none !important;
}

/* Hide default Flatsome post-date badge overlay */
.ptp-news-section .post-date {
    display: none !important;
}

/* Content area within card */
.ptp-news-section .box-text {
    order: 2 !important;
    padding: 25px 24px 25px 24px !important;
    text-align: left !important;
    /* Left-align all elements */
    background-color: #ffffff !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.ptp-news-section .blog-post-inner {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
    height: 100% !important;
}

/* Hide default divider */
.ptp-news-section .is-divider {
    display: none !important;
}

/* Style and position actual post date using flex order */
.ptp-news-section .post-meta {
    order: 1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    /* Subtle gray-blue */
    margin: 0 0 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    opacity: 1 !important;
}

/* Custom premium SVG calendar icon */
.ptp-news-section .post-meta::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230c3c96' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' /%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Style post titles */
.ptp-news-section .post-title {
    order: 2 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

.ptp-news-section .post-title a {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 50px !important;
    /* Uniform height for titles */
    transition: color 0.3s ease !important;
}

.ptp-news-section .post-item:hover .post-title a {
    color: #0c3c96 !important;
}

/* Hide post excerpts in card grid so cards only show title and date */
#post-list .from_the_blog_excerpt,
#post-list .box-excerpt,
#post-list .entry-summary,
.blog-posts .from_the_blog_excerpt,
.blog-posts .box-excerpt,
.blog-posts .entry-summary {
    display: none !important;
}

/* Style post excerpts */
.ptp-news-section .from_the_blog_excerpt {
    order: 3 !important;
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin: 0 0 18px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 45px !important;
    /* Uniform height for excerpts */
}

/* Style dynamic "Đọc thêm →" link */
.ptp-news-section .box-text-inner::after {
    content: "Đọc thêm →" !important;
    order: 4 !important;
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0c3c96 !important;
    margin-top: auto !important;
    /* Push link to the absolute bottom of the content box */
    transition: all 0.3s ease !important;
    width: fit-content !important;
}

.ptp-news-section .post-item:hover .box-text-inner::after {
    color: #e31e24 !important;
    transform: translateX(4px) !important;
}

/* Style button at the bottom of the section */
.ptp-news-section a.button,
.ptp-news-section .button {
    display: table !important;
    margin: 45px auto 0 auto !important;
    background-color: transparent !important;
    color: #0c3c96 !important;
    border: 2px solid #0c3c96 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 30px !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.ptp-news-section a.button:hover,
.ptp-news-section .button:hover {
    background-color: #0c3c96 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(12, 60, 150, 0.15) !important;
}

/* Hide section-content ::after pseudo-element */
.section-content::after,
.section-content:after,
.section-content.relative::after,
.section-content.relative:after,
.ptp-news-section .section-content::after {
    display: none !important;
    content: none !important;
}

/* Responsive adjustments */
@media (max-width: 549px) {
    .ptp-news-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .ptp-news-section .text h2 {
        font-size: 28px !important;
    }

    .ptp-news-section .text p:last-of-type {
        margin-bottom: 30px !important;
        font-size: 14px !important;
    }

    .ptp-news-section .box-text {
        padding: 20px 16px 20px 16px !important;
    }

    .ptp-news-section .post-title a {
        font-size: 16px !important;
        line-height: 1.2 !important;
        height: auto !important;
        -webkit-line-clamp: 3 !important;
    }

    .ptp-news-section .from_the_blog_excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
        height: auto !important;
        -webkit-line-clamp: 3 !important;
    }
}

/* ==========================================================================
   Contact & Quote Section (ptp-contact-section)
   ========================================================================== */

.ptp-contact-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: #f7f9fc !important;
}

/* Header badge and title styles */
.ptp-contact-section .text p:first-of-type span {
    display: inline-block !important;
    background-color: #e8eeff !important;
    /* Soft blue background badge */
    color: #0c3c96 !important;
    /* Brand deep blue */
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
}

.ptp-contact-section .text h2 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    /* Dark slate blue */
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.5px !important;
}

.ptp-contact-section .text p:last-of-type {
    color: #64748b !important;
    font-size: 16px !important;
    max-width: 600px !important;
    margin: 0 auto 50px auto !important;
}

/* Equal-height columns on desktop and tablet (Structural selectors using row-custom class) */
@media (min-width: 850px) {
    .ptp-contact-section .row.row-custom {
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ptp-contact-section .row.row-custom>.col {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        float: none !important;
    }

    .ptp-contact-section .row.row-custom>.col:nth-child(1) {
        width: 41.666% !important;
        /* 5/12 */
        max-width: 41.666% !important;
        flex: 0 0 41.666% !important;
    }

    .ptp-contact-section .row.row-custom>.col:nth-child(2) {
        width: 58.333% !important;
        /* 7/12 */
        max-width: 58.333% !important;
        flex: 0 0 58.333% !important;
    }
}

/* Left & Right Card Styling (Structural selectors using row-custom class) */
.ptp-contact-section .row.row-custom>.col>.col-inner {
    background-color: #ffffff !important;
    border-radius: 20px !important;
    padding: 40px 35px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f1f5f9 !important;
    height: 100% !important;
}

@media (min-width: 850px) {
    .ptp-contact-section .row.row-custom>.col:nth-child(1)>.col-inner {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* Force standard children of col-inner to occupy full width */
.ptp-contact-section .row.row-custom>.col>.col-inner>h3,
.ptp-contact-section .row.row-custom>.col>.col-inner>.icon-box,
.ptp-contact-section .row.row-custom>.col>.col-inner>form,
.ptp-contact-section .row.row-custom>.col>.col-inner>h4,
.ptp-contact-section .row.row-custom>.col>.col-inner>.gap-element {
    width: 100% !important;
}

/* Card titles */
.ptp-contact-section h3 {
    color: #0f172a !important;
    /* Premium dark blue */
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    letter-spacing: -0.3px !important;
}

/* Icon Box Styling */
/* .ptp-contact-section .icon-box {
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: flex-start !important;
}

.ptp-contact-section .icon-box-img {
    width: 42px !important;
    margin-right: 18px !important;
    flex-shrink: 0 !important;
}

.ptp-contact-section .icon {
    width: 42px !important;
    height: 42px !important;
    background-color: #e8eeff !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
}

.ptp-contact-section .icon-inner {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    margin: 0 !important;
}

*/
/* Hide broken placeholder images inside icon boxes */
/* .ptp-contact-section .icon-box-img img {
    display: none !important;
} */

/* Premium custom vector icons via CSS SVG background */
/* .ptp-contact-section .icon-box:nth-of-type(1) .icon-inner {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230c3c96' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E") no-repeat center/contain !important;
}

.ptp-contact-section .icon-box:nth-of-type(2) .icon-inner {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230c3c96' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.94.725l.548 2.2a1 1 0 01-.321.988l-1.305.98a10.582 10.582 0 004.872 4.872l.98-1.305a1 1 0 01.988-.321l2.2.548a1 1 0 01.725.94V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z' /%3E%3C/svg%3E") no-repeat center/contain !important;
}

.ptp-contact-section .icon-box:nth-of-type(3) .icon-inner {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230c3c96' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' /%3E%3C/svg%3E") no-repeat center/contain !important;
}

.ptp-contact-section .icon-box:nth-of-type(4) .icon-inner {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230c3c96' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E") no-repeat center/contain !important;
} */

/* Icon Box Texts */
/* .ptp-contact-section .icon-box-text h5 {
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin: 0 0 3px 0 !important;
}

.ptp-contact-section .icon-box-text p {
    font-size: 14px !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
}

.ptp-contact-section .icon-box:nth-of-type(2) .icon-box-text p,
.ptp-contact-section .icon-box:nth-of-type(3) .icon-box-text p {
    color: #0c3c96 !important;
    font-weight: 700 !important;
} */

/* Social connection divider & section */
.ptp-contact-section #gap-466083039 {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 25px !important;
    margin-top: auto !important;
    /* Push social icons row to the absolute bottom of left card */
    height: 0 !important;
    width: 100% !important;
}

.ptp-contact-section h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin-bottom: 12px !important;
}

/* Paragraph wrappers of social buttons flow horizontally */
.ptp-contact-section .row.row-custom>.col>.col-inner>p:has(.button.is-small) {
    width: auto !important;
    display: inline-block !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Social Buttons (Only target small social buttons using .button.is-small) */
.ptp-contact-section .button.is-small {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 10px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
}

.ptp-contact-section .button.is-small:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Only hide text span for social buttons that contain an icon and are small */
.ptp-contact-section .button.is-small:not(.secondary) span {
    display: none !important;
}

/* Style the text span in secondary button (Zalo) */
.ptp-contact-section .button.secondary.is-small span {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    display: inline-block !important;
}

.ptp-contact-section .button.is-small i {
    font-size: 16px !important;
    margin: 0 !important;
}

.ptp-contact-section .button.primary.is-small {
    background-color: #1877f2 !important;
    /* Facebook Blue */
    color: #ffffff !important;
}

.ptp-contact-section .button.alert.is-small {
    background-color: #ff0000 !important;
    /* Youtube Red */
    color: #ffffff !important;
}

.ptp-contact-section .button.secondary.is-small {
    background-color: #0068ff !important;
    /* Zalo Blue */
    color: #ffffff !important;
}

/* Quote Form Styling (Right Card) */
.ptp-contact-section form .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
    display: flex !important;
    flex-flow: row wrap !important;
}

.ptp-contact-section form .col {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

@media (min-width: 550px) {
    .ptp-contact-section form .col.large-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

.ptp-contact-section label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
}

/* Hide default <br> elements in flatsome form columns to prevent loose spacing */
.ptp-contact-section form br {
    display: none !important;
}

/* Style field inputs, selects, and textareas */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea,
.ptp-contact-section input[type="text"],
.ptp-contact-section input[type="email"],
.ptp-contact-section input[type="tel"],
.ptp-contact-section select,
.ptp-contact-section textarea,
select.wpcf7-select,
select.form-control {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 26px !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.wpcf7 textarea,
.ptp-contact-section textarea {
    height: auto !important;
    min-height: 120px !important;
}

.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 textarea::placeholder,
.ptp-contact-section input[type="text"]::placeholder,
.ptp-contact-section input[type="email"]::placeholder,
.ptp-contact-section input[type="tel"]::placeholder,
.ptp-contact-section textarea::placeholder {
    color: #94a3b8 !important;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
.ptp-contact-section input[type="text"]:focus,
.ptp-contact-section input[type="email"]:focus,
.ptp-contact-section input[type="tel"]:focus,
.ptp-contact-section select:focus,
.ptp-contact-section textarea:focus {
    background-color: #ffffff !important;
    border-color: #0c3c96 !important;
    box-shadow: 0 0 0 3px rgba(12, 60, 150, 0.15) !important;
    outline: none !important;
}

.wpcf7 select,
.ptp-contact-section select,
select.wpcf7-select,
select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}

.wpcf7 select option,
.ptp-contact-section select option,
select.wpcf7-select option,
select.form-control option {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

.ptp-contact-section form p:empty {
    display: none !important;
    /* Remove empty p elements injected by WP */
}

/* Submit Button Style */
.ptp-contact-section a.button.primary.expand {
    background-color: #0c3c96 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(12, 60, 150, 0.2) !important;
    margin-top: 10px !important;
    width: 100% !important;
}

.ptp-contact-section a.button.primary.expand:hover {
    background-color: #082d72 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(12, 60, 150, 0.3) !important;
}

.ptp-contact-section a.button.primary.expand i {
    font-size: 16px !important;
    margin: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 849px) {
    .ptp-contact-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .ptp-contact-section .text h2 {
        font-size: 28px !important;
    }

    .ptp-contact-section .text p:last-of-type {
        margin-bottom: 35px !important;
        font-size: 14px !important;
    }

    .ptp-contact-section .row.row-custom>.col>.col-inner {
        padding: 30px 24px !important;
        height: auto !important;
    }

    .ptp-contact-section .row.row-custom>.col:nth-child(1) {
        margin-bottom: 30px !important;
    }
}

@media (max-width: 549px) {
    .ptp-contact-section form .col.span-6 {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   Header Custom Styling to Match Mockup
   ========================================================================== */

/* --- 1. Top Bar --- */
/* Dung #top-bar (id) de thang rule .header-top{min-height:50px} cua theme options */
#top-bar {
    background-color: #0166B4 !important;
    min-height: 25px !important;
}

#top-bar .flex-row,
#top-bar .nav>li>a,
#top-bar .nav>li>a.nav-top-link {
    min-height: 25px !important;
    line-height: 25px !important;
}

#top-bar .nav>li>a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#top-bar .nav-divided>li+li::before {
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Phone link styling (Hotline: 1800 55 88 50) */
#menu-item-305 a {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0 !important;
    /* Hide original text node */
    color: #f8a41a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#menu-item-305 a i {
    font-size: 14px !important;
    color: #f8a41a !important;
    margin-right: 6px !important;
    order: 1 !important;
}

#menu-item-305 a::before {
    content: "Hotline: " !important;
    font-size: 13px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    order: 2 !important;
    margin-right: 4px !important;
}

#menu-item-305 a::after {
    content: "1800 55 88 50" !important;
    font-size: 13px !important;
    color: #f8a41a !important;
    font-weight: 700 !important;
    order: 3 !important;
}

/* Mail link styling (cskh@ptp.vn) */
#menu-item-306 a {
    color: #ffffff !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

#menu-item-306 a i {
    color: #f8a41a !important;
    margin-right: 6px !important;
}

/* Account link styling */
.account-item a.account-link {
    color: #ffffff !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.account-item a.account-link i.icon-user {
    color: #f8a41a !important;
    margin-left: 6px !important;
}

.account-item .nav-dropdown {
    border-radius: 8px !important;
    border: 1px solid #eef2f7 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}


/* --- 2. Main Header / Navigation --- */
#masthead {
    background-color: #0166B4 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

/* Base navigation menu items */
.header-nav-main>li>a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding: 0px 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.header-nav-main>li>a i.icon-angle-down {
    margin-left: 4px !important;
    font-size: 12px !important;
}

/* Hover and active menu link styles (excluding the quote button) */
.header-nav-main>li:not(#menu-item-113).current-menu-item>a,
.header-nav-main>li:not(#menu-item-113).active>a,
.header-nav-main>li:not(#menu-item-113).current_page_item>a,
.header-nav-main>li:not(#menu-item-113)>a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Center Bottom indicator line for active page and hovered link (excluding the quote button) */
.header-nav-main>li:not(#menu-item-113).current-menu-item>a::after,
.header-nav-main>li:not(#menu-item-113).active>a::after,
.header-nav-main>li:not(#menu-item-113).current_page_item>a::after,
.header-nav-main>li:not(#menu-item-113)>a:hover::after {
    content: "" !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 16px !important;
    height: 3px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
}

/* Sub-menus styling */
.header-nav-main .nav-dropdown {
    border-radius: 8px !important;
    border: 1px solid #eef2f7 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 10px 0 !important;
    background-color: #ffffff !important;
}

.header-nav-main .nav-dropdown li a {
    padding: 10px 20px !important;
    color: #475569 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
}

/* Fix chu bi xuong dong o dropdown "San pham" / "Dich vu".
   Flatsome dat .nav-dropdown{min-width:260px} nen cac item dai nhu
   "Giai phap chong that thoat du lieu" bi wrap thanh 2 dong.
   .nav-dropdown la display:table -> nowrap se tu gian rong theo item dai nhat.
   Menu nam trong .nav-right nen dropdown mo can le phai, gian sang trai
   => khong tran ra ngoai man hinh.
   Chi ap dung tu 850px tro len (dropdown chi ton tai o desktop), tranh
   lam tran ngang menu off-canvas tren mobile. */
@media (min-width: 850px) {

    .header-nav-main .nav-dropdown {
        min-width: 300px !important;
    }

    .header-nav-main .nav-dropdown li a {
        white-space: nowrap !important;
    }
}

.header-nav-main .nav-dropdown li a:hover {
    background-color: #eef3fc !important;
    color: #0c3c96 !important;
    /* Slide animation - giu tong padding ngang = 40px nhu luc khong hover,
       neu khong khi da nowrap thi dong dai nhat se rong them 4px -> dropdown giat */
    padding-left: 24px !important;
    padding-right: 16px !important;
}


/* --- 3. "Báo giá ngay" Button & Right Icons --- */
/* Search, Cart and Mobile menu icon styling */
.header-search a i.icon-search,
.cart-item a i.icon-shopping-basket,
.mobile-menu a i.icon-menu {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

.header-search a:hover i.icon-search,
.cart-item a:hover i.icon-shopping-basket,
.mobile-menu a:hover i.icon-menu {
    color: #f8a41a !important;
}

.header-divider {
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    height: 20px !important;
    margin: auto 15px !important;
    display: inline-block !important;
}

/* ==========================================================================
   Footer Custom Styling to Match Mockup
   ========================================================================== */

/* --- 1. Footer Layout & Backgrounds --- */
#footer,
#section_1894341560,
#section_1894341560 .section-bg {
    background-color: #0166B4 !important;
    background-image: none !important;
}

#section_594364788,
#section_594364788 .section-bg {
    background-color: #0166B4 !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Hide Column 5 (Hỗ Trợ) entirely */
#col-1634727048 {
    display: none !important;
}

/* Distribute remaining 4 columns on large screens */
@media (min-width: 850px) {
    #col-728660592 {
        width: 30% !important;
        max-width: 30% !important;
    }

    #col-2085232234 {
        width: 22% !important;
        max-width: 22% !important;
    }

    #col-2102752898 {
        width: 22% !important;
        max-width: 22% !important;
    }

    #col-1654731411 {
        width: 26% !important;
        max-width: 26% !important;
    }
}


/* --- 2. Headings & Accents --- */
#footer h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    position: relative !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

#footer h4::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 25px !important;
    height: 2px !important;
    background-color: #f8a41a !important;
}

#footer ul {
    margin-left: 0 !important;
    list-style: none !important;
}

#footer ul li {
    margin-bottom: 10px !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

#footer ul li a {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
}

#footer ul li a:hover {
    color: #e2e8f0 !important;
    text-decoration: underline !important;
}


/* --- 3. Column 1 Content Customization --- */
#col-728660592 .col-inner,
#footer .footer-body .col:first-child>.col-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#col-728660592 h2,
#col-728660592 h2 span {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    margin: 0 !important;
}

#col-728660592 h2 span::before {
    content: "BAO BÌ PTP" !important;
    font-size: 20px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    display: block !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

#col-728660592 h2 span::after {
    content: "Nhà sản xuất bao bì uy tín" !important;
    font-size: 13px !important;
    color: #f8a41a !important;
    /* Gold color like the mockup top bar hotline */
    font-weight: 500 !important;
    display: block !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
    text-transform: none !important;
}

#col-728660592 h2::after {
    content: "Chuyên sản xuất và cung cấp các loại bao bì đóng gói chất lượng cao, phục vụ thị trường trong nước và xuất khẩu." !important;
    font-size: 14px !important;
    color: #b5c6e0 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    display: block !important;
    margin-top: 15px !important;
    text-transform: none !important;
}

/* Footer Logo Styling */
#footer .footer-body .img-inner,
#col-728660592 .img-inner {
    background-color: white !important;
    border-radius: 60px !important;
    width: 115px !important;
    height: 115px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#footer .footer-body .img-inner img,
#col-728660592 .img-inner img {
    max-width: 100px !important;
}


/* --- 4. Columns 2, 3, 4 Text Replacements --- */
/* Column 2: Sản Phẩm items */
#col-2085232234 ul li:nth-child(1) {
    font-size: 0 !important;
}

#col-2085232234 ul li:nth-child(1)::after {
    content: "Bao bì giấy carton" !important;
    font-size: 14px !important;
}

#col-2085232234 ul li:nth-child(2) {
    font-size: 0 !important;
}

#col-2085232234 ul li:nth-child(2)::after {
    content: "Túi nhựa PE/PP" !important;
    font-size: 14px !important;
}

#col-2085232234 ul li:nth-child(3) {
    font-size: 0 !important;
}

#col-2085232234 ul li:nth-child(3)::after {
    content: "Màng ghép phức hợp" !important;
    font-size: 14px !important;
}

#col-2085232234 ul li:nth-child(4) {
    font-size: 0 !important;
}

#col-2085232234 ul li:nth-child(4)::after {
    content: "Bao bì kraft" !important;
    font-size: 14px !important;
}

#col-2085232234 ul::after {
    content: "Nhãn mác - Tem nhãn\nBao bì thực phẩm" !important;
    display: block !important;
    font-size: 14px !important;
    color: #b5c6e0 !important;
    line-height: 2.1 !important;
    white-space: pre-wrap !important;
    margin-top: 10px !important;
}

/* Column 3: Rename to Dịch Vụ and items */
#col-2102752898 h4 {
    font-size: 0 !important;
}

#col-2102752898 h4::before {
    content: "Dịch Vụ" !important;
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

#col-2102752898 ul li:nth-child(1) {
    font-size: 0 !important;
}

#col-2102752898 ul li:nth-child(1)::after {
    content: "Thiết kế bao bì" !important;
    font-size: 14px !important;
}

#col-2102752898 ul li:nth-child(2) {
    font-size: 0 !important;
}

#col-2102752898 ul li:nth-child(2)::after {
    content: "In ấn chuyên nghiệp" !important;
    font-size: 14px !important;
}

#col-2102752898 ul li:nth-child(3) {
    font-size: 0 !important;
}

#col-2102752898 ul li:nth-child(3)::after {
    content: "Sản xuất theo yêu cầu" !important;
    font-size: 14px !important;
}

#col-2102752898 ul li:nth-child(4) {
    font-size: 0 !important;
}

#col-2102752898 ul li:nth-child(4)::after {
    content: "Tư vấn giải pháp" !important;
    font-size: 14px !important;
}

#col-2102752898 ul::after {
    content: "Giao hàng tận nơi" !important;
    display: block !important;
    font-size: 14px !important;
    color: #b5c6e0 !important;
    line-height: 2.1 !important;
    margin-top: 10px !important;
}

/* Column 4: Rename to Liên Hệ and items with icons */
#col-1654731411 h4 {
    font-size: 0 !important;
}

#col-1654731411 h4::before {
    content: "Liên Hệ" !important;
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

#col-1654731411 ul li {
    padding-left: 25px !important;
    position: relative !important;
}

#col-1654731411 ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}

#col-1654731411 ul li:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8a41a'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") !important;
}

#col-1654731411 ul li:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8a41a'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") !important;
}

#col-1654731411 ul li:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8a41a'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") !important;
}

#col-1654731411 ul li:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8a41a'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E") !important;
}

#col-1654731411 ul li:nth-child(1) {
    font-size: 0 !important;
}

#col-1654731411 ul li:nth-child(1)::after {
    content: "Số 123 Nguyễn Văn Linh, Q.7, TP.HCM" !important;
    font-size: 14px !important;
}

#col-1654731411 ul li:nth-child(2) {
    font-size: 0 !important;
}

#col-1654731411 ul li:nth-child(2)::after {
    content: "0938 123 456" !important;
    font-size: 14px !important;
}

#col-1654731411 ul li:nth-child(3) {
    font-size: 0 !important;
}

#col-1654731411 ul li:nth-child(3)::after {
    content: "info@ptp.vn" !important;
    font-size: 14px !important;
}

#col-1654731411 ul li:nth-child(4) {
    font-size: 0 !important;
}

#col-1654731411 ul li:nth-child(4)::after {
    content: "T2-T7: 7:30 - 17:30" !important;
    font-size: 14px !important;
}


/* --- 5. Bottom Bar & Copyrights --- */
#col-365827215 p {
    font-size: 0 !important;
}

#col-365827215 p::after {
    content: "© 2024 Công ty Cổ phần Bao Bì PTP Việt Nam. Tất cả quyền được bảo lưu." !important;
    font-size: 14px !important;
    color: #8ca1c1 !important;
}

#col-241630823 .social-icons {
    font-size: 0 !important;
}

#col-241630823 .social-icons::after {
    content: "Chính sách bảo mật  |  Điều khoản sử dụng" !important;
    font-size: 14px !important;
    color: #8ca1c1 !important;
    display: inline-block !important;
}

/* Hide Flatsome absolute footer copyright strip */
.absolute-footer {
    display: none !important;
}

/* ==========================================================================
   Partners Logo Marquee Animation
   ========================================================================== */

/* Hide Flickity default dots and navigation buttons */
.ptp-partners-section .flickity-page-dots,
.ptp-partners-section .flickity-button {
    display: none !important;
}

/* Set up the slider wrapper for marquee */
.ptp-partners-section .slider-wrapper {
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* Add premium fade-out mask to left and right edges */
.ptp-partners-section .slider-wrapper::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: linear-gradient(90deg, #f9fafb 0%, transparent 15%, transparent 85%, #f9fafb 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Disable flickity transforms on viewport and slider track */
.ptp-partners-section .flickity-viewport {
    overflow: visible !important;
    height: auto !important;
}

.ptp-partners-section .flickity-slider {
    display: flex !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
    width: 100% !important;
}

/* Apply marquee animation to the row container */
.ptp-partners-section .ptp-partners-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    left: 0 !important;
    position: relative !important;
    animation: ptpLogoMarquee 20s linear infinite !important;
}

/* Define fixed sizes for each partner logo column */
.ptp-partners-section .ptp-partners-slider .col {
    flex: 0 0 160px !important;
    max-width: 160px !important;
    width: 160px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    padding: 0 15px !important;
}

/* Ensure images fit nicely and look modern */
.ptp-partners-section .partner-logo img {
    max-height: 100px !important;
    width: auto !important;
    object-fit: contain !important;
    /* filter: grayscale(100%) opacity(0.6) !important; */
    transition: all 0.3s ease !important;
}

/* Turn color on hover */
.ptp-partners-section .partner-logo img:hover {
    filter: grayscale(0%) opacity(1) !important;
}

/* Keyframe for continuous marquee scrolling */
@keyframes ptpLogoMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-25%, 0, 0);
    }
}

/* --- LOGO SCROLL MARQUEE --- */
.logo-scroll-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    padding: 3rem 0;
    /* Hiệu ứng mờ 2 bên mép để nhìn mượt hơn */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-scroll-track {
    display: inline-flex;
    align-items: center;
    gap: 4rem;
    /* Khoảng cách giữa các logo */
    /* Thời gian 30s có thể điều chỉnh để chạy nhanh hay chậm */
    animation: scroll-marquee 30s linear infinite;
    width: max-content;
}

.logo-scroll-track:hover {
    /* Dừng cuộn khi di chuột vào */
    animation-play-state: paused;
}

/* Sửa lỗi nếu dùng Flatsome Image Element */
.logo-scroll-track>* {
    flex-shrink: 0;
    margin: 0 !important;
    width: auto !important;
    /* Ghi đè flatsome width */
}

.logo-scroll-track img {
    height: 9rem !important;
    /* Chiều cao cố định cho logo */
    width: auto !important;
    object-fit: contain;
    /* Làm xám logo để nhìn đồng bộ, khi hover sẽ hiện màu gốc */
    /* filter: grayscale(100%) opacity(0.5); */
    transition: all 0.3s ease;
}

.logo-scroll-track .ux-logo {
    width: 200px !important;
}

.logo-scroll-track img:hover {
    /* filter: grayscale(0%) opacity(1); */
    transform: scale(1.05);
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Cuộn đi đúng 1 nửa chiều dài (chính xác với cấu trúc lặp đôi) */
        transform: translateX(calc(-50% - 2rem));
    }
}

/* Vertical 3 cột */
.archive #post-list .row {
    display: flex;
    flex-wrap: wrap;
}

/* Rule nay KHONG co media query nen ep 3 cot o moi kho man hinh,
   ke ca mobile -> xem phan dong bo 2 cot ben duoi */
.archive #post-list .post-item {
    width: 33.333% !important;
    max-width: 33.333% !important;
    position: static !important;
}

.archive #post-list .row-masonry {
    height: auto !important;
}

/* ==========================================================================
   MOBILE (<550px): dong bo grid bai viet = 2 cot tren moi trang listing
   - "San pham" da la 2 cot san (.products.small-columns-2 cua WooCommerce)
   - "Tin tuc" la PAGE (khong co class .archive) nen chay theo small-columns-1
     mac dinh cua Flatsome -> 1 cot
   - "Dich vu" / "Thong tin co dong" la ARCHIVE nen dinh rule
     .archive #post-list .post-item{width:33.333%!important} o tren -> 3 cot
   => ep ca hai ve 50% duoi 550px cho khop voi San pham.
   Desktop/tablet giu nguyen (4 cot / 3 cot) nhu cu.
   ========================================================================== */
@media (max-width: 549px) {

    /* Grid blog_posts cua Flatsome (trang Tin tuc).
       Loai tru khoi bai viet lien quan cuoi bai single de khong doi ngoai y muon. */
    .row.small-columns-1:not(.mbws-related-posts):not(.ptp-related-4col)>.col.post-item {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }

    /* Phai lap lai dung selector co #id moi de len duoc rule 33.333% o tren
       (specificity (1,2,0)); dat sau nen thang khi cung do uu tien. */
    .archive #post-list .post-item {
        width: 50% !important;
        max-width: 50% !important;
        flex-basis: 50% !important;
    }
}

/* Center single post header text container to align with article content width */
.single-post .entry-header-text-top {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Full-width screen breakout for Giới thiệu page banner */
.gioi-thieu-full-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-bottom: 40px !important;
    overflow: hidden !important;
}

.gioi-thieu-full-banner img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin: 0 auto !important;
}

/* --- Contact Form 7 Custom Styling --- */
.wpcf7-form .form-control,
.wpcf7-form input[type="submit"] {
    margin-bottom: 0 !important;
}

.ptp-contact-section form input[type="submit"] {
    margin-top: 1rem !important;
}

.wpcf7-form .col {
    margin-bottom: 12px !important;
}

.wpcf7-form p {
    margin-bottom: 0 !important;
}

/* Stretch map column to match form height */
.map-col .col-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.map-col .col-inner p,
.map-col iframe {
    height: 100% !important;
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   SPLIT HEADER: WHITE LOGO AREA (LEFT) + BLUE MENU AREA (RIGHT) WITH SLANTED CUT
   ========================================================================== */
/* Luu y specificity: <style id="custom-css"> cua theme options nam SAU file nay
   trong <head>, nen cac override chieu cao phai dung selector co id (#masthead,
   #logo, #top-bar) moi thang duoc .header-main{height:122px} / .stuck .header-main{...!important} */
#masthead,
.header-main {
    background-color: #0166B4 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 20 !important;
}

/* --- Chieu cao header gon lai (logo 70px + 9px thoang moi ben) --- */
#masthead {
    height: 88px !important;
}

.stuck #masthead {
    height: 76px !important;
}

#masthead .nav>li>a,
#masthead .header-nav-main>li>a {
    line-height: 40px !important;
}

#masthead #logo,
.header-main #logo,
.logo {
    position: relative !important;
    z-index: 5 !important;
    margin-right: 35px !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Bo width co dinh 177px cua theme options -> logo tu co theo anh */
#masthead #logo,
#masthead .logo {
    width: auto !important;
    max-width: none !important;
}

#masthead #logo::before,
.header-main #logo::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    left: -1000px !important;
    right: -45px !important;
    background-color: #ffffff !important;
    transform: skewX(-20deg) !important;
    transform-origin: top right !important;
    z-index: -1 !important;
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.1) !important;
}

#masthead::before,
.header-main::before,
#masthead .flex-left::before,
#masthead .flex-left::after,
.header-main .flex-left::before,
.header-main .flex-left::after {
    display: none !important;
}

#masthead .flex-left,
.header-main .flex-left {
    background-color: transparent !important;
    position: relative !important;
    z-index: 5 !important;
}

/* FIX DUPLICATE LOGO */
#logo img.header-logo-dark,
#logo img:not(:first-child),
.header-main #logo img.header-logo-dark,
.header-main #logo img:not(:first-child),
.header-logo-dark {
    display: none !important;
}

#logo img.header_logo,
#logo img:first-child,
.header-main #logo img.header_logo,
.header-main #logo img:first-child {
    display: block !important;
    max-height: 70px !important;
    height: 70px !important;
    width: auto !important;
    /* theme options dat padding:10px 0 -> bo di, neu khong logo bi co lai con 50px */
    padding: 0 !important;
    object-fit: contain !important;
    transition: all 0.2s ease !important;
}

/* Khi header dinh (.stuck) - thang rule .stuck #logo img{max-height:125px!important} */
.stuck #logo img.header_logo,
.stuck #logo img:first-child,
.stuck #masthead #logo img:first-child {
    max-height: 58px !important;
    height: 58px !important;
    padding: 0 !important;
}

.header-main .nav>li>a {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

.header-main .nav>li>a:hover,
.header-main .nav>li.active>a,
.header-main .nav>li.current-menu-item>a {
    color: #ffd166 !important;
    opacity: 0.95 !important;
}

.header-main .nav-dropdown,
.header-main .sub-menu {
    z-index: 999 !important;
}

/* HIDE WOOCOMMERCE CART / ACCOUNT */
.header-cart,
.cart-item,
li.cart-item,
li.header-cart,
.header-nav .cart-item,
.html_cart,
.header-button-cart,
.widget_shopping_cart,
li.account-item,
.header-account,
.account-link,
.single-product .price,
.single-product .single_add_to_cart_button,
.single-product .quantity,
.product .price,
.product .add_to_cart_button,
.woocommerce-price-suffix {
    display: none !important;
}

/* ==========================================================================
   FEATURED PRODUCTS SECTION (ptp-products-section) - COMPACT CARD LAYOUT
   ========================================================================== */
.ptp-products-section {
    background-color: #f4f8fe !important;
    padding: 50px 0 !important;
}

.ptp-products-section .post-item .box {
    background-color: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #eef4fc !important;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.04) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
}

.ptp-products-section .post-item .box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0, 86, 179, 0.08) !important;
    border-color: #d0e2fc !important;
}

/* Compact Image Container */
.ptp-products-section .box-image {
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
}

.ptp-products-section .image-cover {
    padding-top: 52% !important;
    position: relative !important;
    height: auto !important;
    width: 100% !important;
}

.ptp-products-section .image-cover img,
.ptp-products-section .box-image img,
.ptp-products-section img.attachment-medium,
.ptp-products-section img.wp-post-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px 14px 0 0 !important;
    display: block !important;
}

/* Hide Date Badge on Product Cards for clean compact look */
.ptp-products-section .post-date,
.ptp-products-section .post-date.badge-outline,
.ptp-products-section .post-date .badge-inner {
    display: none !important;
}

/* Compact Text Box */
.ptp-products-section .box-text {
    text-align: left !important;
    padding: 12px 14px 15px 14px !important;
}

.ptp-products-section .cat-label {
    display: inline-block !important;
    background-color: #eef5ff !important;
    color: #0066cc !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
}

.ptp-products-section .post-title a {
    color: #0b2545 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 38px !important;
}

.ptp-products-section .post-title a:hover {
    color: #0066cc !important;
}

.ptp-products-section .box-text .button {
    margin-top: 10px !important;
    padding: 4px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    color: #0066cc !important;
    border: 1px solid #d0e2fc !important;
}

.ptp-products-section .box-text .button:hover {
    background-color: #0066cc !important;
    color: #ffffff !important;
}

.ptp-products-section .post-title a:hover {
    color: #0066cc !important;
}

.ptp-products-section .is-divider {
    display: none !important;
}

/* ==========================================================================
   2-COLUMN DUAL NEWS SECTION LAYOUT
   ========================================================================== */
.ptp-news-dual-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 30px !important;
    max-width: 1440px !important;
    width: 96% !important;
    margin: 0 auto !important;
    align-items: start !important;
}

.ptp-news-col-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

/* 1. Featured Large Card */
.news-featured-card {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border: 1px solid #eef4fc !important;
    display: grid !important;
    grid-template-columns: 290px 1fr !important;
    padding: 16px !important;
    gap: 25px !important;
    align-items: center !important;
    min-height: 280px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.news-featured-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: #0166B4 !important;
}

.news-featured-img-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 250px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: transparent !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.news-featured-img-wrap img,
.news-featured-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    background: transparent !important;
    display: block !important;
}

.news-featured-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 2 !important;
}

.news-featured-badge i {
    color: #fbbf24 !important;
}

.news-featured-body {
    padding: 10px 170px 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 3 !important;
}

.news-featured-meta {
    color: #0166B4 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.news-featured-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
}

.news-featured-title a {
    color: #0b2545 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.news-featured-card:hover .news-featured-title a,
.news-featured-title a:hover {
    color: #0166B4 !important;
}

.news-featured-excerpt {
    color: #555555 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.news-featured-btn {
    background: #0166B4 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    width: fit-content !important;
    transition: background 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(1, 102, 180, 0.25) !important;
}

.news-featured-btn:hover {
    background: #004499 !important;
    color: #ffffff !important;
}

/* 3D Decor Wrapper */
.news-featured-decor-wrap {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 210px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.news-featured-decor {
    position: relative !important;
    z-index: 2 !important;
    width: 175px !important;
    height: auto !important;
    max-height: 235px !important;
    object-fit: contain !important;
    opacity: 0.95 !important;
}

/* 2. Subheading & Horizontal Slider */
.ptp-shareholder-slider-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
}

.ptp-news-subheading {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 5px !important;
    margin-bottom: 12px !important;
}

.ptp-news-subheading h4 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0b2545 !important;
    margin: 0 !important;
    padding-left: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ptp-slider-nav {
    display: flex !important;
    gap: 8px !important;
}

.ptp-slider-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid #d0e2fc !important;
    background: #ffffff !important;
    color: #0166B4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.ptp-slider-btn:hover {
    background: #0166B4 !important;
    color: #ffffff !important;
    border-color: #0166B4 !important;
}

.ptp-news-horiz-viewport {
    overflow: hidden !important;
    width: 100% !important;
    border-radius: 16px !important;
}

.ptp-news-horiz-track {
    display: flex !important;
    transition: transform 0.5s ease-in-out !important;
    width: 100% !important;
}

.ptp-news-horiz-item {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
}

.news-small-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #eef4fc !important;
    box-shadow: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color 0.2s ease !important;
}

.news-small-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: #0166B4 !important;
}

.news-small-img-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 150px !important;
    overflow: hidden !important;
    background: #f4f8fe !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.news-small-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    display: block !important;
}

.news-small-body {
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-grow: 1 !important;
}

.news-small-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    height: 39px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.news-small-title a {
    color: #0b2545 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.news-small-title a:hover {
    color: #0166B4 !important;
}

.news-small-date {
    font-size: 11px !important;
    color: #888888 !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* 3. RIGHT COLUMN (Vertical Slider) */
.ptp-news-col-right {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #eef4fc !important;
    box-shadow: none !important;
    padding: 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.ptp-news-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid #eef4fc !important;
    margin-bottom: 15px !important;
}

.ptp-news-sidebar-header h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0b2545 !important;
    margin: 0 !important;
}

.ptp-news-vert-viewport {
    height: 480px !important;
    overflow: hidden !important;
    position: relative !important;
}

.ptp-news-vert-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.news-vert-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.news-vert-card:hover {
    background: #ffffff !important;
    border-color: #0166B4 !important;
}

.news-vert-img {
    width: 85px !important;
    height: 65px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.news-vert-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.news-vert-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0b2545 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.news-vert-date {
    font-size: 12px !important;
    color: #888888 !important;
}

.btn-all-news {
    color: #0166B4 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.btn-main-shareholder {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 32px !important;
    background-color: #ffffff !important;
    color: #0166B4 !important;
    border: 1.5px solid #0166B4 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(1, 102, 180, 0.08) !important;
}

.btn-main-shareholder:hover {
    background-color: #0166B4 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(1, 102, 180, 0.2) !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (MOBILE & TABLET FIXES)
   ========================================================================== */
@media (max-width: 992px) {

    #masthead::before,
    .header-main::before,
    #masthead #logo::before,
    .header-main #logo::before {
        display: none !important;
    }

    .ptp-news-dual-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    .ptp-news-col-left,
    .ptp-news-col-right {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .news-featured-card {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }

    .news-featured-img-wrap {
        width: 100% !important;
        height: 220px !important;
        min-height: 180px !important;
        border-radius: 14px !important;
    }

    .news-featured-body {
        padding: 10px 0 0 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .news-featured-decor-wrap {
        display: none !important;
    }

    .ptp-news-horiz-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .ptp-news-col-right {
        padding: 20px 16px !important;
    }

    .ptp-news-vert-viewport {
        height: 420px !important;
    }
}

@media (max-width: 849px) {

    #masthead,
    .header-main {
        background-color: #ffffff !important;
        position: relative !important;
    }

    .header-main .flex-col,
    .header-main .flex-row {
        position: relative !important;
        justify-content: center !important;
    }

    #masthead #logo,
    .header-main #logo,
    .header-main .logo,
    #logo {
        position: absolute !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10 !important;
        top: 50% !important;
    }

    #logo a img,
    .header-main #logo a img,
    #logo img {
        max-height: 40px !important;
        height: 40px !important;
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
        object-fit: contain !important;
    }
}

@media (max-width: 600px) {
    .news-featured-card {
        border-radius: 16px !important;
        padding: 12px !important;
    }

    .news-featured-img-wrap {
        height: 180px !important;
        min-height: 160px !important;
    }

    .news-featured-title {
        font-size: 17px !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
    }

    .news-featured-excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    .news-featured-btn {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }

    .ptp-shareholder-slider-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ptp-news-horiz-viewport {
        width: 100% !important;
    }

    .ptp-news-horiz-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }

    .news-small-card {
        width: 100% !important;
    }

    .news-small-img-wrap {
        height: 160px !important;
    }

    .news-small-body {
        padding: 14px 12px !important;
    }

    .news-small-title {
        font-size: 14px !important;
        height: auto !important;
        margin-bottom: 8px !important;
    }

    .news-vert-card {
        padding: 10px !important;
        gap: 10px !important;
    }

    .news-vert-img {
        width: 70px !important;
        height: 55px !important;
    }

    .news-vert-title {
        font-size: 13px !important;
    }
}

/* Back to top button position */
.back-to-top,
#top-link,
a.back-to-top,
a#top-link {
    bottom: 60px !important;
}

/* ==========================================================================
   Single Post Detail Redesign & Layout Fix (PTP Theme)
   ========================================================================== */

/* Fix single post layout alignment - full width & centered */
.single-post #content.blog-wrapper {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.single-post #content .row {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
}

.single-post #content .col.large-9,
.single-post #content .col.large-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.single-post .post-sidebar {
    display: none !important;
}

/* Single Post Main Article Box */
.single-post article.post {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 40px 50px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f1f5f9 !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .single-post article.post {
        padding: 24px 20px !important;
        border-radius: 12px !important;
    }
}

/* Header Text Styling */
.single-post .entry-header-text-top {
    max-width: 100% !important;
    margin-bottom: 24px !important;
    text-align: left !important;
    padding: 0 !important;
}

.single-post .entry-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.3px !important;
}

@media (max-width: 768px) {
    .single-post .entry-title {
        font-size: 22px !important;
    }
}

.single-post .entry-meta {
    font-size: 13px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    padding-bottom: 16px !important;
    margin-bottom: 25px !important;
    text-transform: none !important;
}

.single-post .entry-meta a {
    color: #0c3c96 !important;
    font-weight: 600 !important;
}

/* Body Content Typography */
.ptp-single-body {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #334155 !important;
}

.ptp-single-body p {
    margin-bottom: 20px !important;
}

.ptp-single-body h2,
.ptp-single-body h3,
.ptp-single-body h4 {
    color: #0f172a !important;
    font-weight: 700 !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

.ptp-single-body h2 {
    font-size: 22px !important;
    border-left: 4px solid #0c3c96 !important;
    padding-left: 12px !important;
}

.ptp-single-body h3 {
    font-size: 18px !important;
}

.ptp-single-body blockquote {
    background: #f8fafc !important;
    border-left: 4px solid #f8a41a !important;
    padding: 16px 20px !important;
    margin: 25px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    font-style: italic !important;
    color: #475569 !important;
}

.ptp-single-body img {
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    margin: 15px 0 !important;
    max-width: 100% !important;
    height: auto !important;
}

.ptp-single-body table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

.ptp-single-body table th {
    background-color: #0c3c96 !important;
    color: #ffffff !important;
    padding: 12px 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.ptp-single-body table td {
    padding: 12px 15px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.ptp-single-body table tr:nth-child(even) td {
    background-color: #f8fafc !important;
}

/* ==========================================================================
   4-Column Vertical Related Posts Layout (PTP Theme)
   ========================================================================== */
.ptp-related-posts-wrapper {
    margin-top: 40px !important;
    padding-top: 30px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.ptp-related-posts-wrapper .mbws-related-posts-title h3 span {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Reset image zoom / card hover transforms on related posts */
.ptp-related-4col .box-blog-post,
.ptp-related-4col .box-blog-post:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

.ptp-related-4col .post-item:hover .image-cover img,
.ptp-related-4col .post-item:hover .image-cover {
    transform: none !important;
}

/* Related posts card thumbnail image */
.ptp-related-4col .box-image {
    width: 35% !important;
    min-width: unset !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.ptp-related-4col .box-image img {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Related posts title styling & Orange hover only */
.ptp-related-4col .post-title {
    margin: 0 0 6px 0 !important;
}

.ptp-related-4col .post-title a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.25s ease !important;
}

.ptp-related-4col .post-item:hover .post-title a,
.ptp-related-4col .post-title a:hover {
    color: #f8a41a !important;
    /* Orange title color on hover */
}

/* Related posts date & divider */
.ptp-related-4col .post-meta {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.ptp-related-4col .post-meta::before {
    display: none !important;
}

.ptp-related-4col .is-divider {
    display: block !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    width: 25px !important;
    height: 2px !important;
    background-color: #cbd5e1 !important;
}

/* Social Share Bar */
.ptp-single-share-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    margin: 30px 0 20px 0 !important;
}

.ptp-single-share-bar .share-label {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #1e293b !important;
}

/* Related Posts Section Cards - Matched with News & Category Page Style */
.ptp-related-posts-wrapper {
    margin-top: 50px !important;
}

.ptp-related-posts-wrapper .mbws-related-posts-title h3 span {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.ptp-related-posts-wrapper .box-blog-post,
.mbws-related-posts .box-blog-post {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: 100% !important;
}

.ptp-related-posts-wrapper .box-blog-post:hover,
.mbws-related-posts .box-blog-post:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.ptp-related-posts-wrapper .box-image,
.mbws-related-posts .box-image {
    order: 1 !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important;
    height: 0 !important;
}

.ptp-related-posts-wrapper .image-cover,
.mbws-related-posts .image-cover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow: hidden !important;
    transition: transform 0.5s ease !important;
}

.ptp-related-posts-wrapper .image-cover img,
.mbws-related-posts .image-cover img {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ptp-related-posts-wrapper .post-item:hover .image-cover,
.mbws-related-posts .post-item:hover .image-cover {
    transform: scale(1.05) !important;
}

.ptp-related-posts-wrapper .box-text,
.mbws-related-posts .box-text {
    order: 2 !important;
    padding: 22px 20px 22px 20px !important;
    text-align: left !important;
    background-color: #ffffff !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.ptp-related-posts-wrapper .post-meta,
.mbws-related-posts .post-meta {
    order: 1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ptp-related-posts-wrapper .post-meta::before,
.mbws-related-posts .post-meta::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230c3c96' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' /%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.ptp-related-posts-wrapper .post-title,
.mbws-related-posts .post-title {
    order: 2 !important;
    margin: 0 0 12px 0 !important;
}

.ptp-related-posts-wrapper .post-title a,
.mbws-related-posts .post-title a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 44px !important;
    transition: color 0.3s ease !important;
}

.ptp-related-posts-wrapper .post-item:hover .post-title a,
.mbws-related-posts .post-item:hover .post-title a {
    color: #0c3c96 !important;
}