/*
Theme Name: Flatsome Child Austdoor
Theme URI: https://cuacuonaustdoor.vn
Description: Flatsome Child Theme cho hệ thống Cửa cuốn Austdoor.
Author: UX Themes (Customized)
Template: flatsome
Version: 3.2
*/

/* ==========================================================================
   Austdoor Custom CSS Variables
   ========================================================================== */
:root {
  --austdoor-blue: #003366;  /* Màu xanh dương nhận diện thương hiệu Austdoor */
  --austdoor-orange: #F37021; /* Màu cam nổi bật (Action color) */
}

/* ==========================================================================
   Typography & Base Overrides
   ========================================================================== */
/* Ép Font chữ đồng nhất Roboto (chuẩn Austdoor) hỗ trợ 100% Tiếng Việt, tiêu diệt cả các mã inline do Copy/Paste văn bản vào Flatsome */
body, h1, h2, h3, h4, h5, h6, .nav-top-link, .nav>li>a, .product-title, .section-title-main,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, .product-title *, .section-title-main * {
  font-family: 'Roboto', sans-serif !important;
}

/* ==========================================================================
   Buttons (Nút bấm)
   ========================================================================== */
/* Nút cơ bản mặc định sẽ mang màu Xanh dương (nút bên trái của anh) */
.button {
  background-color: #0066cc !important; 
  color: #fff !important;
  border-radius: 0px !important; /* Vuông góc */
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 18px; 
}

/* Các nút chính (submit, add to cart, checkout, nút bên phải của anh) sẽ mang màu Cam */
.button.primary, 
button[type="submit"], 
.checkout-button, 
.single_add_to_cart_button {
  background-color: var(--austdoor-orange) !important;
  color: #fff !important;
  border-radius: 0px !important;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 18px;
}

.button:hover {
  background-color: #004b9e !important;
  box-shadow: 0 4px 10px rgba(0,0,0, 0.15);
}

.button.primary:hover, 
button[type="submit"]:hover, 
.single_add_to_cart_button:hover {
  background-color: #d85c14 !important;
  box-shadow: 0 4px 10px rgba(0,0,0, 0.15);
}

/* ==========================================================================
   Titles / Tiêu đề danh mục (Giống bản Web Cũ)
   ========================================================================== */
.section-title-main,
.section-title span {
  background-color: #0066cc !important; /* Nền xanh n đậm */
  color: #ffffff !important; /* Chữ trắng */
  padding: 8px 25px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  border: none !important; /* Xóa viền khung xám nếu có */
}

/* Đổi màu 2 đường kẻ ngang 2 bên thành màu xanh cùng bộ */
.section-title auto, 
.section-title b {
  border-top: 1.5px solid #0066cc !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

h1.product-title {
  color: #0b5182 !important; /* Muted deep blue */
  font-weight: 600 !important;
  font-size: 26px !important;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc; /* Đường xám mỏng */
}
h1.product-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px; /* Đè lên vạch xám */
  width: 120px;
  height: 3px;
  background-color: #0b5182;
}

/* Ẩn divider mặc định của Flatsome (Cái nằm dưới Title) */
.product-info .is-divider {
  display: none !important;
}

/* Custom Price Wrapper (Vạch xanh lá cây) */
.product-info .price-wrapper {
  border-bottom: 1px solid #28a745 !important; /* Green line */
  padding-bottom: 15px !important;
  margin-bottom: 15px !important;
}

/* ==========================================================================
   Product Tabs Style (Khu vực THÔNG TIN SẢN PHẨM)
   ========================================================================== */
.woocommerce-tabs .nav {
  background: linear-gradient(to bottom, #fcfcfc 0%, #e8e8e8 100%) !important;
  border: 1px solid #ddd !important;
  display: flex !important;
  width: 100% !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.woocommerce-tabs .nav li {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}

.woocommerce-tabs .nav li a {
  background: transparent !important;
  color: #333 !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  padding: 10px 25px !important;
  text-transform: uppercase !important;
  border: none !important;
  display: block !important;
  height: 100%;
}

.woocommerce-tabs .nav li.active a {
  background: linear-gradient(to bottom, #007ceb 0%, #005bbb 100%) !important; 
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important;
  border-right: 1px solid #004b9e !important;
}

/* Tắt các vạch/mũi tên nhô ra của Flatsome Nav */
.woocommerce-tabs .nav li a::before,
.woocommerce-tabs .nav li a::after,
.woocommerce-tabs .nav li.active a::after {
  display: none !important;
}

/* Tô màu ngoặc Tiêu đề H2/H3 trong bài viết bằng mầu xanh đồng bộ */
.woocommerce-tabs .tab-panels h2, 
.woocommerce-tabs .tab-panels h3 {
  color: #0066cc !important; 
  font-weight: 600 !important;
  margin-bottom: 15px !important;
}

/* ==========================================================================
   Floating Contact Widget (Nút liên hệ góc trái)
   ========================================================================== */
.austdoor-floating-contact {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999999;
    display: flex;
    align-items: center;
}

/* Vòng xoay rung chuông */
.afc-hotline-ring {
    position: relative;
    width: 80px;
    height: 80px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.afc-hotline-ring-circle {
    width: 80px;
    height: 80px;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid var(--austdoor-orange);
    animation: afc-phonering-alo-circle-anim 1.2s infinite ease-in-out;
    transition: all .5s;
    transform-origin: 50% 50%;
}

.afc-hotline-ring-circle-fill {
    width: 60px;
    height: 60px;
    position: absolute;
    background-color: var(--austdoor-orange);
    border-radius: 100%;
    border: 2px solid transparent;
    animation: afc-phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition: all .5s;
    transform-origin: 50% 50%;
    opacity: 0.2; /* Nhẹ nhàng hơn */
}

.afc-hotline-ring-img-circle {
    background-color: #fff;
    width: 44px;
    height: 44px;
    position: absolute;
    border-radius: 100%;
    border: 2px solid var(--austdoor-orange);
    animation: afc-phonering-alo-circle-img-anim 1s infinite ease-in-out;
    transform-origin: 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2 Bong bóng chát (Kinh doanh) */
.afc-contact-bubbles {
    display: flex;
    flex-direction: column;
    margin-left: -5px; /* Kéo lệch vào sát nút chuông */
    z-index: 1;
}

.afc-bubble {
    position: relative;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    padding: 9px 18px;
    border-radius: 8px; /* Bo góc chữ nhật giống ảnh mẫu */
    margin-bottom: 8px;
    text-decoration: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    display: inline-block;
    white-space: nowrap;
    line-height: 1.3;
}
.afc-bubble:last-child {
    margin-bottom: 0;
}

/* Tạo mũi tên chỉ vào nút ở bên trái bọt thoại */
.afc-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px; /* Lồi ra ngoài bọt */
    transform: translateY(-50%);
    border-width: 7px 14px 7px 0;
    border-style: solid;
}

/* Màu từng bọt thoại */
.afc-bubble-orange {
    background: #ff8c00;
}
.afc-bubble-orange::before { border-color: transparent #ff8c00 transparent transparent; }

.afc-bubble-blue {
    background: #003366;
}
.afc-bubble-blue::before { border-color: transparent #003366 transparent transparent; }

/* Animations Keyframes */
@keyframes afc-phonering-alo-circle-anim {
  0% { transform: rotate(0) scale(0.6) skew(1deg); opacity: 0.1; }
  30% { transform: rotate(0) scale(0.8) skew(1deg); opacity: 0.5; }
  100% { transform: rotate(0) scale(1) skew(1deg); opacity: 0.1; }
}

@keyframes afc-phonering-alo-circle-fill-anim {
  0% { transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.2; }
  50% { transform: rotate(0) scale(1) skew(1deg); opacity: 0.3; }
  100% { transform: rotate(0) scale(0.7) skew(1deg); opacity: 0.2; }
}

@keyframes afc-phonering-alo-circle-img-anim {
  0% { transform: rotate(0) scale(1) skew(1deg); }
  10% { transform: rotate(-25deg) scale(1) skew(1deg); }
  20% { transform: rotate(25deg) scale(1) skew(1deg); }
  30% { transform: rotate(-25deg) scale(1) skew(1deg); }
  40% { transform: rotate(25deg) scale(1) skew(1deg); }
  50% { transform: rotate(0) scale(1) skew(1deg); }
  100% { transform: rotate(0) scale(1) skew(1deg); }
}

/* ==========================================================================
   Ẩn thành phần Absolute Footer
   ========================================================================== */
.absolute-footer {
    display: none !important;
}

/* ==========================================================================
   Giao diện UX Block Cột bên phải (Sidebar Sản phẩm & Tin tức)
   ========================================================================== */
/* 1. Thanh Tiêu đề đổ màu Xanh dương kín / Không gạch chân */
.blue-sidebar-title {
    background-color: #0066cc !important; /* Xanh dương */
    padding: 10px 15px !important;
    margin-bottom: 15px !important;
}
.blue-sidebar-title .section-title-main {
    background-color: transparent !important;
    color: #fff !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
.blue-sidebar-title b {
    display: none !important; /* Xóa vạch kẻ ngang mặc định */
}

/* 2. Ép danh sách UX Products thành dạng List dọc thu nhỏ */
.sidebar-list-products .product-small.box {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px dotted #ccc; /* Đường viền đứt quãng */
    padding-bottom: 12px;
    margin-bottom: 12px;
}
/* Xóa viền của SP cuối cùng */
.sidebar-list-products .col:last-child .product-small.box {
    border-bottom: none;
    margin-bottom: 0;
}
/* Thu nhỏ ảnh sang 1 bên */
.sidebar-list-products .box-image {
    width: 65px;
    min-width: 65px;
    margin-right: 12px;
}
/* Chỉnh thông số Text (Tên + Giá) */
.sidebar-list-products .box-text {
    text-align: left;
    padding: 0 !important;
}
.sidebar-list-products .product-title,
.sidebar-list-products .product-title a {
    font-size: 14px !important;
    color: #0066cc !important; /* Tên màu xanh */
    font-weight: 400 !important;
    line-height: 1.4;
    white-space: normal;
}
.sidebar-list-products .price,
.sidebar-list-products .price span,
.sidebar-list-products .price bdi,
.sidebar-list-products .price .amount,
.sidebar-list-products .price .austdoor-price-prefix,
.sidebar-list-products .price .austdoor-price-suffix {
    font-size: 14px !important;
    color: #dd0000 !important; /* Giá đỏ nổi bật */
    font-weight: 700 !important;
}
/* Ẩn các chi tiết thừa nếu có */
.sidebar-list-products .box-text .category { display: none; }

/* 3. Chỉnh màu nút Tìm Kiếm thành Xanh dương đồng bộ */
.searchform button[type="submit"] {
    background-color: #0066cc !important;
}
.searchform button[type="submit"]:hover {
    background-color: #004b9e !important;
}

/* 4. Định dạng giao diện riêng cho Tin Tức Nổi Bật (Cột phải) */
.sidebar-list-news .post-item {
    border-bottom: 1px dotted #ccc; /* Đường viền đứt quãng */
    padding-bottom: 15px;
    margin-bottom: 15px;
}
/* Xóa viền của bài viết cuối cùng */
.sidebar-list-news .col:last-child .post-item {
    border-bottom: none;
    margin-bottom: 0;
}
/* Ép lề văn bản vừa vặn, sát lề trái, cách ảnh một chút */
.sidebar-list-news .box-text {
    padding: 10px 0 0 10px !important; 
    text-align: left !important;
}
/* Cấu hình Tên bài viết: Nhỏ, màu xanh, bo dòng */
.sidebar-list-news .post-title,
.sidebar-list-news .post-title a {
    font-size: 14px !important;
    color: #0066cc !important; /* Xanh chuẩn mẫu */
    font-weight: 600 !important;
    line-height: 1.4;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Header (Đầu trang)
   ========================================================================== */
/* 1. Đổi màu dải băng chạy ngang dưới Header thành Đỏ */
.top-divider {
    border-top: 1px solid #ed1c24 !important; /* Màu Đỏ Austdoor */
    opacity: 1 !important; /* Xóa trạng thái mờ xỉn (0.1) của biến mặc định */
}

/* 2. Ép màu Trắng tuyệt đối, tăng kích thước và bỏ dấu chấm dòng Hotline trên Topbar */
.html_topbar_left, 
.html_topbar_left ul, 
.html_topbar_left li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.html_topbar_left a {
    position: relative; 
    top: -1px; /* Đẩy chữ lên xíu cho cân giữa khoảng xanh */
}
.html_topbar_left::marker,
.html_topbar_left li::marker {
    display: none !important;
    content: "" !important;
}
.html_topbar_left a,
.html_topbar_left a.text-white {
    color: #ffffff !important;
    opacity: 1 !important; /* Hủy cơ chế làm mờ 0.8 của link Header mặc định */
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important; /* Bung kích thước chữ to lên 14px */
}
.html_topbar_left a:hover {
    color: #fca311 !important; /* Hover ngả Cam tạo độ lướt */
}

/* ==========================================================================
   Category Page Header (Trang danh sách sản phẩm)
   ========================================================================== */
/* Ẩn đếm số kết quả và Bộ lọc sắp xếp trên toàn trang (thích hợp cho Shop Catalog) */
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

/* Biến Breadcrumb thành Tiêu đề chính giống mẫu trên trang danh mục (Shop/Categories) */
.archive.woocommerce .woocommerce-breadcrumb a,
.archive.woocommerce .woocommerce-breadcrumb .divider,
.search-results .woocommerce-breadcrumb a,
.search-results .woocommerce-breadcrumb .divider {
    display: none !important; /* Ẩn các link cha và dấu gạch xéo */
}

.archive.woocommerce .woocommerce-breadcrumb,
.search-results .woocommerce-breadcrumb {
    font-size: 24px !important;
    color: #0066cc !important; /* Màu xanh dương chuẩn mẫu */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding-bottom: 5px;
    padding-top: 15px;
    display: block;
    border: none !important;
}

/* ==========================================================================
   Product Grid Layout (Lưới sản phẩm chính)
   ========================================================================== */
/* Căn giữa Text và Tiêu đề sản phẩm màu xanh dương */
.products .product-small .box-text {
    text-align: center !important;
}

.products .product-small .product-title,
.products .product-small .product-title a {
    color: #0066cc !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}