/*
 * odoo_compat.css
 * Restores Odoo UI styles broken by Techzen template resets.
 * Load this AFTER style.css in layout_overrides.xml.
 */

/* ─── Restore Odoo navbar / top-bar layout ──────────────────── */
/* Techzen resets ul { margin:0; padding:0; list-style:none }
   which breaks Odoo's nav dropdowns and breadcrumbs.          */
.o_main_navbar ul,
.o_main_navbar li,
.o_website_navbar ul,
.o_website_navbar li,
.o_header_affix ul,
.o_header_affix li,
#wrapwrap .o_dropdown ul,
#wrapwrap .o_dropdown li {
    margin: revert;
    padding: revert;
    list-style-type: revert;
}

/* ─── Restore Odoo anchor colours ───────────────────────────── */
/* Techzen: a:hover { color: #F26F20 } – overrides Odoo links  */
.o_main_navbar a,
.o_main_navbar a:hover,
.o_website_editor a,
.o_website_editor a:hover,
.o_editable a,
.o_editable a:hover,
.modal a,
.modal a:hover,
.o_form_view a,
.o_form_view a:hover {
    color: revert;
    text-decoration: revert;
}

/* ─── Restore Odoo button styles ────────────────────────────── */
/* Techzen: button { display:inline-block } breaks Odoo flex btns */
.o_main_navbar button,
.modal button,
.o_form_view button,
.o_website_editor button,
.btn {
    display: revert;
    line-height: revert;
    cursor: pointer;
}

/* ─── Restore Odoo paragraph margins ────────────────────────── */
/* Techzen: p { margin: 0 } collapses Odoo form field spacing   */
.o_form_view p,
.modal p,
.o_website_editor p {
    margin: revert;
}

/* ─── Restore img vertical-align for Odoo widgets ───────────── */
/* Techzen: img { vertical-align: middle } can misalign avatars  */
.o_field_widget img,
.o_form_view img,
.o_kanban_record img {
    vertical-align: revert;
}

/* ─── Restore focus outline for Odoo accessibility ──────────── */
/* Techzen: *:focus { outline: none } removes Odoo's focus ring  */
.o_main_navbar *:focus,
.o_form_view *:focus,
.modal *:focus,
.o_website_editor *:focus {
    outline: revert;
}

/* ─── Restore Odoo website builder panel fonts ──────────────── */
/* Keep Odoo's own UI in system font, not Urbanist */
.o_website_editor .o_we_sidebar,
.o_website_editor .o_we_customize_panel,
.o_main_navbar,
.o_backend_navbar {
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 14px;
}

/* ─── Fix Odoo Website Editor (website builder) ─────────────── */
/* style.css sets body { overflow-x: hidden } which can interfere */
body.o_website_editor_opened {
    overflow-x: unset;
}

/* ─── Restore Bootstrap .row / .col negative margins ────────── */
/* rs-layouts.css sometimes resets container styles              */
#wrapwrap .container,
#wrapwrap .container-fluid {
    padding-right: var(--bs-gutter-x, 15px);
    padding-left: var(--bs-gutter-x, 15px);
}
#wrapwrap .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
}

/* ─── Sticky Navbar (Techzen) ───────────────────────────────── */
body #wrapwrap .rs-header .menu-area,
.rs-header .menu-area {
    background: transparent !important;
}

body #wrapwrap .rs-header .menu-sticky,
.rs-header .menu-sticky {
    transition: all 0.3s ease;
    padding: 0px 0;
    z-index: 999;
}

/* 1. Lúc chưa cuộn: chữ màu trắng */
body #wrapwrap .rs-header .menu-sticky:not(.sticky) .nav-menu .nav-item .nav-link {
    color: #ffffff !important;
}

/* Hover lúc chưa cuộn: màu cam */
body #wrapwrap .rs-header .menu-sticky:not(.sticky) .nav-menu .nav-item .nav-link:hover {
    color: #fd7e14 !important;
}

/* Kính lúp (Search Icon): nền trong suốt, icon màu cam (cho cả 2 trạng thái) */
body #wrapwrap .rs-header .search_icons,
body #wrapwrap .rs-header .search_icons i {
    background: transparent !important;
    background-color: transparent !important;
    color: #fd7e14 !important; /* Màu cam */
}

/* 2. Khi cuộn xuống: nền xanh biển đậm */
body #wrapwrap .rs-header .menu-sticky.sticky,
.rs-header .menu-sticky.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: block !important;
    background: #002559 !important; /* Nền xanh biển đậm */
    background-color: #002559 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* Chữ khi cuộn xuống: màu trắng, hover/active là màu cam (animation) */
body #wrapwrap .rs-header .menu-sticky.sticky .nav-menu .nav-item .nav-link {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

body #wrapwrap .rs-header .menu-sticky.sticky .nav-menu .nav-item .nav-link:hover,
body #wrapwrap .rs-header .menu-sticky.sticky .nav-menu .nav-item .nav-link.active {
    color: #fd7e14 !important; /* Màu cam */
}

/* 3. Phần thông tin liên hệ trên cùng (Topbar) */
body #wrapwrap .rs-header-topber {
    background: transparent;
}

body #wrapwrap .rs-header-topber .container {
    background-color: #fd7e14 !important; /* Nền cam */
    border-radius: 0 0 10px 10px; /* Bo góc dưới */
    padding: 5px 20px; /* Làm nhỏ lại padding */
    font-size: 13px; /* Làm nhỏ chữ */
}

body #wrapwrap .rs-header-topber .rs-flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

body #wrapwrap .rs-header-topber .rs-header-topber-contact ul {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
}

body #wrapwrap .rs-header-topber .rs-header-topber-social {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Ép không xuống dòng */
}

body #wrapwrap .rs-header-topber .rs-header-topber-social ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-left: 10px;
}

body #wrapwrap .rs-header-topber .rs-header-topber-contact span,
body #wrapwrap .rs-header-topber .rs-header-topber-contact a,
body #wrapwrap .rs-header-topber .rs-header-topber-contact i,
body #wrapwrap .rs-header-topber .rs-header-topber-social span,
body #wrapwrap .rs-header-topber .rs-header-topber-social a,
body #wrapwrap .rs-header-topber .rs-header-topber-social i {
    color: #ffffff !important;
}

/* Hover cho link và icon ở topbar */
body #wrapwrap .rs-header-topber .rs-header-topber-contact a:hover,
body #wrapwrap .rs-header-topber .rs-header-topber-social a:hover i {
    color: #f1f1f1 !important;
}

/* 4. Fix lỗi logo bị ẩn khi cuộn/không cuộn do CSS của Techzen (Techzen dùng 2 thẻ <a> cho 2 trạng thái) */
body #wrapwrap .rs-header .logo-area a {
    display: inline-block !important;
}

body #wrapwrap .rs-about-2__main-content .skltbs-tab-group .skltbs-tab.active {
    color: #fff !important;
    background: #2b8ff5 !important;
}

/* ─── Equal-height cards (Featured / Why Choose sections) ─────── */
/* Makes all cards in the same row stretch to the tallest card    */
.rs-featured-2 .row,
.rs-why-choose-2 .row {
    align-items: stretch;
}

.rs-featured-2 .row > [class*="col-"],
.rs-why-choose-2 .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.rs-featured-2__item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rs-featured-2__item .rs-content {
    flex: 1;
}

/* ─── Tighten card column gap for featured section ─────────────── */
.rs-featured-2 .row {
    --bs-gutter-x: 0.5rem;
}

.rs-featured-2 .row > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
}

/* ─── Compact featured card thumbnail & icon ─────────────────────── */
/* Giới hạn chiều cao ảnh để card không quá dài */
.rs-featured-2__item .rs-thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

/* Đẩy icon vòng tròn lên sát ảnh hơn */
.rs-featured-2__item .rs-content .rs-icon {
    top: -38px;
}

/* Giảm section padding cho gọn */
.rs-featured-2.pt-115 {
    padding-top: 60px !important;
}
.rs-featured-2.pb-120 {
    padding-bottom: 60px !important;
}

/* ─── Force left-align cho tiêu đề phần Đối tác ──────────────── */
.rs-featured-2 .col-lg-4 .rs-section-title,
.rs-featured-2 .col-lg-4 .rs-section-title .title,
.rs-featured-2 .col-lg-4 .rs-section-title .top-sub-heading {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* ─── Left-align Hero banner ─────────────────────────────────── */
.rs-banner-2__content {
    text-align: left !important;
}

.rs-banner-2__content .rs-sub-heading {
    justify-content: flex-start !important;
}

/* Màu cam cho "doanh nghiệp xây dựng" trong Hero */
.rs-banner-2__content .title span {
    color: #F26F20 !important;
    -webkit-text-fill-color: #F26F20 !important;
}