/*
Theme Name: luatsutran
Description: Giao dien website luatsutran
Theme URI: https://luatsutran.net
Author URI: https://vutruso.com
Template: flatsome
Version: 3.7
*/

/* ============================================================
   0. VARIABLES
   Flatsome đã có sẵn: --fs-color-primary: #872434,
   --fs-color-secondary: #C05530, --fs-color-alert, --fs-color-success
   → chỉ khai báo thêm biến chưa có, KHÔNG define lại primary
   ============================================================ */
:root {
    --lst-text: #333;
    --lst-muted: #6b7280;
    --lst-bg-soft: #faf7f5;
    --lst-border: #eee5e0;
    --lst-radius: 10px;
    --lst-shadow: 0 4px 20px rgba(135, 36, 52, .08);
    --lst-shadow-hover: 0 12px 32px rgba(135, 36, 52, .16);
}

.header-button a.button{color:#Fff}
.header-button a.success{color:#000}
.success {color: #000;}

/* ============================================================
   1. BASE & TYPOGRAPHY
   ============================================================ */
body {
    font-size: 16px !important;
    color: var(--lst-text);
}

b, strong { font-weight: 700; }

h1, h2, h3, h4, h5, h6,
.heading-font {
    color: #1f2430;
    letter-spacing: -0.01em;
}

/* Ép inline color teal/đỏ trong nội dung UX Builder về brand */
.home .ez-toc-section-end,
.home .ez-toc-section { display: none; }

/* ============================================================
   2. HEADER & TOP BAR
   ============================================================ */
.logo h1 { margin-bottom: 0; }

.header-top { border-bottom: 1px solid var(--lst-border); }

.html_topbar_left strong {
    color: var(--fs-color-primary);
    letter-spacing: .04em;
    font-size: .92em;
}

.form-flat input:not([type=submit]),
.form-flat select,
.form-flat textarea {
    background: #fff !important;
    border-color: #e9e3e5 !important;
}

/* ============================================================
   3. NAVIGATION
   ============================================================ */
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a {
    font-weight: 400;
    font-style: normal;
}

/* Underline gold khi hover/active */
.header-nav-main.nav > li > a { position: relative; }
.header-nav-main.nav > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 2px;
    background: #eb0a11;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}
.header-nav-main.nav > li.active > a::after,
.header-nav-main.nav > li > a:hover::after { transform: scaleX(1); }

.header-bottom-nav .nav-dropdown-default { padding: 4px !important; }
.header-bottom-nav .nav-dropdown.nav-dropdown-default > li > a {
    border-bottom: 1px dashed #aee4e638;
}

/* Pagination */
.nav-pagination > li > a { border-color: var(--fs-color-primary); }
.nav-pagination > li > .current,
.nav-pagination > li > a:hover {
    background-color: var(--fs-color-primary) !important;
    border-color: var(--fs-color-primary) !important;
}

.nav-previous,
.nav-next {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
}

ul.links li a { color: var(--fs-color-primary); }

/* ============================================================
   4. SECTION TITLES
   ============================================================ */
.section-title-container { margin-bottom: 2em; }
.section-title-main { color: var(--fs-color-primary); }

.section-title a {
    display: block;
    font-size: .66em;
    margin-left: auto;
    padding-left: 15px;
    font-family: sans-serif;
    font-weight: normal;
}

/* Normal */
.section-title-normal span {
    margin: 0;
    text-transform: unset;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
    width: 100%;
}
.section-title-normal .section-title-main::after {
    content: "";
    display: block;
    position: absolute;
    width: 125px;
    height: 7px;
    bottom: -5px;
    left: 0;
    margin: 0 auto;
}

/* Center */
.section-title-center span {
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    border-bottom: none;
    padding-bottom: 6px;
    width: 100%;
}
.section-title-center .section-title-main::after {
    content: "";
    display: block;
    position: absolute;
    width: 125px;
    height: 7px;
    bottom: -5px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* Bold (trang chủ): bỏ viền hộp, gạch gold */
.section-title-bold { justify-content: center; }
.section-title-bold b { display: none; }
.section-title-bold span {
    border: none;
    padding: .4em 1.2em;
    position: relative;
    font-size: 1.35em;
    color: #1f2430;
}
.section-title-bold span::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    width: 60px;
    height: 3px;
    border-radius: 2px;
}

/* H2 dạng .type.desktab (LĨNH VỰC HOẠT ĐỘNG, Đánh giá KH) */
h2.type.desktab {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    font-size: 1.8em;
}
h2.type.desktab::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 60px;
    height: 3px;
    border-radius: 2px;
}

/* Custom title layout */
.custom-title > p > a {
    float: left;
    line-height: 40.5px;
    display: block;
    margin-left: auto;
    padding-left: 15px;
    font-family: sans-serif;
    font-weight: normal;
}
.custom-title .section-title { float: left; width: 91.3%; }
.title-wrapper { font-size: 16px; }

/* ============================================================
   5. BUTTONS (global)
   ============================================================ */
.box-text .button { text-align: left; }

/* Nút alert dùng primary thay đỏ chói #b20000 */
.button.alert { background-color: var(--fs-color-primary); }
.button.alert:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .15); }

/* ============================================================
   6. HOME — HERO BANNER
   ============================================================ */
.home-banner .overlay {
    background: linear-gradient(180deg, rgba(20, 10, 12, .35) 0%, rgba(60, 15, 22, .55) 100%) !important;
}
.home-banner h1,
.home-banner h3 {
    text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
    line-height: 1.25;
}
.home-banner h3 { line-height: 46px; }

.home-banner .button.alert.is-outline,
.home-banner .button.white.is-outline {
    color: #fff;
    border-radius: 99px;
    padding: 0 1.8em;
    backdrop-filter: blur(2px);
    background: rgba(201, 162, 39, .12);
}

.home .icon-angle-right { position: relative; }

/* ============================================================
   8. HOME — LĨNH VỰC HOẠT ĐỘNG
   ============================================================ */
.linhvuc-hoatdong > .col > .col-inner {
    background: #fff;
    border-radius: var(--lst-radius);
    padding: 0 0 20px;
    overflow: hidden;
    height: 100%;
}

.linhvuc-hoatdong .img { margin-bottom: 0 !important; }
.linhvuc-hoatdong .img .img-inner { border-radius: 0; }
.linhvuc-hoatdong h3 {
    font-size: 1.1em;
    padding: 14px 16px 4px;
    margin-bottom: .2em;
    text-align: left !important;
    color: var(--fs-color-primary);
}
.linhvuc-hoatdong ul { padding: 0 16px; margin-bottom: 0; margin-left: -10px;}
.linhvuc-hoatdong li {
    list-style: none;
    position: relative;
    font-size: .88em;
    color: var(--lst-muted);
    line-height: 1.55;
    padding: 4px 0 4px 16px;
    margin: 0 0 0 1em !important;
}
.linhvuc-hoatdong li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 11px;
    left: 0;
    background-color: var(--fs-color-primary)
}
.linhvuc-hoatdong li:hover { color: var(--fs-color-primary); cursor: default; }

/* ============================================================
   9. "06 LÝ DO" — scope vào .tai-sao-chon
   ============================================================ */
.tai-sao-chon .icon-box.featured-box h3 {
    font-size: 1.02em;
    color: #1f2430;
    margin-bottom: .4em;
}

/* ============================================================
   10. HOME — TESTIMONIALS
   ============================================================ */
.testimonial-box {
    background: var(--lst-bg-soft);
    border: 1px solid var(--lst-border);
    border-radius: var(--lst-radius);
    padding: 26px 24px;
    position: relative;
}
.testimonial-box::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    right: 20px;
    font-size: 70px;
    line-height: 1;
    color: rgba(135, 36, 52, .12);
    font-family: Georgia, serif;
}
.testimonial-box .star-rating::before,
.testimonial-name { color: var(--fs-color-primary); }
.testimonial-company { color: var(--lst-muted); font-size: .88em; }

.flickity-prev-next-button { color: var(--fs-color-primary); }
.slider-nav-circle .flickity-prev-next-button svg { border-color: var(--fs-color-primary); }

/* ============================================================
   11. ĐỘI NGŨ — scope vào .nhan-su (thay #section_917025995)
   ============================================================ */
.nhan-su .section-bg-overlay {
    background: linear-gradient(160deg, rgba(107, 28, 41, .93) 0%, rgba(135, 36, 52, .85) 100%) !important;
}
.nhan-su .box {
    border-radius: var(--lst-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
}
.nhan-su .box-image img {
    border-radius: var(--lst-radius) var(--lst-radius) 0 0;
    transition: transform .4s;
}
.nhan-su .box:hover .box-image img { transform: scale(1.04); }
.nhan-su .box-text { padding: 14px 10px 18px; }
.nhan-su .box-text h4 {
    color: #fff;
    font-size: 1em;
    margin-bottom: 2px;
}
.nhan-su .box-text p {
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 0;
}
.nhan-su .section-title-bold span { color: #fff !important; }

/* ============================================================
   12. BLOG CARDS (trang chủ + archive)
   ============================================================ */
.box-blog-post .box-text { padding: 10px 10px 10px; }
.box-blog-post .post-title a {
    font-size: .95rem;
    line-height: 1.45;
    color: #1f2430;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.75em;
    transition: color .2s;
}
.box-blog-post .post-title a:hover { color: var(--fs-color-primary); }
.box-blog-post .is-divider {
    height: 2px;
    max-width: 36px;
}
.from_the_blog_excerpt { font-size: .87em; color: var(--lst-muted); }
.box-blog-post .button.is-link { color: var(--fs-color-primary); }

/* Layout card: ngày lên trên tiêu đề */
.blog-post-inner { display: flex; flex-direction: column; }
.blog-post-inner .post-meta {
    order: -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--lst-muted);
    font-size: .8em;
}
.blog-post-inner .post-meta::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4M16 2v4M3 10h18'/><rect x='3' y='4' width='18' height='18' rx='2'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4M16 2v4M3 10h18'/><rect x='3' y='4' width='18' height='18' rx='2'/></svg>") center/contain no-repeat;
}

/* Mũi tên "Xem thêm" */
.blog-post-inner .button.is-link::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    vertical-align: middle;
    background-color: currentColor;
    transition: transform .3s;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>") center/contain no-repeat;
}
.blog-post-inner .button.is-link:hover::after { transform: translateX(4px); }

/* ============================================================
   13. ENTRY META (single post)
   ============================================================ */
.entry-meta.uppercase.is-xsmall {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #888;
}

.entry-meta .posted-on,
.entry-meta .byline,
.entry-meta .consultant,
.entry-meta .cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.entry-meta svg {
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0.6;
    display: block;
}

.entry-meta a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}
.entry-meta a:hover { color: var(--fs-color-primary); }

.entry-meta .consultant-name { color: #555; font-weight: 600; }

/* Divider dọc */
.entry-meta .posted-on::after,
.entry-meta .byline::after,
.entry-meta .consultant::after {
    content: '';
    width: 1px;
    height: 12px;
    background: #ddd;
    margin-left: 8px;
}

/* Category pill */
.entry-meta .cat a {
    display: inline-block;
    padding: 4px 12px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.04em;
    padding-left: 0;
}
.entry-meta .cat a:hover { background: #ececec; color: #333; }

@media (max-width: 549px) {
    .entry-meta.uppercase.is-xsmall { gap: 8px 12px; }
    .entry-meta .posted-on::after,
    .entry-meta .byline::after,
    .entry-meta .consultant::after { display: none; }
}

/* ============================================================
   14. BLOG ARCHIVE & CATEGORY
   ============================================================ */
.archive .page-title { text-align: left; padding-left: 1%; }
.archive .product-title {
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.archive .price { font-size: 18px; font-weight: 700; }
.archive #page-breadcrumbs { padding-left: 40px !important; }
.category .large-8 { padding: 0 43px 30px; }
.page-title-inner h1 { margin-top: 8px; }
.page-title-inner .woocommerce-result-count,
.page-title-inner .woocommerce-ordering { display: none !important; }
.archive .post-item img { border-radius: 8px; }

/* ============================================================
   15. SINGLE POST
   ============================================================ */
.blog-single .large-8,
.post-sidebar { padding: 0 15px 15px !important; }

.single-post .entry-header-text-top { padding-bottom: 0; margin-bottom: 0; }
.single-post .entry-content { padding-top: 15px; }
.single-post .is-divider { background-color: var(--fs-color-primary) !important; }
.single-post .entry-meta { margin-bottom: 12px; }
.single .entry-header span { text-transform: capitalize !important; }
h1.entry-title.mb { margin-bottom: 15px; }

.single-post .slider-nav-outside .flickity-prev-next-button.previous { right: 97%; }
.single-post .slider-nav-outside .flickity-prev-next-button.next { left: 97%; }

.updated:not(.published) { display: block; }

.relatedthumb img,
.radius-8 img,
.entry-content img,
.entry-image img { border-radius: 8px; }

.related_posts h3 { line-height: 19px; margin-top: 7px; }

/* ============================================================
   16. WIDGET & SIDEBAR
   ============================================================ */
.widget .is-divider {
    margin-top: 3px;
    border-bottom: 2px solid var(--fs-color-primary);
    background: transparent;
}
.widget .badge-outline .badge-inner { border-radius: 8px; }
.post-sidebar .badge,
.flatsome_recent_posts .badge { height: 4.8em; width: 4.8em; }

/* ============================================================
   17. FORM LIÊN HỆ (home)
   ============================================================ */
.home-contact .col > .col-inner[style*="background-color"] {
    border-radius: var(--lst-radius);
    box-shadow: 0 16px 48px rgba(107, 28, 41, .35);
}

@media (max-width: 849px) {
    .home-contact .col > .col-inner[style*="background-color"] {
        padding: 22px 18px !important;
    }
}

.home-contact input[type=text],
.home-contact input[type=email],
.home-contact input[type=tel],
.home-contact textarea {
    background: rgba(255, 255, 255, .95);
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: none;
    margin-bottom: 12px;
    transition: border .2s, box-shadow .2s;
}
.home-contact input:focus,
.home-contact textarea:focus {
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .25);
}

.home-contact .wpcf7-submit {
    float: right;
    margin-right: 0;
    color: #1f2430 !important;
    border-radius: 99px;
    padding: 0 2.2em;
    font-weight: 700;
    transition: filter .2s, transform .2s;
    background-color: #fff;
}
.home-contact .wpcf7-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

/* ============================================================
   18. FOOTER & BACK TO TOP
   ============================================================ */
.footer-wrapper .section.has-block {
    background: var(--lst-bg-soft) !important;
    border-top: 3px solid var(--fs-color-primary);
}
.ux-menu-title { color: var(--fs-color-primary); }
.ux-menu-link__link {
    border-bottom: none;
    min-height: 2.2em;
    color: var(--lst-muted);
    transition: color .2s, padding-left .2s;
}
.ux-menu-link__link:hover { color: var(--fs-color-primary); padding-left: 4px; }

.absolute-footer {
    padding: 10px 0;
    background: var(--fs-color-primary) !important;
    color: rgba(255, 255, 255, .85);
}
.absolute-footer strong { color: #fff; }

.social-icons .button.icon {
    border-color: var(--fs-color-primary);
    color: var(--fs-color-primary);
}

.back-to-top {
    background-color: var(--fs-color-primary) !important;
    color: #fff !important;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(135, 36, 52, .4);
}

/* ============================================================
   19. MISC / DECORATIVE
   ============================================================ */
.section-anh .img-inner::after,
.section-du-an .box-image::after {
    content: "";
    display: inline-block;
    background: #fff;
    width: 40px;
    height: 40px;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 9;
}

/* ============================================================
   20. RESPONSIVE
   ============================================================ */
@media (max-width: 849px) {
    .linhvuc-hoatdong h3 { font-size: 1em; }
    .section-title-bold span { font-size: 1.15em; }
    #col-1487574121 > .col-inner { padding: 22px 18px !important; }
}
@media (max-width: 549px) {
    .home-banner h1 { font-size: 1.25em; }
    .home-banner h3 { line-height: 1.3; }
    .linhvuc-hoatdong li { font-size: .84em; }
    .icon-box.featured-box { padding: 18px 16px; }
}