/*
Theme Name:     Tigotheme
Theme URI:      https://tigobiz.com
Description:    Flatsome Child Theme by Tigobiz - Custom cho VL IMEX CO., LTD
Author:         Tigobiz
Author URI:     https://tigobiz.com
Template:       flatsome
Version:        1.2.0
Text Domain:    tigotheme
License:        GPL-2.0+
License URI:    http://www.gnu.org/licenses/gpl-2.0.txt
*/

/* ============================================
   Tigotheme - VL IMEX Custom Styles (Clean v3)
   ============================================ */

/* --- Color Variables --- */
:root {
    --vl-primary: #b51a1c;
    --vl-primary-dark: #8a1215;
    --vl-primary-light: #d42a2d;
    --vl-accent: #c8a951;
    --vl-text: #333333;
    --vl-text-light: #666666;
    --vl-bg-light: #f5f5f5;
    --vl-bg-beige: #f2eeea;
    --vl-white: #ffffff;
    --vl-footer-bg: #2d2d2d;
    --vl-footer-bottom-bg: #020202;
}

/* --- Typography --- */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Regular.ttf');
  font-weight: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Bold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Bold.ttf');
  font-weight: 700;
}

html {
  -webkit-text-size-adjust: 100%;
  font-family: roboto !important;
}
body {
  font-family: "Roboto", sans-serif;
}
h1, h2, h3, h4, h5, h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.alt-font {
  font-family: "Roboto", sans-serif;
}
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* --- Header --- */
.header-main {
    background-color: transparent;
    box-shadow: none;
    height: 54px !important;
}
/* White background when scrolled/stuck */
.header.stuck .header-main,
.header:not(.transparent) .header-main {
    background-color: var(--vl-white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.stuck .header-main {
    box-shadow: 0 2px 20px rgba(0,0,0,0.12);
}

/* --- Navigation --- */
.nav > li > a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
}
.nav > li > a:hover,
.nav > li.active > a,
.nav > li.current > a,
.nav > li.current-menu-item > a {
    color: var(--vl-primary) !important;
}
/* White nav text on transparent header */
.header.transparent:not(.stuck) .header-main .nav > li > a {
    color: #fff !important;
}
.header.transparent:not(.stuck) .header-main .nav > li.active > a,
.header.transparent:not(.stuck) .header-main .nav > li.current-menu-item > a {
    color: var(--vl-accent) !important;
}
/* White topbar text on transparent */
.header.transparent:not(.stuck) .header-top,
.header.transparent:not(.stuck) .header-top a,
.header.transparent:not(.stuck) .header-top .flex-col *,
.header.transparent:not(.stuck) .top-bar-nav > li > a {
    color: #fff !important;
}
.header.transparent:not(.stuck) .header-top {
    background-color: transparent !important;
}
.nav-dropdown {
    border-top: 2px solid var(--vl-primary);
}

/* --- Transparent Header --- */
.header.transparent .nav-dark .social-icons .button.is-outline {
  border-color: hsla(0,0%,100%,.5);
}
.header.transparent .nav-dark .is-outline {
  color: hsla(0,0%,100%,.5);
}
.nav-dark .social-icons .button.is-outline {
  border-color: #555;
}
.nav-dark .is-outline {
  color: #555;
}

/* --- Hero Slider --- */
.slider-wrapper {
    z-index: 1;
}
.banner-slider .flickity-page-dots .dot.is-selected {
    background: var(--vl-primary);
}

/* --- Section Title (digi-title) --- */
.digi-title .section-title-main {
  font-size: 55px;
  font-weight: 600;
  letter-spacing: 0px;
  text-transform: none;
  color: #31361d;
  line-height: 1.2;
}
.digi-title span {
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
  color: #8e994a;
  margin-bottom: 12px;
}
.section-title-normal span {
  border-bottom: 2px solid #b51a1c;
}

/* --- Counter Section --- */
.is-border.is-dashed {
    border-style: dashed !important;
}

/* --- Product Cards & Category Boxes --- */
.product-card,
.col .box {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover,
.col .box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.box.box-category.has-hover.box-default {
  background: #fff;
  border-radius: 10px;
}
.box-image.sp .attachment-full.size-full.wp-post-image,
.box-category.has-hover.box-default .wp-post-image {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

/* --- Blog --- */
.box-blog-post .image-cover,
.gallery-box .box-image,
.img .img-inner {
  border-radius: 10px;
}
.post-item .post-title a:hover {
    color: var(--vl-primary) !important;
}
.entry-divider.is-divider.small {
    display: none;
}
.box-blog-post .is-divider {
    display: none;
}
.box-shadow-2, .box-shadow-2-hover:hover {
    box-shadow: none;
}

/* --- Footer --- */
.footer {
    padding: 60px 0;
}
.footer i[class^="icon-"] {
  padding-right: 6px;
}
.footer .is-divider, .widget .is-divider {
  display: none;
}
ul.menu > li + li, .widget > ul > li + li {
    border-top: 0px solid #ececec;
}

/* Footer 2 (Main widget footer — 4 columns) */
.footer-2 {
    background-color: #2d2d2d !important;
    color: #f1f1f1;
    background-position: 50% 22%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.footer-2 a {
    color: #cccccc;
}
.footer-2 a:hover {
    color: var(--vl-accent);
}
.footer-2 .widget-title {
    color: var(--vl-white) !important;
    text-transform: capitalize;
    font-size: 16px;
}
.footer-2 .widget {
    padding-bottom: 0;
}
.footer-2 .menu li a {
    color: #ccc;
    font-size: 14px;
    line-height: 2;
}
.footer-2 .menu li a:hover {
    color: #fff;
}

/* Footer company info styles */
.lien_he .tencty h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 10px;
}
.lien_he .diachi,
.lien_he .phone_tel,
.lien_he .email,
.lien_he .website,
.lien_he > div {
    color: #ccc;
    font-size: 14px;
    line-height: 2;
}
.lien_he .diachi i,
.lien_he .phone_tel i,
.lien_he .email i,
.lien_he .website i,
.lien_he > div i {
    padding-right: 6px;
    color: #ccc;
}
.lien_he .phone_tel a,
.lien_he .email a {
    color: #ccc;
}
.lien_he .social-icons {
    margin-top: 10px;
}
.lien_he .social-icons h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 8px;
}
.lien_he .social-icons .icon.button.circle {
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin-right: 5px;
}

/* Footer widget column widths */
@media screen and (min-width: 850px) {
  .footer-2 .widget_custom_html:first-child {
    flex-basis: 38%;
    max-width: 38%;
  }
  .footer-2 .widget_nav_menu {
    flex-basis: 16%;
    max-width: 16%;
  }
  .footer-2 .widget_custom_html:last-child {
    flex-basis: 20%;
    max-width: 20%;
  }
}

/* Absolute Footer (bottom bar) */
.absolute-footer {
    background-color: #020202 !important;
    color: #f1f1f1;
}

/* --- About Page --- */
.about-features .icon-box {
    text-align: center;
    padding: 30px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.about-features .icon-box:hover {
    background: var(--vl-bg-light);
    transform: translateY(-3px);
}

/* --- FAQ Accordion --- */
.accordion-title {
    font-weight: 600 !important;
    color: var(--vl-text) !important;
}
.accordion-title:hover {
    color: var(--vl-primary) !important;
}
.accordion-inner {
  padding: 0;
}

/* --- Contact Form 7 --- */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 15px;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: var(--vl-primary);
    outline: none;
    box-shadow: 0 0 5px rgba(181, 26, 28, 0.2);
}
.wpcf7-submit {
    background-color: var(--vl-primary) !important;
    color: var(--vl-white) !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.wpcf7-submit:hover {
    background-color: var(--vl-primary-dark) !important;
}
.wpcf7-spinner {
  margin-right: -50px;
}
input[type="submit"], input[type="submit"].button {
  border-radius: 5px;
}

/* --- Social Icons --- */
.social-icons a.icon.primary.circle {
    background-color: var(--vl-primary) !important;
}

/* --- Tables --- */
table {
  width: 100%;
  border: 1px solid #ddd;
}
th, td {
  padding: 10px;
  border: 1px solid #ddd;
}
th {
  text-align: center;
  vertical-align: middle;
}
td:first-child, th:first-child {
  padding-left: 12px;
}

/* --- Logo white bg pill --- */
.ux-logo-image.block.lazy-load-active {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
}

/* --- Product Images --- */
.box-image .attachment-medium.size-medium.wp-post-image {
  height: 225px;
  object-fit: cover;
}
.box-image.sp .attachment-full.size-full.wp-post-image {
  object-fit: contain;
}

/* --- Lightbox --- */
.lightbox-content {
  border-radius: 10px;
}
.lightbox-content .col {
  padding: 0 30px;
}

/* --- WhatsApp Float --- */
.wa-chat-box-brand {
    background-color: #25d366 !important;
}

/* --- Hotline Phone Ring --- */
.hotline-phone-ring-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
}
.hotline-phone-ring {
  position: relative;
  visibility: visible;
  background-color: transparent;
  width: 110px;
  height: 110px;
  cursor: pointer;
  z-index: 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transition: visibility .5s;
  left: 0;
  bottom: 0;
  display: block;
}
.hotline-phone-ring-circle {
    width: 85px;
  height: 85px;
  top: 0;
  left: 0;
  position: absolute;
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid #e60808;
  -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  transition: all .5s;
  transform-origin: 50% 50%;
  opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
    width: 55px;
  height: 55px;
  top: 17px;
  left: 17px;
  position: absolute;
  background-color: rgba(230, 8, 8, 0.7);
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  transition: all .5s;
  transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
    background-color: #e60808;
    width: 33px;
  height: 33px;
  top: 27px;
  left: 27px;
  position: absolute;
  background-size: 20px;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  transform-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hotline-phone-ring-img-circle .pps-btn-img {
  display: flex;
}
.hotline-phone-ring-img-circle .pps-btn-img img {
    width: 20px;
    height: 20px;
}

@-webkit-keyframes phonering-alo-circle-anim {
  0% { -webkit-transform: rotate(0) scale(0.5) skew(1deg); -webkit-opacity: 0.1; }
  30% { -webkit-transform: rotate(0) scale(0.7) skew(1deg); -webkit-opacity: 0.5; }
  100% { -webkit-transform: rotate(0) scale(1) skew(1deg); -webkit-opacity: 0.1; }
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
  0% { -webkit-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.6; }
  50% { -webkit-transform: rotate(0) scale(1) skew(1deg); opacity: 0.6; }
  100% { -webkit-transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.6; }
}
@-webkit-keyframes phonering-alo-circle-img-anim {
  0% { -webkit-transform: rotate(0) scale(1) skew(1deg); }
  10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }
  20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); }
  30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }
  40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); }
  50% { -webkit-transform: rotate(0) scale(1) skew(1deg); }
  100% { -webkit-transform: rotate(0) scale(1) skew(1deg); }
}


/* Logo: transparent bg on transparent header */
.header.transparent:not(.stuck) .ux-logo-image.block.lazy-load-active {
    background: transparent;
}
/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Tablet (max-width: 849px) */
@media (max-width: 849px) {
    .header-main {
        height: 70px !important;
    }
    .header-logo img {
        max-height: 50px;
    }
}

/* Mobile (max-width: 549px) */
@media (max-width: 549px) {
    .header-main {
        height: 54px !important;
    }
    .header-logo img {
        max-height: 40px;
    }
    .footer-1 .col {
        width: 100% !important;
        margin-bottom: 20px;
    }
    .digi-title .section-title-main {
        font-size: 32px;
    }
    body {
        padding-top: 0px;
    }
    .absolute-footer.dark {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 48em) {
    .back-to-top {
        bottom: 72px !important;
    }
    .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
        font-size: .85em !important;
    }
}


/* ====================================
   VL IMEX - Product Page Styles
   Clone of vuonglong.com.vn
   ==================================== */

/* Breadcrumb Bar */
.vl-product-breadcrumb {
    background: #333 !important;
}
.vl-product-breadcrumb a:hover {
    color: #fff !important;
}

/* Product Gallery */
.vl-product-gallery .vl-gallery-main img {
    transition: transform 0.3s ease;
}
.vl-product-gallery .vl-gallery-main img:hover {
    transform: scale(1.02);
}
.vl-thumb-item img {
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.7;
}
.vl-thumb-item:hover img,
.vl-thumb-item.active img {
    border-color: #b51a1c !important;
    opacity: 1;
}

/* Product Buttons */
.vl-btn-primary:hover {
    background: #9a1518 !important;
    transform: translateY(-1px);
}
.vl-btn-outline:hover {
    background: #b51a1c !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Tabs */
.vl-tab:hover {
    color: #333 !important;
}
.vl-tab.active {
    border-bottom-color: #333 !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Tab Panels Content */
.vl-panel h2 {
    margin-bottom: 20px;
}
.vl-panel p {
    margin-bottom: 10px;
    line-height: 1.8;
}

/* Hide default WC elements on product page */
.single-product .woocommerce-breadcrumb,
.single-product .product_meta,
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .up-sells,
.single-product .product-info .cart,
.single-product .product-page-accordian,
.single-product .product_title {
    display: none !important;
}

/* Product page body background */
.single-product #content {
    background: #f5ede7;
}

/* Responsive */
@media (max-width: 849px) {
    .product-gallery-wrap,
    .product-info-wrap {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
    }
    .product-info-wrap {
        margin-top: 25px;
    }
    .vl-tabs {
        flex-wrap: wrap;
    }
    .vl-tab {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
}





/* ========================================
   GALLERY THUMBNAILS - GRID LAYOUT
   ======================================== */
div.vl-gallery-thumbs,
.vl-product-gallery .vl-gallery-thumbs {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
}
.vl-thumb-item {
    cursor: pointer;
}
.vl-thumb-item img {
    width: 100% !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 4px;
    transition: border-color 0.2s;
}
.vl-thumb-item:hover img {
    border-color: #b51a1c !important;
}

/* Hide gallery thumbnail scrollbar (fallback) */
.vl-gallery-thumbs::-webkit-scrollbar { display: none; }
.vl-gallery-thumbs { -ms-overflow-style: none; scrollbar-width: none; }

/* Ensure gallery takes full 50% width */
.vl-product-gallery { width: 100%; }
.vl-gallery-main img { background: #fff; }

/* ========================================
   TAB PANEL CONTENT STYLING
   ======================================== */
.vl-tab-panels h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}
.vl-tab-panels h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 25px 0 15px;
}
.vl-tab-panels ul {
    padding-left: 20px;
    margin-bottom: 20px;
}
.vl-tab-panels ul li {
    margin-bottom: 8px;
    line-height: 1.7;
    font-size: 15px;
    color: #333;
}
.vl-tab-panels p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
}
.box-text {
    padding-left: 15px;
    padding-right: 15px;
}
.vl-btn vl-btn-outline {
	display: none !important;
}