
/* ================================================================
   RATTAN EXPORT VIETNAM
   VCS FRONTEND CLONE — COMPATIBILITY LAYER
   ---------------------------------------------------------------
   The main visual system is copied directly from Viet Coffee Source.
   This file contains ONLY Rattan-specific bridge rules.
   ================================================================ */

:root{
    --rev-vcs-primary:#173F35;
    --rev-vcs-secondary:#C69A3B;
    --rev-vcs-tertiary:#F5EFE4;
    --rev-vcs-dark:#202724;
}

/* Temporary text logo fallback if /img/rattanexport-logo.svg is absent. */
.rev-vcs-text-logo{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:285px;
    min-height:72px;
    color:#173F35;
    text-decoration:none!important;
    line-height:1;
}
.rev-vcs-text-logo strong{
    display:block;
    color:#173F35;
    font-size:30px;
    font-weight:800;
    letter-spacing:-.035em;
}
.rev-vcs-text-logo small{
    display:block;
    margin-top:9px;
    color:#7b817e;
    font-size:8px;
    font-weight:700;
    letter-spacing:.18em;
}
.rev-vcs-code-badge{
    display:inline-grid;
    place-items:center;
    min-width:28px;
    height:18px;
    margin-right:7px;
    padding:0 5px;
    border:1px solid rgba(23,63,53,.16);
    border-radius:2px;
    color:#173F35;
    font-size:8px;
    font-weight:800;
    letter-spacing:.06em;
}
.dropdown-item.active .rev-vcs-code-badge{
    border-color:rgba(255,255,255,.35);
    color:#fff;
}

/* Existing Rattan V2 pages use reveal attributes from the previous shell.
   Under the Porto/VCS shell they should remain visible without the old app.js. */
[data-reveal]{
    opacity:1!important;
    transform:none!important;
}

/* Flash messages from the current Rattan router. */
.rev-vcs-flashes{
    position:relative;
    z-index:20;
    padding-top:12px;
}
.rev-vcs-flashes .alert{
    margin-bottom:0;
}

/* Keep the current Rattan product/RFQ modules readable under Porto globals. */
.rev-vcs-current-view .rev-product-v2,
.rev-vcs-current-view .rfq-page,
.rev-vcs-current-view .blog-page,
.rev-vcs-current-view .contact-page{
    font-family:"Poppins",Arial,sans-serif;
}

/* Homepage slider image placeholder protection. */
.vcs-slider .vcs-slide-background{
    background-color:#2b211b;
}

/* VCS mobile header hotfix expects an image logo.
   Keep equivalent spacing when the text fallback is shown. */
@media(max-width:991px){
    #header .rev-vcs-text-logo{
        min-width:0;
        min-height:82px;
        max-width:calc(100vw - 105px);
    }
    #header .rev-vcs-text-logo strong{
        font-size:24px;
    }
}
@media(max-width:575px){
    #header .rev-vcs-text-logo{
        min-height:74px;
    }
    #header .rev-vcs-text-logo strong{
        font-size:21px;
    }
    #header .rev-vcs-text-logo small{
        font-size:7px;
        letter-spacing:.12em;
    }
}

/* The VCS skin is the authoritative first-stage color system. */
::selection{
    background:#173F35;
    color:#fff;
}


/* ================================================================
   PHASE 2 — FULL INNER PAGE VCS PARITY
   Removes the old Rattan card-heavy visual language from public pages.
   ================================================================ */
.hp{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.page-header.page-header-modern{margin-bottom:0!important}
.page-header.page-header-modern .sub-title{max-width:720px;display:block;line-height:1.55}
.rev-vcs-product-image{padding:0!important;overflow:hidden;background:#f7f7f7;border-radius:0!important}
.rev-vcs-product-image img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .35s ease}
.product:hover .rev-vcs-product-image img{transform:scale(1.025)}
.rev-vcs-product-sidebar .nav-list .nav-link.active,.sidebar .nav-list .nav-link.active{color:var(--primary)!important;font-weight:700}
.rev-vcs-product-gallery{box-shadow:0 4px 18px rgba(0,0,0,.035)}
.rev-vcs-main-product-image{background:#f6f6f6}
.rev-vcs-main-product-image img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.rev-vcs-product-thumb{width:100%;padding:2px;border:1px solid #e4e4e4;background:#fff;cursor:pointer}
.rev-vcs-product-thumb:hover{border-color:var(--primary)}
.rev-vcs-product-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.rev-vcs-quick-specs small,.rev-vcs-quick-specs strong{display:block}
.rev-vcs-quick-specs small{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#8a8a8a;margin-bottom:2px}
.rev-vcs-quick-specs strong{font-size:12px;line-height:1.45;color:#333}
.rev-vcs-spec-table th{width:34%;font-weight:600;color:#444}
.rev-vcs-rich-content{font-size:15px;line-height:1.8;color:#555}
.rev-vcs-rich-content h2{font-size:26px;font-weight:700;color:#262626;margin:34px 0 14px}
.rev-vcs-rich-content h3{font-size:21px;font-weight:700;color:#303030;margin:28px 0 12px}
.rev-vcs-rich-content h4{font-size:18px;font-weight:600;margin:24px 0 10px}
.rev-vcs-rich-content p{margin-bottom:1.25rem}
.rev-vcs-rich-content ul,.rev-vcs-rich-content ol{padding-left:1.4rem;margin-bottom:1.35rem}
.rev-vcs-rich-content li{margin-bottom:.45rem}
.rev-vcs-rich-content img{max-width:100%;height:auto}
.rev-vcs-rich-content table{width:100%;margin:1.5rem 0;border-collapse:collapse}
.rev-vcs-rich-content th,.rev-vcs-rich-content td{padding:10px 12px;border:1px solid #e6e6e6;vertical-align:top}
.rev-vcs-rich-content th{background:#f6f6f6;font-weight:700}
.rev-vcs-rich-content a{text-decoration:none;font-weight:600}
.rev-vcs-rich-content a:hover{text-decoration:underline}
.blog-posts .post-image img{width:100%;aspect-ratio:16/10;object-fit:cover}
.single-post .post-image>img{aspect-ratio:16/9}
.sidebar .nav-list .nav-link{font-size:13px}
.sidebar .nav-list .nav-link .float-end{padding-left:8px}
.corporate-content{max-width:980px;margin:0 auto}
.corporate-content>h2:first-child{margin-top:0}
.call-to-action.with-button-arrow .arrow{opacity:.55}
@media(max-width:991px){.rev-vcs-product-sidebar,.sidebar{margin-top:2rem}.page-header.page-header-modern .breadcrumb{text-align:left!important}.page-header.page-header-modern .order-1{margin-bottom:.5rem}.page-header.page-header-modern .sub-title{font-size:13px}.call-to-action.with-button-arrow .arrow{display:none!important}}


/* ================================================================
   VCS SIDEBAR PARITY — PRODUCTS
   Uses the existing Viet Coffee Source editorial sidebar system.
   ================================================================ */
.rev-product-vcs-sidebar .rev-product-featured-card{
    padding:0;
    overflow:hidden;
}
.rev-product-vcs-sidebar .rev-product-featured-card>h5{
    margin:0;
    padding:14px 16px 12px;
    border-bottom:1px solid #e4e7e5;
}
.rev-product-mini-list{
    padding:2px 16px 6px;
}
.rev-product-mini{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:11px;
    align-items:center;
    padding:12px 0;
    border-top:1px solid #edf0ee;
}
.rev-product-mini:first-child{
    border-top:0;
}
.rev-product-mini-image{
    display:block;
    width:64px;
    height:64px;
    overflow:hidden;
    background:#f5f6f5;
}
.rev-product-mini-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.rev-product-mini-content{
    min-width:0;
}
.rev-product-mini-title{
    display:block;
    color:#173f35;
    font-size:11px;
    font-weight:700;
    line-height:1.35;
    text-decoration:none!important;
}
.rev-product-mini-title:hover{
    color:#b48b58;
}
.rev-product-mini-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:7px;
    color:#6e7b76;
    font-size:8.5px;
    font-weight:700;
    text-decoration:none!important;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.rev-product-mini-link:hover{
    color:#173f35;
}
.rev-product-mini-link i{
    font-size:7px;
}
.rev-export-content{
    min-width:0;
}
@media(max-width:991.98px){
    .rev-product-vcs-sidebar,
    .vcs-export-sidebar{
        margin-top:35px;
    }
}

/* ==================================================================
   EXPORT SERVICES — PROFESSIONAL B2B HUB V2
   ================================================================== */
@media(min-width:992px){
    .vcs-export-sidebar{
        position:sticky;
        top:132px;
        align-self:flex-start;
    }
}

.vcs-export-toc{
    margin-bottom:22px;
}
.vcs-export-toc-kicker{
    display:block;
    margin-bottom:5px;
    color:#a47b48;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.vcs-export-toc>h5,
.vcs-export-scope>h5,
.vcs-export-resources>h5{
    margin:0 0 10px;
    color:#173f35;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
}
.vcs-export-toc .nav-list{
    border-top:1px solid #dfe6e3;
}
.vcs-export-toc .nav-item{
    border-bottom:1px solid #e3e9e6;
}
.vcs-export-toc .nav-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 10px!important;
    color:#455952!important;
    font-size:10px!important;
    font-weight:600;
    line-height:1.35;
}
.vcs-export-toc .nav-link:hover,
.vcs-export-toc .nav-link.active{
    background:#173f35;
    color:#fff!important;
}
.vcs-export-toc .nav-link i{
    flex:0 0 auto;
    font-size:8px;
}

.vcs-export-scope{
    margin:20px 0;
    padding:16px 0;
    border-top:1px solid #dfe6e3;
    border-bottom:1px solid #dfe6e3;
}
.vcs-export-scope ul{
    list-style:none;
    margin:0;
    padding:0;
}
.vcs-export-scope li{
    display:grid;
    grid-template-columns:17px minmax(0,1fr);
    gap:8px;
    padding:6px 0;
    color:#5e6f69;
    font-size:9px;
    line-height:1.45;
}
.vcs-export-scope li i{
    margin-top:2px;
    color:#a47b48;
    font-size:8px;
}

.vcs-export-resources{
    margin-top:20px;
}
.vcs-export-resources .nav-item{
    border-bottom:1px solid #e5ebe8;
}
.vcs-export-resources .nav-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 0!important;
    color:#52645e!important;
    font-size:9.5px!important;
    font-weight:600;
}
.vcs-export-resources .nav-link:hover{
    color:#173f35!important;
}
.vcs-export-resources .nav-link i{
    color:#9aa6a2;
    font-size:7px;
}

/* Main export page content */
.rev-export-content{
    max-width:none!important;
}
.rev-export-content .rev-export-intro{
    max-width:850px;
    margin-bottom:38px;
}
.rev-export-content .rev-export-kicker{
    display:block;
    margin-bottom:8px;
    color:#a47b48;
    font-size:9px;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}
.rev-export-content .rev-export-lead{
    max-width:820px;
    color:#4f625b;
    font-size:17px;
    line-height:1.75;
}
.rev-export-service-section{
    scroll-margin-top:145px;
    padding:34px 0 32px;
    border-top:1px solid #dfe6e3;
}
.rev-export-service-section:first-of-type{
    padding-top:0;
    border-top:0;
}
.rev-export-service-section h2{
    margin:0 0 12px!important;
    color:#173f35!important;
    font-size:25px!important;
}
.rev-export-service-section h3{
    color:#263d35!important;
}
.rev-export-service-section p{
    max-width:900px;
}
.rev-export-service-section .rev-export-number{
    display:inline-block;
    margin-bottom:8px;
    color:#a47b48;
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
}

.rev-export-process{
    margin:26px 0 8px;
    border-top:1px solid #dbe3e0;
}
.rev-export-process-row{
    display:grid;
    grid-template-columns:58px 200px minmax(0,1fr);
    gap:18px;
    align-items:start;
    padding:17px 0;
    border-bottom:1px solid #e2e8e5;
}
.rev-export-process-row>strong:first-child{
    color:#a47b48;
    font-size:11px;
    letter-spacing:.06em;
}
.rev-export-process-row h3{
    margin:0!important;
    font-size:15px!important;
}
.rev-export-process-row p{
    margin:0!important;
    color:#62736d;
    font-size:12px;
    line-height:1.65;
}

.rev-export-columns{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 36px;
    margin-top:22px;
}
.rev-export-column{
    padding-top:14px;
    border-top:2px solid #173f35;
}
.rev-export-column h3{
    margin:0 0 8px!important;
    font-size:16px!important;
}
.rev-export-column p{
    margin-bottom:10px!important;
    font-size:12px;
}
.rev-export-column ul{
    margin-bottom:0!important;
    padding-left:18px!important;
}
.rev-export-column li{
    color:#60716b;
    font-size:11px;
    line-height:1.55;
}

.rev-export-note{
    margin:22px 0 0;
    padding:14px 16px;
    border-left:3px solid #a47b48;
    background:#f7f8f7;
    color:#5e6e69;
    font-size:11px;
    line-height:1.65;
}
.rev-export-note strong{
    color:#173f35;
}

.rev-export-input-table{
    margin-top:20px!important;
    font-size:11px;
}
.rev-export-input-table th{
    background:#173f35!important;
    color:#fff!important;
    border-color:#173f35!important;
}
.rev-export-input-table td{
    color:#596c65;
}
.rev-export-final-cta{
    margin-top:10px;
    padding:25px 28px;
    background:#173f35;
    color:#fff;
}
.rev-export-final-cta h2{
    color:#fff!important;
}
.rev-export-final-cta p{
    color:rgba(255,255,255,.78);
}
.rev-export-final-cta .btn{
    margin-top:7px;
}

@media(max-width:991.98px){
    .vcs-export-sidebar{
        margin-top:35px;
    }
    .rev-export-process-row{
        grid-template-columns:46px minmax(0,1fr);
    }
    .rev-export-process-row p{
        grid-column:2;
    }
}
@media(max-width:767.98px){
    .rev-export-columns{
        grid-template-columns:1fr;
    }
    .rev-export-process-row{
        grid-template-columns:38px minmax(0,1fr);
        gap:12px;
    }
    .rev-export-content .rev-export-lead{
        font-size:15px;
    }
}

