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

/* Section Background & Overlay */
.ptp-hero-section,
section:has(#row-1973973923) {
    padding-top: 100px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.ptp-hero-section .section-bg-overlay,
section:has(#row-1973973923) .section-bg-overlay {
    background: linear-gradient(90deg, rgba(16, 68, 156, 0.85) 0%, rgba(199, 61, 57, 0.85) 100%) !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: inline-block !important;
    background-color: #e31e24 !important;
    /* Solid red background */
    color: #ffffff !important;
    padding: 6px 20px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
    line-height: 1.5 !important;
}

/* Main Heading: White on first line, Orange/Yellow on second line */
.ptp-hero-section .row:first-of-type .text h1,
#row-1973973923 h1 {
    font-size: 56px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 25px !important;
    color: #f8a41a !important;
    /* Fallback and second line color */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
}

.ptp-hero-section .row:first-of-type .text h1::first-line,
#row-1973973923 h1::first-line {
    color: #ffffff !important;
}

/* Description paragraph */
.ptp-hero-section .row:first-of-type .text p:nth-of-type(2),
#row-1973973923 .text p:nth-of-type(2) {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 35px !important;
}

/* Buttons styling & layout */
.ptp-hero-section .row:first-of-type .button,
#row-1973973923 .button {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
}

/* "Xem sản phẩm" button (Solid Red) */
.ptp-hero-section .row:first-of-type .button.is-outline,
#row-1973973923 .button.is-outline {
    background-color: #e31e24 !important;
    color: #ffffff !important;
    border: 1px solid #e31e24 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 10px 30px !important;
    margin: 8px !important;
    text-shadow: none !important;
    display: inline-block !important;
}

.ptp-hero-section .row:first-of-type .button.is-outline:hover,
#row-1973973923 .button.is-outline:hover {
    background-color: #b71c1c !important;
    border-color: #b71c1c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.4) !important;
}

.ptp-hero-section .row:first-of-type .button.is-outline i,
#row-1973973923 .button.is-outline i {
    display: none !important;
}

/* "Nhận báo giá" button (Outline White / Glass) */
.ptp-hero-section .row:first-of-type .button.is-shade,
#row-1973973923 .button.is-shade {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 10px 30px !important;
    margin: 8px !important;
    display: inline-block !important;
}

.ptp-hero-section .row:first-of-type .button.is-shade:hover,
#row-1973973923 .button.is-shade:hover {
    background-color: #ffffff !important;
    color: #10449c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3) !important;
}

/* Stats Row - Centered full-width bottom bar */
.ptp-stats-row,
#row-299688760 {
    position: relative !important;
    margin-top: 80px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Pseudo-element for edge-to-edge dark overlay behind the stats row */
.ptp-stats-row::before,
#row-299688760::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: 100% !important;
    background: rgb(255 255 255 / 0.1) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-top: 1px solid rgb(255 255 255 / 0.2);
}


.ptp-stats-row>*,
#row-299688760>* {
    position: relative !important;
    z-index: 1 !important;
}

/* Stats text colors and sizes */
.ptp-stats-row h3,
#row-299688760 h3 {
    color: #f8a41a !important;
    /* Gold color for values */
    font-weight: 700 !important;
}

.ptp-stats-row p,
#row-299688760 p {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Custom mapping for the 4th Column "ISO 9001:2015" -> "ISO" and "9001:2015 Chứng nhận" */
.ptp-stats-row .col:last-child .text h3,
#row-299688760 .col:last-child .text h3 {
    font-size: 0 !important;
}

.ptp-stats-row .col:last-child .text h3::before,
#row-299688760 .col:last-child .text h3::before {
    content: "ISO" !important;
    font-size: 36px !important;
    color: #f8a41a !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 5px !important;
}

.ptp-stats-row .col:last-child .text p,
#row-299688760 .col:last-child .text p {
    font-size: 0 !important;
}

.ptp-stats-row .col:last-child .text p::before,
#row-299688760 .col:last-child .text p::before {
    content: "9001:2015 Chứng nhận" !important;
    font-size: 14px !important;
    color: #ffffff !important;
    display: block !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;
    }
}

/* ==========================================================================
   Categories Section (ptp-categories-section)
   ========================================================================== */

.ptp-categories-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    background-color: #f7f9fc !important;
    /* Light background to make white cards stand out */
}

/* Category card */
.ptp-categories-section .icon-box.featured-box {
    background-color: #ffffff !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 12px !important;
    padding: 30px 15px 25px 15px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: pointer !important;
    margin-bottom: 20px !important;
    min-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icon container with soft blue/grey background */
.ptp-categories-section .icon-box-img {
    width: 54px !important;
    height: 54px !important;
    background-color: rgba(16, 68, 156, 0.08) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 15px auto !important;
    transition: all 0.3s ease !important;
}

.ptp-categories-section .icon-box-img .icon,
.ptp-categories-section .icon-box-img .icon-inner {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tint the icons dark blue using CSS filter */
.ptp-categories-section .icon-box-img img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(20%) sepia(82%) saturate(2227%) hue-rotate(210deg) brightness(85%) contrast(97%) !important;
    transition: all 0.3s ease !important;
}

/* Category Title */
.ptp-categories-section .icon-box-text h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Active (first column) & Hover State Styles
   -------------------------------------------------------------------------- */

/* Hover State Styles */
.ptp-categories-section .icon-box.featured-box:hover {
    background-color: #0c3c96 !important;
    /* Deep brand blue background */
    border-color: #0c3c96 !important;
    box-shadow: 0 12px 28px rgba(12, 60, 150, 0.3) !important;
    transform: translateY(-5px) !important;
}

/* Lighter transparent blue for hover icon container */
.ptp-categories-section .icon-box.featured-box:hover .icon-box-img {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Turn hover icons white */
.ptp-categories-section .icon-box.featured-box:hover .icon-box-img img {
    filter: brightness(0) invert(1) !important;
}

/* Turn hover titles white */
.ptp-categories-section .icon-box.featured-box:hover h4 {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Responsive adjustments for small screens
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {
    .ptp-categories-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .ptp-categories-section .icon-box.featured-box {
        padding: 20px 10px 15px 10px !important;
        min-height: 130px !important;
        margin-bottom: 15px !important;
    }

    .ptp-categories-section .icon-box-img {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
    }

    .ptp-categories-section .icon-box-img img {
        width: 20px !important;
        height: 20px !important;
    }

    .ptp-categories-section .icon-box-text h4 {
        font-size: 12px !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: 50px !important;
        padding-bottom: 50px !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::before,
    .ptp-products-section .product-small.box .price-wrapper::after {
        font-size: 11px !important;
        padding: 4px 10px !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: #e31e24 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(227, 30, 36, 0.4) !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 rgba(227, 30, 36, 0.55) !important;
}

/* Real HTML "20+" text badge */
.ptp-about-section .position-img .text-primary {
    color: #0c3c96 !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: #0c3c96 !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: #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: 25px !important;
    line-height: 1.5 !important;
    font-size: 0 !important;
    /* Hide original text "20+ Năm kinh nghiệm" */
}

.ptp-about-section .col:last-child p:first-of-type::before {
    content: "Về chúng tôi" !important;
    font-size: 12px !important;
    display: block !important;
}

/* Main title styling & two-color split */
.ptp-about-section .col:last-child h2 {
    font-size: 0 !important;
    /* Hide original "Về chúng tôi" inside h2 */
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    line-height: 1.25 !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;
    /* Color for second line "Bao Bì PTP Việt Nam" */
}

.ptp-about-section .col:last-child h2 span::first-line {
    color: #1e293b !important;
    /* Color for first line "Công Ty Cổ Phần" */
}

/* Paragraphs descriptions */
.ptp-about-section .col:last-child p:not(:first-of-type) {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #475569 !important;
    margin-bottom: 20px !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 {
    background-color: #e31e24 !important;
    color: #ffffff !important;
    border: 1px solid #e31e24 !important;
    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: #001e60 !important;
    /* Brand dark 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: 15px !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;
    color: #f8a41a !important;
    /* fallback color */
}

.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: "Từ thiết kế đến sản xuất, PTP cung cấp giải pháp bao bì đầy đủ cho doanh nghiệp của bạn" !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: 600px !important;
    letter-spacing: 0 !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: #e31e24 !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.4 !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;
}

.ptp-news-section .image-cover {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow: hidden !important;
    transition: transform 0.5s ease !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.4 !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;
}

/* 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;
}

/* Fallback button if no button is added in UX Builder */
.ptp-news-section:not(:has(.button)) .section-content::after {
    content: "Xem tất cả tin tức →" !important;
    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: 12px 35px !important;
    text-align: center !important;
    transition: all 0.3s ease !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;
        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;

}

/* 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;
    /* Soft blue background */
    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;
    /* Cool grey-blue label */
    margin: 0 0 3px 0 !important;
}

.ptp-contact-section .icon-box-text p {
    font-size: 14px !important;
    color: #1e293b !important;
    /* Bold slate dark for address/hours */
    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;
    /* Highlighted brand blue for Phone and Email values */
    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: block !important;
}

.ptp-contact-section form .col.span-6 {
    width: 50% !important;
    float: left !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 0;
    margin-bottom: 0px !important;
    box-sizing: border-box !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 */
.ptp-contact-section input[type="text"],
.ptp-contact-section input[type="email"],
.ptp-contact-section select,
.ptp-contact-section textarea {
    background-color: #f8fafc !important;
    /* Very light cool grey */
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

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

.ptp-contact-section input[type="text"]:focus,
.ptp-contact-section input[type="email"]: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;
}

.ptp-contact-section select {
    -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;
}

.ptp-contact-section form p {
    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 --- */
#top-bar {
    background-color: #0a3880 !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: #ffffff !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: #333333 !important;
    padding: 10px 16px !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: #eef3fc !important;
    color: #0c3c96 !important;
}

/* Center Bottom red 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: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 16px !important;
    height: 3px !important;
    background-color: #e31e24 !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;
}

.header-nav-main .nav-dropdown li a:hover {
    background-color: #eef3fc !important;
    color: #0c3c96 !important;
    padding-left: 24px !important;
    /* Slide animation */
}


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

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

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