/* =======================================================
   KASACO — Modern UI Refresh
   Loaded last — overrides via specificity + !important
   ======================================================= */

/* ── GLOBAL / TYPOGRAPHY ── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2d2d2d;
}

/* ── LOADING SCREEN — branded, replaces default purple/blue equalizer ── */
#pre-loader {
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #fdf3ea 100%) !important;
}
#ks-pl-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Soft pulsing glow behind the logo */
#ks-pl-box::before {
    content: '';
    position: absolute;
    top: 30px; left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(245,130,41,0.16) 0%, rgba(245,130,41,0) 72%);
    border-radius: 50%;
    z-index: -1;
    animation: ksPlGlow 2.2s ease-in-out infinite;
}
/* File logo hiện tại (kasaco) có khoảng trắng dư ~49px bên phải trong
   canvas gốc (201x66, chữ chỉ chiếm 152x46) — crop đúng phần chữ để
   canh giữa khớp với thanh loading bên dưới, thay vì canh giữa theo
   cả khung ảnh rỗng. Tỉ lệ giữ nguyên, phóng to lên ~2x. */
#ks-pl-logo-wrap {
    width: 302px;
    height: 92px;
    overflow: hidden;
    opacity: 0;
    position: relative;
    left: 34px;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.08));
    animation: ksPlFade 0.6s ease forwards;
}
#ks-pl-logo {
    display: block;
    width: 400px;
    height: auto;
}
/* Spinner ring — replaces the flat sliding bar */
.ks-pl-bar {
    width: 34px;
    height: 34px;
    margin: 34px auto 0;
    position: relative;
    left: -6px;
    background: none;
    border-radius: 50%;
    border: 3px solid #f6e2cc;
    border-top-color: #F58229;
    opacity: 0;
    animation: ksPlFadeIn 0.6s 0.15s ease forwards, ksPlSpin 0.85s linear infinite;
}
.ks-pl-bar span { display: none; }
@keyframes ksPlFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* opacity-only fade — kept separate from ksPlFade so it never fights
   the spinner's own rotate() animation on the shared `transform` property */
@keyframes ksPlFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ksPlSpin {
    to { transform: rotate(360deg); }
}
@keyframes ksPlGlow {
    0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.10); }
}

/* ── TOP BAR ── */
div.top_head {
    background: #fafafa !important;
    border-bottom: 1px solid #eeeeee;
}
div.slogan {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #888;
    font-style: italic;
}
div#lang a {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── HEADER INFO BOXES — giữ nguyên layout gốc, chỉ đổi màu icon ── */
div.box_info .fa {
    color: #F58229 !important;
    font-size: 15px !important;
    vertical-align: middle;
}

/* ── HEADER SPACING — compact ── */
div#header > div.wapper {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
div#header .logo_head {
    margin-bottom: 6px !important;
}
div.info_head {
    display: none !important;
}
div#lienket {
    padding-top: 6px !important;
}
div#lienket {
    padding-top: 18px !important;
}

/* ── SOCIAL ICONS IN HEADER ── */
div#lienket a img {
    border-radius: 4px;
    transition: opacity 0.2s, transform 0.2s !important;
}
div#lienket a img:hover {
    opacity: 0.75;
    transform: translateY(-2px);
}

/* ── NAVIGATION — white header, dark text, orange accents ── */
div#menu {
    background: transparent !important;
    box-shadow: none !important;
}
/* Keep generic padding for dropdown items (non-specific, gets overridden for top-level) */
div#menu ul li a {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 8px 16px !important;
    border-bottom: none !important;
    transition: color 0.18s, background 0.18s !important;
}

/* Dropdown items */
div#menu ul li ul {
    width: 220px !important;
    /* Explicitly position below the nav item — needed because
       li has display:flex which breaks position:absolute auto placement */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    border-top: 3px solid #F58229 !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    visibility: visible !important;
    z-index: 9999 !important;
}
/* Force dropdown li to stack vertically (style.css has float:left on all li) */
div#menu ul li ul li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 0 !important;
}
div#menu ul li ul li a {
    background: #fff !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: normal !important;
    padding: 11px 16px !important;
    border-left: 3px solid transparent !important;
    display: block !important;
    transition: background 0.15s, border-left-color 0.15s, color 0.15s !important;
}
div#menu ul li ul li a:hover {
    background: #fff8f3 !important;
    color: #F58229 !important;
    border-left-color: #F58229 !important;
}

/* ── "ĐĂNG KÝ TƯ VẤN" BUTTON ── */
div.dktv {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: 25px !important;
    padding: 9px 20px !important;
    margin: 0 0 0 12px !important;
    background: #F58229 !important;
    color: #fff !important;
    border: 2px solid #F58229 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    /* Override style.css width:12% which clips the text */
    width: auto !important;
    float: none !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    transition: background 0.18s, box-shadow 0.18s !important;
    box-shadow: 0 2px 12px rgba(245,130,41,0.30) !important;
}
div.dktv:hover {
    background: #d95e10 !important;
    border-color: #d95e10 !important;
    box-shadow: 0 4px 18px rgba(245,130,41,0.45) !important;
}

/* ── SECTION TITLES ── */
div.tieude_giua {
    margin-bottom: 35px !important;
    padding-bottom: 18px !important;
    position: relative !important;
}
div.tieude_giua::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: #F58229;
    border-radius: 2px;
}
div.tieude_giua span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #1a1a1a !important;
}
div.tieude_giua h2 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #1a1a1a !important;
    margin: 0;
}
div.tt1 {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #555 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* Preserve white titles on dark bg sections */
div.w_giaiphap .tieude_giua span,
div.w_giaiphap div.tt1,
div.w_baiviet .tieude_giua span {
    color: #fff !important;
}
div.w_giaiphap .tieude_giua::after {
    background: rgba(255,255,255,0.7) !important;
}

/* ── PRODUCT / CATEGORY CARDS ── */
div.item {
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #eeeeee !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
div.item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.11) !important;
}
div.item a img:hover {
    transform: scale(1.05) !important;
}
div.sp_name a,
div.sp_name {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #222 !important;
    text-transform: none !important;
}

/* ── SERVICE (DỊCH VỤ) CARDS ── */
/* Prevent collapse while images load — stops hero slider from
   bleeding through when sl_dichvu has zero-height children. */
div.sl_dichvu {
    background: #fff !important;
    min-height: 170px !important;
}
div.sl_dichvu .box_dichvu {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
    transition: transform 0.25s, box-shadow 0.25s !important;
}
div.sl_dichvu .box_dichvu:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}
div.name_dv a {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 4px !important;
}

/* "WHY US" (LUACHON) text styling lives in section 4 (WHY CHOOSE US)
   below — div.name_luachon a / div.box_luachon div.mta. */

/* ── TEAM MEMBER CARDS ── */
div.box_nhanvien {
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
    border: 1px solid #eeeeee !important;
    transition: transform 0.25s, box-shadow 0.25s !important;
}
div.box_nhanvien:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.12) !important;
}
div.name_nv {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #1a1a1a !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ── NEWS / BLOG CARDS ── */
div.box_news {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.22s, transform 0.22s;
    margin-bottom: 22px;
}
div.box_news:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.09);
    transform: translateY(-3px);
}
div.box_news h3 a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    font-size: 15px !important;
}
div.box_news h3 a:hover {
    color: #F58229 !important;
}

/* ── "XEM THÊM" / CTA BUTTONS ── */
a.xt {
    border-radius: 25px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.04em !important;
    padding: 11px 30px !important;
    transition: background 0.2s, transform 0.18s, box-shadow 0.18s !important;
    display: inline-block !important;
}
a.xt:hover {
    background: #d96e1a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(245,130,41,0.38) !important;
}
a.xemthem {
    border-radius: 25px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.04em !important;
    padding: 10px 28px !important;
    transition: background 0.2s, transform 0.18s !important;
}
a.xemthem:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
div#wap_footer {
    background: linear-gradient(160deg, #1c1c1c 0%, #111 100%) !important;
    border-top: 3px solid #F58229 !important;
    position: relative !important;
}
div.footer {
    padding: 56px 0 64px !important;
}

/* ── Flex columns ── */
div.footer > div.wapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 48px !important;
    align-items: flex-start !important;
}
div#main_footer {
    width: 230px !important;
    min-width: 200px !important;
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
}
div.w_blog,
div.w_twitter,
div.w_dknt {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
}

/* ── Column headings ── */
div.tt_footer {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    display: block !important;
    position: relative !important;
    border-bottom: none !important;
}
div.tt_footer::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important;
    width: 100% !important; height: 1px !important;
    background: rgba(255,255,255,0.08) !important;
}
div.tt_footer::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important;
    width: 36px !important; height: 2px !important;
    background: #F58229 !important;
    border-radius: 2px !important;
    z-index: 1 !important;
}

/* ── Company info text (from DB noidung) ── */
div#main_footer p {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: #888 !important;
    line-height: 1.85 !important;
    margin: 0 0 14px !important;
}
div#main_footer strong,
div#main_footer b {
    color: #ccc !important;
}

/* ── Footer social icons ── */
div#lienket_f {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 22px !important;
}
div#lienket_f a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.05) !important;
    transition: border-color 0.22s, background 0.22s, transform 0.22s !important;
    overflow: hidden !important;
}
div#lienket_f a img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.5 !important;
    transition: opacity 0.22s !important;
    margin: 0 !important;
}
div#lienket_f a:hover {
    border-color: #F58229 !important;
    background: rgba(245,130,41,0.15) !important;
    transform: translateY(-3px) !important;
}
div#lienket_f a:hover img {
    opacity: 1 !important;
}

/* ── Footer links ── */
ul.ul_footer {
    padding: 0 !important;
    margin: 0 !important;
}
ul.ul_footer li {
    padding: 7px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
ul.ul_footer li:last-child {
    border-bottom: none !important;
}
/* Clear div is a float artifact — hide inside flex footer */
div.footer > div.wapper > .clear {
    display: none !important;
}
ul.ul_footer li a {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: #888 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.18s !important;
}
ul.ul_footer li a::before {
    content: '›' !important;
    color: #F58229 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.18s, transform 0.18s !important;
}
ul.ul_footer li a:hover {
    color: #F58229 !important;
}
ul.ul_footer li a:hover::before {
    opacity: 1 !important;
    transform: translateX(2px) !important;
}
div.w_twitter ul.ul_footer li a {
    color: #888 !important;
}

/* ── Footer contact form ── */
#frm_dknt input[type='text'],
#frm_dknt textarea {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    color: #ddd !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    transition: border-color 0.2s, background 0.2s !important;
}
#frm_dknt input[type='text']:focus,
#frm_dknt textarea:focus {
    border-color: #F58229 !important;
    background: rgba(255,255,255,0.09) !important;
    outline: none !important;
}
#frm_dknt input[type='text']::placeholder,
#frm_dknt textarea::placeholder {
    color: #555 !important;
}
#frm_dknt textarea {
    resize: vertical !important;
    min-height: 90px !important;
}
#frm_dknt input[type='button'] {
    display: inline-block !important;
    background: linear-gradient(135deg, #F58229 0%, #d96e1a 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 32px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: opacity 0.2s, transform 0.15s !important;
}
#frm_dknt input[type='button']:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
}

/* ── COPYRIGHT BAR ── */
div.copyright {
    background: #0a0a0a !important;
    border-top: 1px solid #1f1f1f !important;
    padding: 18px 0 !important;
}
div.copyright .wapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
div.copy {
    float: none !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #444 !important;
}
div.copy span {
    color: #F58229 !important;
    font-weight: 600 !important;
}

/* ── Contact info bar — full-width row below the 4 columns ── */
div.ks-footer-contact {
    /* flex-basis:100% forces a new row in the wrap container */
    flex-basis: 100% !important;
    order: 99 !important;
    display: flex !important;
    gap: 20px !important;
    padding-top: 36px !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    float: none !important;
    width: 100% !important;
}
div.ks-footer-contact .box_info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 22px 16px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    width: auto !important;
    vertical-align: top !important;
    transition: border-color 0.2s, background 0.2s !important;
}
div.ks-footer-contact .box_info:hover {
    border-color: rgba(245,130,41,0.3) !important;
    background: rgba(245,130,41,0.05) !important;
}
div.ks-footer-contact .box_info .fa {
    color: #F58229 !important;
    font-size: 22px !important;
    margin-bottom: 10px !important;
    display: block !important;
}
div.ks-footer-contact .box_info span {
    display: block !important;
    color: #ddd !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    margin-top: 5px !important;
}
div.ks-footer-contact .clear {
    display: none !important;
}

/* ── Floating social buttons (left side) ── */
#ks-social-float {
    position: fixed;
    left: 16px;
    bottom: 120px;
    z-index: 199999;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 28px;
    padding: 10px 8px;
    gap: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
}
.ks-sf-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: transform 0.18s, filter 0.18s;
    flex-shrink: 0;
    overflow: hidden;
}
.ks-sf-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
    text-decoration: none !important;
}
.ks-sf-fb {
    background: #1877f2;
}
.ks-sf-fb .fa {
    color: #fff;
    font-size: 19px;
}
.ks-sf-divider {
    width: 24px;
    height: 1px;
    background: rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.ks-sf-zalo {
    background: transparent;
    padding: 0;
}

/* ── Footer social links (company column) ── */
div.ks-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.ks-fs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.18s, transform 0.15s;
    color: #fff !important;
}
.ks-fs-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    text-decoration: none !important;
}
.ks-fs-fb {
    background: #1877f2;
}
.ks-fs-zalo {
    background: #0068FF;
}
.ks-fs-fb .fa {
    font-size: 14px;
}

/* ── Contact info in footer Liên hệ column ── */
ul.ks-footer-contact-list {
    list-style: none !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}
ul.ks-footer-contact-list li {
    color: #bbb !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    background: none !important;
}
ul.ks-footer-contact-list li .fa {
    color: #F58229 !important;
    width: 16px !important;
    margin-right: 7px !important;
    font-size: 13px !important;
}

/* ── Hide footer social icons (all links lead back to Kasaco) ── */
div#main_footer div#lienket_f {
    display: none !important;
}

/* ══════════════════════════════════════════════
   COMPACT SINGLE-ROW HEADER
   Glass-white, logo left, orange nav text, CTA far right.
   JS: moves #menu then .dktv to end of inner wapper.
══════════════════════════════════════════════ */
@media screen and (min-width: 769px) {
div#header {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 20px rgba(0,0,0,0.06) !important;
}
div#header > div.wapper {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    min-height: 72px !important;
}

/* ── Logo ── */
div#header div.logo_head {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 10px 36px 10px 0 !important;
    margin: 0 !important;
    float: none !important;
}
div#header div.logo_head img {
    max-height: 52px !important;
    width: auto !important;
    display: block !important;
}

/* Hide elements not needed in the single row */
div#header div#lienket           { display: none !important; }
div#header > div.wapper > .clear { display: none !important; }

/* ── #menu: transparent, fills the right side ── */
div#menu,
div#header > div.wapper > div#menu {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    float: none !important;
    position: relative !important;
    /* Kill bg_menu.png from style.css */
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Inner div.wapper: strip centering, become flex row */
div#header > div.wapper > div#menu > div.wapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 32px 0 0 !important;
    margin: 0 !important;
    height: 100% !important;
    background: none !important;
}
div#header > div.wapper > div#menu > div.wapper > .clear {
    display: none !important;
}

/* ── Top-level nav list ── */
div#header > div.wapper > div#menu > div.wapper > ul.main_nav {
    flex: 1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: visible !important;
    list-style: none !important;
    width: auto !important;
    float: none !important;
}
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li {
    display: flex !important;
    align-items: stretch !important;
    float: none !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Nav links — orange text, orange underline on active */
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
    color: #F58229 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    border-bottom: 3px solid transparent !important;
    transition: color 0.18s, background 0.18s, border-color 0.18s !important;
}
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li > a:hover {
    color: #d95e10 !important;
    background: rgba(245,130,41,0.06) !important;
}
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li > a.active,
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li > a.active2 {
    color: #d95e10 !important;
    font-weight: 700 !important;
    border-bottom-color: #F58229 !important;
    background: rgba(245,130,41,0.06) !important;
}
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li > a.active,
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li > a.active2 {
    color: #F58229 !important;
    font-weight: 700 !important;
    border-bottom-color: #F58229 !important;
    background: transparent !important;
}

/* Mũi tên ▾ cho các mục có dropdown */
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li:has(> ul) > a::after {
    content: '\25BE';
    display: inline-block !important;
    margin-left: 4px !important;
    font-size: 1em !important;
    vertical-align: middle !important;
    opacity: 0.75 !important;
    transition: transform 0.2s !important;
}
div#header > div.wapper > div#menu > div.wapper > ul.main_nav > li:has(> ul):hover > a::after {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
}

/* ── CTA Button (order: 2, far right) ── */
div#header > div.wapper > div#menu > div.wapper > div.dktv {
    order: 2 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin-left: 20px !important;
}
} /* /min-width:769px — compact single-row header (desktop/tablet only) */

/* ══════════════════════════════════════════════
   MOBILE HEADER — clean flex bar: hamburger | logo
   Old theme had 4 overlapping breakpoints (1024/960/
   768/460px) fighting over .logo_head margin/padding
   and a position:fixed hamburger outside any flow —
   hence the oversized, lopsided white header. Reset
   everything in one place, !important wins regardless
   of which legacy breakpoint also matches.
══════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    div#header {
        background: #fff !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05) !important;
        text-align: left !important;
    }
    div#header > div.wapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 62px !important;
        padding: 9px 16px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    div#header > div.wapper > .clear { display: none !important; }
    div#header div#lienket,
    div#header div.info_head { display: none !important; }

    /* Logo — centered, compact */
    div#header div.logo_head {
        position: static !important;
        float: none !important;
        width: auto !important;
        max-width: 65% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
    div#header div.logo_head img {
        max-height: 40px !important;
        max-width: 100% !important;
        width: auto !important;
        display: inline-block !important;
    }

    /* Hamburger trigger — modern rounded square, vertically centered at left */
    div#menu_mobi > div.header {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
    }
    div#menu_mobi > div.header a.hien_menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        background: linear-gradient(180deg, #F58229, #d96e1a) !important;
        border-radius: 10px !important;
        box-shadow: 0 3px 10px rgba(245,130,41,0.35) !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.15s !important;
    }
    div#menu_mobi > div.header a.hien_menu:active { transform: scale(0.93) !important; }
    /* 3 crisp CSS bars instead of the blurry old PNG sprite */
    div#menu_mobi > div.header a.hien_menu::before {
        content: '' !important;
        display: block !important;
        width: 16px !important;
        height: 2px !important;
        background: #fff !important;
        border-radius: 2px !important;
        box-shadow: 0 5px 0 #fff, 0 -5px 0 #fff !important;
    }
}

/* ══════════════════════════════════════════════
   MOBILE SLIDE-OUT MENU (jQuery mmenu) — match
   the white/orange-accent desktop nav language
   instead of the plugin's default solid-orange theme.
══════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    /* Panel surface */
    .mm-menu {
        background: #fff !important;
        color: #2d2d2d !important;
        box-shadow: 2px 0 28px rgba(0,0,0,0.20) !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    }

    /* Navbar header — brand gradient, white text */
    .mm-menu .mm-navbar {
        background: linear-gradient(135deg, #d96e1a 0%, #F58229 60%, #f79a42 100%) !important;
        border-bottom: none !important;
        height: 56px !important;
        padding: 0 50px !important;
    }
    .mm-menu > .mm-panel.mm-hasnavbar { padding-top: 56px !important; }
    .mm-menu .mm-navbar > * { padding: 18px 0 !important; }
    .mm-menu .mm-navbar .mm-title {
        font-weight: 700 !important;
        font-size: 15.5px !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
    }
    .mm-menu .mm-navbar .mm-btn { width: 50px !important; height: 56px !important; }
    .mm-menu .mm-navbar .mm-btn:before,
    .mm-menu .mm-navbar .mm-btn:after {
        border-color: rgba(255,255,255,0.85) !important;
    }

    /* List items */
    .mm-menu .mm-listview { font-size: 15px !important; }
    .mm-menu .mm-listview > li > a,
    .mm-menu .mm-listview > li > span {
        padding: 16px 20px !important;
        font-weight: 600 !important;
        color: #2d2d2d !important;
        border-left: 3px solid transparent !important;
        transition: background 0.15s, color 0.15s, border-left-color 0.15s !important;
    }
    .mm-menu .mm-listview > li:not(.mm-divider):after {
        border-color: #f0f0f0 !important;
        left: 20px !important;
    }
    .mm-menu .mm-listview a:hover,
    .mm-menu .mm-listview > li.mm-selected > a:not(.mm-next) {
        background: #fff8f3 !important;
        color: #F58229 !important;
        border-left-color: #F58229 !important;
    }
    .mm-menu .mm-listview > li.mm-selected > span {
        background: #fff8f3 !important;
    }

    /* Submenu arrow column + chevrons */
    .mm-menu .mm-listview .mm-next:before {
        border-color: #f0f0f0 !important;
    }
    .mm-menu .mm-listview > li .mm-next:after,
    .mm-menu .mm-listview > li .mm-arrow:after {
        border-color: #ccc !important;
    }
    .mm-menu .mm-listview > li .mm-prev:before {
        border-color: #fff !important;
    }

    /* Counter — orange pill badge instead of a plain number */
    .mm-menu em.mm-counter {
        color: #fff !important;
        background: #F58229 !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        min-width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
        text-align: center !important;
        border-radius: 10px !important;
        padding: 0 6px !important;
        margin-top: -10px !important;
        right: 48px !important;
    }
}

/* ── Footer responsive ── */
@media screen and (max-width: 900px) {
    div.footer > div.wapper {
        flex-wrap: wrap !important;
        gap: 32px !important;
    }
    div#main_footer { width: 100% !important; }
    div.w_blog, div.w_twitter, div.w_dknt {
        min-width: calc(50% - 16px) !important;
    }
}
@media screen and (max-width: 560px) {
    div.w_blog, div.w_twitter, div.w_dknt {
        min-width: 100% !important;
    }
}

/* ── FORMS ── */
div.frm_lienhe .item_lienhe input[type='text'],
div.frm_lienhe .item_lienhe input[type='email'],
div.frm_lienhe .item_lienhe textarea,
div.frm_lienhe .item_lienhe input[type='password'],
.dknt input[type='text'],
.dknt input[type='email'],
.dknt textarea {
    border-radius: 8px !important;
    border: 1.5px solid #e0e0e0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    color: #333 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
}
div.frm_lienhe .item_lienhe input[type='text']:focus,
div.frm_lienhe .item_lienhe textarea:focus,
.dknt input[type='text']:focus,
.dknt textarea:focus {
    border-color: #F58229 !important;
    box-shadow: 0 0 0 3px rgba(245,130,41,0.10) !important;
    outline: none !important;
}
input[type='submit'],
button[type='submit'] {
    border-radius: 25px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    transition: background 0.2s, transform 0.18s !important;
}
input[type='submit']:hover,
button[type='submit']:hover {
    transform: translateY(-1px) !important;
}

/* ── PAGINATION ── */
.pages_ajax li a {
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
}

/* ── BACK TO TOP ── */
#toptop {
    background: #F58229 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(245,130,41,0.40) !important;
    width: 44px !important;
    height: 44px !important;
    bottom: 28px !important;
    right: 22px !important;
}
#toptop:hover {
    background: #d96e1a !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(245,130,41,0.50) !important;
}
#toptop i {
    color: #fff !important;
    font-size: 18px !important;
}

/* ── BREADCRUMB ── */
.breadcrumb {
    background: #fafafa !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
}
.breadcrumb a {
    color: #F58229 !important;
}

/* ── PHONE WIDGET (coccoc-alo) — rebrand to orange ── */
.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-circle {
    border-color: #F58229 !important;
}
.coccoc-alo-phone.coccoc-alo-green:hover .coccoc-alo-ph-circle,
.coccoc-alo-phone.coccoc-alo-green.coccoc-alo-hover .coccoc-alo-ph-circle {
    border-color: #d96e1a !important;
    opacity: .6 !important;
}
.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-circle-fill {
    background-color: rgba(245,130,41,0.45) !important;
}
.coccoc-alo-phone.coccoc-alo-green:hover .coccoc-alo-ph-circle-fill,
.coccoc-alo-phone.coccoc-alo-green.coccoc-alo-hover .coccoc-alo-ph-circle-fill {
    background-color: rgba(245,130,41,0.65) !important;
}
.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-img-circle {
    background-color: #F58229 !important;
}
.coccoc-alo-phone.coccoc-alo-green:hover .coccoc-alo-ph-img-circle,
.coccoc-alo-phone.coccoc-alo-green.coccoc-alo-hover .coccoc-alo-ph-img-circle {
    background-color: #d96e1a !important;
}

/* ═══════════════════════════════════════════════
   HERO SLIDER — Gradient overlay + CTA text
   ═══════════════════════════════════════════════ */
div#slider {
    background: #1a1a2e !important; /* dark placeholder while images load */
    min-height: 300px;
}
.ks-slide-link {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    text-decoration: none !important;
}
.ks-slide-link img {
    display: block;
    width: 100%;
    transition: transform 3s ease !important; /* reduced from 6s */
}
#slider .slick-active .ks-slide-link img,
#slider > div:first-child .ks-slide-link img {
    transform: scale(1.03);
}
.ks-slide-overlay {
    position: absolute;
    inset: 0;
    /* Light vignette when no text; strong overlay only when .ks-slide-content present */
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.22) 100%),
                linear-gradient(105deg, rgba(0,0,0,0) 55%, transparent 100%);
    display: flex;
    align-items: center;
    pointer-events: none;
}
/* Strong overlay when slide has text */
.ks-slide-overlay:has(.ks-slide-content) {
    background: linear-gradient(105deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 45%, transparent 72%);
}
.ks-slide-content {
    padding: 0 6% 0 7%;
    max-width: 58%;
    pointer-events: auto;
}
.ks-slide-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.18 !important;
    margin: 0 0 14px !important;
    text-shadow: 0 3px 16px rgba(0,0,0,0.32) !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    animation: ksFadeUp 0.75s cubic-bezier(0.22,1,0.36,1) both !important;
}
.ks-slide-mota {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.88);
    line-height: 1.65;
    margin-bottom: 24px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.28);
    animation: ksFadeUp 0.75s 0.12s cubic-bezier(0.22,1,0.36,1) both;
}
.ks-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #F58229 0%, #d96e1a 100%);
    color: #fff !important;
    padding: 12px 28px;
    border-radius: 25px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 6px 22px rgba(245,130,41,0.50);
    transition: transform 0.22s, box-shadow 0.22s;
    animation: ksFadeUp 0.75s 0.22s cubic-bezier(0.22,1,0.36,1) both;
}
.ks-slide-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(245,130,41,0.60);
    color: #fff !important;
    text-decoration: none !important;
}
@keyframes ksFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Slider prev/next arrows — glass circle, orange on hover ── */
#slider .slick-prev,
#slider .slick-next {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255,255,255,0.16) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1.5px solid rgba(255,255,255,0.55) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s !important;
}
#slider .slick-prev { left: 24px !important; }
#slider .slick-next { right: 24px !important; }
#slider .slick-prev::before,
#slider .slick-next::before {
    font-family: 'FontAwesome' !important;
    font-size: 18px !important;
    color: #fff !important;
    opacity: 1 !important;
    line-height: 1 !important;
}
#slider .slick-prev::before { content: '\f053' !important; }
#slider .slick-next::before { content: '\f054' !important; }
#slider .slick-prev:hover,
#slider .slick-next:hover {
    background: #F58229 !important;
    border-color: #F58229 !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 8px 24px rgba(245,130,41,0.50) !important;
}
#slider .slick-prev.slick-disabled,
#slider .slick-next.slick-disabled {
    opacity: 0.35 !important;
    cursor: default !important;
}

/* ═══════════════════════════════════════════════
   STICKY NAVIGATION
   style.css has `div#menu { position: absolute; bottom: 0 }` (specificity 0-1-1).
   We must use !important here to keep the menu in normal flow so that
   #header.offsetHeight includes it — making the sticky trigger calculation correct.
   ═══════════════════════════════════════════════ */
div#menu {
    position: relative !important;
    bottom: auto !important;
    right:  auto !important;
    transition: box-shadow 0.25s !important;
}
div#menu.ks-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99998 !important;
    background: linear-gradient(90deg, rgba(208,87,14,0.97) 0%, rgba(235,120,30,0.97) 55%, rgba(245,148,55,0.97) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 4px 28px rgba(0,0,0,0.22) !important;
    animation: ksDropDown 0.28s cubic-bezier(0.32,0,0.15,1) !important;
}
@keyframes ksDropDown {
    from { transform: translateY(-100%); opacity: 0.5; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Full header sticky — fires after .top_head scrolls away */
div#header.ks-header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 20px rgba(0,0,0,0.10) !important;
    animation: ksDropDown 0.28s cubic-bezier(0.32,0,0.15,1) !important;
}
/* Slogan bar already scrolled away — hide it inside the sticky frame */
div#header.ks-header-sticky .top_head {
    display: none !important;
}

/* ═══════════════════════════════════════════════
   BUTTON SYSTEM — nhất quán toàn site
   ═══════════════════════════════════════════════ */
/* Primary orange — nút chính CTA */
a.xt,
a.btn-primary,
input[type='submit'],
button[type='submit'] {
    background: linear-gradient(135deg, #F58229, #d96e1a) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(245,130,41,0.32) !important;
}
a.xt:hover,
a.btn-primary:hover,
input[type='submit']:hover,
button[type='submit']:hover {
    background: linear-gradient(135deg, #f79a42, #F58229) !important;
    box-shadow: 0 8px 24px rgba(245,130,41,0.48) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}
/* Outline variant */
a.xemthem {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.75) !important;
    color: #fff !important;
    backdrop-filter: blur(4px);
}
a.xemthem:hover {
    background: rgba(255,255,255,0.18) !important;
    border-color: #fff !important;
    transform: translateY(-2px) !important;
}
/* Utility classes for new buttons */
.ks-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border-radius: 25px;
    font-size: 14px; font-weight: 700;
    font-family: 'Inter', sans-serif;
    text-decoration: none !important;
    border: 2px solid transparent;
    cursor: pointer; transition: all 0.22s; line-height: 1;
}
.ks-btn-primary {
    background: linear-gradient(135deg,#F58229,#d96e1a); color:#fff !important;
    box-shadow: 0 4px 16px rgba(245,130,41,0.35);
}
.ks-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,130,41,.50); color:#fff !important; }
.ks-btn-outline {
    background: transparent; color: #F58229 !important; border-color: #F58229;
}
.ks-btn-outline:hover { background:#F58229; color:#fff !important; transform:translateY(-2px); }

/* ═══════════════════════════════════════════════
   ENHANCED SECTION TITLES
   ═══════════════════════════════════════════════ */
div.tieude_giua {
    position: relative !important;
    padding-bottom: 22px !important;
    margin-bottom: 40px !important;
}
/* wide soft underline behind the orange bar */
div.tieude_giua::before {
    content: '';
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 4px;
    background: rgba(245,130,41,0.15);
    border-radius: 2px;
}
/* narrower bright orange bar on top */
div.tieude_giua::after {
    content: '';
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 48px; height: 4px;
    background: linear-gradient(90deg, #F58229, #f79a42);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════
   ENHANCED CARD HOVER
   ═══════════════════════════════════════════════ */
/* Solution cards */
.box_giaiphap {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1.5px solid #eeeeee !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.25s,
                border-color 0.25s !important;
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
}
.box_giaiphap:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(245,130,41,0.10) !important;
    border-color: #F58229 !important;
}
/* Title color on card hover */
.box_giaiphap:hover .name_gp a {
    color: #F58229 !important;
}
/* Full-card clickable overlay:
   name_gp a has no position so ::after is positioned
   relative to the nearest ancestor with position:relative = box_giaiphap */
div.name_gp a {
    transition: color 0.22s !important;
}
div.name_gp a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
}
/* Keep "Xem thêm" button above the overlay */
a.xt {
    position: relative !important;
    z-index: 2 !important;
}
/* Keep image link above the overlay */
div.img_giaiphap a {
    position: relative !important;
    z-index: 2 !important;
}
/* Why-choose-us items — full styling lives in section 4 (WHY CHOOSE US)
   below, under the higher-specificity `div.box_luachon` selector. */
/* Contact/feature boxes */
.box_lienhe {
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    transition: transform 0.26s cubic-bezier(0.22,1,0.36,1), box-shadow 0.26s, border-color 0.26s !important;
    padding: 22px !important;
}
.box_lienhe:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 18px 40px rgba(245,130,41,0.14) !important;
    border-color: rgba(245,130,41,0.32) !important;
}
/* Testimonial cards — full styling lives in section 7 (TESTIMONIALS) below,
   under the higher-specificity `div.box_ykien` selector. */

/* ═══════════════════════════════════════════════
   IMAGE ZOOM ON HOVER
   ═══════════════════════════════════════════════ */
/* Solution images */
.img_giaiphap {
    position: relative !important;
    overflow: hidden !important;
}
.img_giaiphap img {
    display: block !important;
    width: 100% !important;
    transition: transform 0.42s cubic-bezier(0.22,1,0.36,1) !important;
}
.img_giaiphap:hover img { transform: scale(1.08) !important; }

/* Service images */
.img_dv {
    position: relative !important;
    overflow: hidden !important;
}
.img_dv img {
    display: block !important;
    width: 100% !important;
    transition: transform 0.42s cubic-bezier(0.22,1,0.36,1) !important;
}
.img_dv:hover img { transform: scale(1.07) !important; }

/* Staff images */
.box_nhanvien { overflow: hidden !important; }
.box_nhanvien > img,
.box_nhanvien img:first-child {
    transition: transform 0.42s cubic-bezier(0.22,1,0.36,1) !important;
    display: block !important; width: 100% !important;
}
.box_nhanvien:hover > img,
.box_nhanvien:hover img:first-child { transform: scale(1.06) !important; }

/* hover_sang2 enhancement */
.hover_sang2 {
    position: relative !important;
    overflow: hidden !important;
}
.hover_sang2 img {
    transition: transform 0.42s cubic-bezier(0.22,1,0.36,1) !important;
}
.hover_sang2:hover img { transform: scale(1.08) !important; }
.hover_sang2::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(245,130,41,0);
    transition: background 0.35s; pointer-events: none;
}
.hover_sang2:hover::after { background: rgba(245,130,41,0.10); }

/* Orange overlay injected by ui_enhance.js */
.ks-img-ov {
    position: absolute; inset: 0;
    background: rgba(245,130,41,0);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.32s ease;
    pointer-events: none;
}
.ks-img-ov span {
    color: #fff; font-size: 13px; font-weight: 700;
    font-family: 'Inter', sans-serif; letter-spacing: 0.04em;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.28s, transform 0.28s;
    background: rgba(0,0,0,0.22); padding: 7px 16px; border-radius: 20px;
}
.img_giaiphap:hover .ks-img-ov,
.img_dv:hover .ks-img-ov        { background: rgba(245,130,41,0.48); }
.img_giaiphap:hover .ks-img-ov span,
.img_dv:hover .ks-img-ov span   { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════
   ENHANCED SCROLL REVEAL
   Content always visible — only animates transform
   so Slick carousel clones never get hidden.
   ═══════════════════════════════════════════════ */
.mod-reveal {
    transform: translateY(24px);
    transition: transform 0.65s cubic-bezier(0.22,1,0.36,1) !important;
    will-change: transform;
}
.mod-reveal.in-view {
    transform: translateY(0) !important;
}
/* Slick's .slick-list has overflow:hidden — the translateY offset would
   clip content. Disable transform entirely for carousel items. */
.slick-slide .mod-reveal,
.slick-slide .mod-reveal.in-view {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   SPARK ADVISORS–INSPIRED DESIGN UPGRADE
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. STATISTICS / TRUST BAR (injected after hero by ui_enhance.js) ── */
.ks-stats-bar {
    background: #0f0f1a;
    border-top: 3px solid #F58229;
    padding: 36px 0;
}
.ks-stats-bar .wapper {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}
.ks-stat {
    text-align: center;
    padding: 12px 32px;
    position: relative;
    flex: 1;
    min-width: 140px;
}
.ks-stat + .ks-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 1px;
    background: rgba(255,255,255,0.12);
}
.ks-stat-num {
    font-family: 'Inter', sans-serif;
    font-size: 46px;
    font-weight: 800;
    color: #F58229;
    line-height: 1;
    letter-spacing: -0.03em;
    display: inline-block;
}
.ks-stat-sfx {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #F58229;
    vertical-align: top;
    margin-top: 5px;
    display: inline-block;
    letter-spacing: -0.01em;
}
.ks-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.58);
    display: block;
    margin-top: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* ── 2. SECTION EYEBROW LABEL ── */
.ks-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F58229;
    background: rgba(245,130,41,0.10);
    border: 1px solid rgba(245,130,41,0.28);
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 14px;
}
/* dark-bg sections get white eyebrow */
div.w_giaiphap .ks-eyebrow,
div.w_nhanvien .ks-eyebrow {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.28) !important;
    color: rgba(255,255,255,0.85) !important;
}

/* ── 3. SECTION WRAPPERS — consistent vertical rhythm ── */
div.w_luachon,
div.w_giaiphap,
div.w_nhanvien,
div.w_ykien {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}
div.w_baiviet {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* ── 4. "WHY CHOOSE US" (w_luachon) — numbered icon accent ── */
div.w_luachon {
    background: #fafafa !important;
}
div.box_luachon {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    background: #fff !important;
    border-radius: 14px !important;
    border: 1.5px solid #eeeeee !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04) !important;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.22s,
                border-color 0.22s,
                background 0.22s !important;
    width: auto !important;
    cursor: pointer !important;
    position: relative !important;
}
div.box_luachon:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(245,130,41,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
    border-color: #F58229 !important;
    background: #fffaf6 !important;
}
/* Full-box clickable overlay — covers entire card */
div.name_luachon a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
}
/* Title color change on hover */
div.box_luachon:hover div.name_luachon a {
    color: #F58229 !important;
}
/* Icon background brightens on hover */
div.box_luachon:hover div.img_luachon {
    background: rgba(245,130,41,0.18) !important;
}
/* Arrow indicator at top-right */
div.box_luachon::after {
    content: '\f054' !important;
    font-family: FontAwesome !important;
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) translateX(4px) !important;
    font-size: 12px !important;
    color: #ddd !important;
    opacity: 0 !important;
    transition: opacity 0.2s, transform 0.2s, color 0.2s !important;
}
div.box_luachon:hover::after {
    opacity: 1 !important;
    color: #F58229 !important;
    transform: translateY(-50%) translateX(0) !important;
}
div.img_luachon {
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(245,130,41,0.10) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    transition: background 0.22s !important;
}
div.img_luachon a img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
}
div.desc_luachon {
    flex: 1 !important;
    min-width: 0 !important;
    padding-right: 20px !important;
}
div.name_luachon a {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    transition: color 0.22s !important;
}
div.box_luachon div.mta {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: #666 !important;
    line-height: 1.75 !important;
    margin-top: 6px !important;
}

/* ── 5. ARTICLE / PROJECT CARDS (w_baiviet) ── */
div.box_baiviet {
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: transform 0.26s cubic-bezier(0.22,1,0.36,1), box-shadow 0.26s !important;
    position: relative !important;
}
div.box_baiviet:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,0.20) !important;
}
div.box_baiviet .tt_baiviet a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #fff !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}
div.box_baiviet .mota_baiviet,
div.box_baiviet .mta {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.80) !important;
    line-height: 1.7 !important;
}

/* ── 6. SOLUTIONS (w_giaiphap) — parallax-ready ── */
div.w_giaiphap {
    position: relative !important;
}
div.box_giaiphap {
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: none !important;
    transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), background 0.28s !important;
}
div.box_giaiphap:hover {
    transform: translateY(-8px) !important;
    background: rgba(255,255,255,0.14) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.30) !important;
}
div.box_giaiphap .name_gp a,
div.box_giaiphap .tt_gp a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #1a1a1a !important;
    text-transform: none !important;
}
div.box_giaiphap:hover .name_gp a,
div.box_giaiphap:hover .tt_gp a {
    color: #F58229 !important;
}
div.box_giaiphap .mota_gp,
div.box_giaiphap .mta {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.72) !important;
    line-height: 1.7 !important;
}

/* ── 7. TESTIMONIALS (w_ykien) — quote card style ── */
div.w_ykien {
    background: #f9f9f9 !important;
}
div.box_ykien {
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid #eeeeee !important;
    padding: 36px 28px 28px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
    transition: transform 0.26s, box-shadow 0.26s !important;
    position: relative !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
/* Large decorative " centered at top */
div.box_ykien::before {
    content: '\201C' !important;
    display: block !important;
    position: static !important;
    font-size: 64px !important;
    line-height: 1 !important;
    color: #F58229 !important;
    font-family: Georgia, serif !important;
    margin-bottom: 10px !important;
    opacity: 0.55 !important;
}
div.box_ykien:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 40px rgba(245,130,41,0.10) !important;
    border-color: rgba(245,130,41,0.22) !important;
}
/* Quote text — prominent, centered, dark */
div.box_ykien .noidung_ykien,
div.box_ykien .nd_ykien,
div.box_ykien .nd_ykien p,
div.box_ykien p {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    line-height: 1.75 !important;
    font-style: italic !important;
    text-align: center !important;
    margin: 0 0 18px !important;
    font-weight: 500 !important;
}
/* Thin divider before attribution */
div.box_ykien .name_ykien,
div.box_ykien .ten_ykien {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    margin-top: 4px !important;
    text-align: center !important;
    text-transform: none !important;
}
div.box_ykien .name_ykien::before,
div.box_ykien .ten_ykien::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 2px !important;
    background: #F58229 !important;
    margin: 0 auto 12px !important;
    border-radius: 2px !important;
}
div.box_ykien .chucvu_ykien,
div.box_ykien .cv_ykien,
div.box_ykien .mta_ykien {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: #F58229 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    margin-top: 4px !important;
}

/* ── 8. CLIENT LOGO STRIP (injected after stats) ── */
.ks-client-strip {
    background: #fff;
    padding: 28px 0;
    border-bottom: 1px solid #f0f0f0;
}
.ks-client-strip .ks-client-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #aaa;
    text-align: center;
    display: block;
    margin-bottom: 20px;
}
.ks-client-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 36px 52px;
}
.ks-client-logos img {
    max-height: 36px;
    width: auto;
    opacity: 0.45;
    filter: grayscale(100%);
    transition: opacity 0.22s, filter 0.22s;
}
.ks-client-logos img:hover {
    opacity: 0.85;
    filter: grayscale(0%);
}

/* ── 9. INLINE CTA BANNER (between sections) ── */
.ks-cta-band {
    background: linear-gradient(135deg, #e05c10 0%, #F58229 50%, #f79a42 100%);
    padding: 52px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ks-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.ks-cta-band .wapper {
    position: relative;
    z-index: 1;
}
.ks-cta-band h3 {
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}
.ks-cta-band p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 28px;
    line-height: 1.6;
}
.ks-cta-band .ks-btn {
    background: #fff !important;
    color: #F58229 !important;
    border-color: transparent !important;
    font-size: 15px;
    padding: 14px 36px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.ks-cta-band .ks-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,0.24) !important;
}

/* ── 10. RESPONSIVE ── */
@media screen and (max-width: 768px) {
    .ks-stats-bar .wapper { gap: 0 !important; }
    .ks-stat { min-width: 50%; padding: 16px 12px; }
    .ks-stat-num { font-size: 34px; }
    .ks-cta-band h3 { font-size: 22px; }
    div.box_luachon { flex-direction: column !important; }
}
@media screen and (max-width: 480px) {
    .ks-stat { min-width: 100%; }
    .ks-stat + .ks-stat::before { display: none; }
}

/* ═══════════════════════════════════════════════
   11. INNER / SUB-PAGE CONTENT
   Đồng bộ font Inter + màu cam thương hiệu cho các
   trang chi tiết (giới thiệu, tin tức, tuyển dụng,
   dịch vụ...) — trước đây dùng font Roboto/Helvetica
   cũ (fonta/helveB), ribbon PNG lỗi thời cho sidebar,
   và màu đỏ off-brand cho phân trang.
   ═══════════════════════════════════════════════ */

/* Page detail title */
div.tieude_detail {
    position: relative !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    padding-bottom: 16px !important;
    margin-top: 4px !important;
    border-bottom: none !important;
}
div.tieude_detail::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 48px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #F58229, #f79a42) !important;
    border-radius: 2px !important;
}

/* Post date row */
p.post-info {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #999 !important;
    margin-bottom: 4px !important;
}
p.post-info .fa { color: #F58229 !important; margin-right: 2px !important; }

/* Article body prose */
.box_container .content .text {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: #444 !important;
}
.box_container .content .text p { margin-bottom: 16px !important; }
.box_container .content .text img {
    border-radius: 10px !important;
    max-width: 100% !important;
    height: auto !important;
}
.box_container .content .text a {
    color: #F58229 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(245,130,41,0.35) !important;
    transition: text-decoration-color 0.18s !important;
}
.box_container .content .text a:hover {
    text-decoration-color: #F58229 !important;
}
.box_container .content h1,
.box_container .content h2,
.box_container .content h3,
.box_container .content .text h1,
.box_container .content .text h2,
.box_container .content .text h3,
.box_container .content .text h4 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 28px 0 14px !important;
}
.box_container .content .text ul,
.box_container .content .text ol {
    padding-left: 22px !important;
    margin-bottom: 16px !important;
}
.box_container .content .text li { margin-bottom: 6px !important; }

/* "Tin khác" list inside article detail */
.othernews .cactinkhac {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #F58229 !important;
    display: inline-block !important;
}
.othernews ul.phantrang li a {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #555 !important;
    border-bottom: 1px dashed #eee !important;
    transition: color 0.18s, padding-left 0.18s !important;
}
.othernews ul.phantrang li a:hover {
    color: #F58229 !important;
    padding-left: 6px !important;
}

/* Sidebar "Bài đăng gần đây" — modern card, no more PNG ribbon */
div.danhmuc {
    border: none !important;
    border-radius: 12px !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}
div.tieude {
    background: linear-gradient(135deg, #F58229 0%, #d96e1a 100%) !important;
    background-image: none !important;
    margin-left: 0 !important;
    width: 100% !important;
    height: auto !important;
    line-height: normal !important;
    padding: 14px 18px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}
div#danhmuc ul { padding: 8px 18px 12px !important; }
div#danhmuc ul li a {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: #333 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f3f3f3 !important;
    transition: color 0.18s, padding-left 0.18s !important;
}
div#danhmuc ul li a i { color: #F58229 !important; }
div#danhmuc ul li a:hover {
    color: #F58229 !important;
    text-decoration: none !important;
    padding-left: 4px !important;
}
div#danhmuc ul li:last-child a { border-bottom: none !important; }

/* Listing pages (tin-tuc.html, tuyen-dung.html) cards */
div.box_news { padding: 16px !important; }
div.box_news .mota {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: #777 !important;
    line-height: 1.7 !important;
}
div.box_news .readmore a {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #F58229 !important;
}
div.box_news > p {
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    color: #aaa !important;
}
/* Fix: .info_tt was position:absolute;top:0;right:0 (default.css), which
   floats it over the title/date instead of flowing below them — caused
   overlapping/garbled text on tuyển dụng listing cards. */
div.info_tt {
    position: static !important;
    text-align: left !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #eee !important;
}
div.info_tt span {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #666 !important;
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: 20px !important;
}
div.info_tt span:nth-of-type(1)::before {
    font-family: 'FontAwesome' !important;
    content: '\f041' !important;
    color: #F58229 !important;
    margin-right: 4px !important;
}
div.info_tt span:nth-of-type(2)::before {
    font-family: 'FontAwesome' !important;
    content: '\f0d6' !important;
    color: #F58229 !important;
    margin-right: 4px !important;
}
div.info_tt span:nth-of-type(3)::before {
    font-family: 'FontAwesome' !important;
    content: '\f017' !important;
    color: #F58229 !important;
    margin-right: 4px !important;
}

/* Pagination — was off-brand red (#ed2728), now orange to match site */
.pages li a {
    font-family: 'Inter', sans-serif !important;
    border-radius: 6px !important;
    color: #555 !important;
    border-color: #eee !important;
    transition: background 0.18s, color 0.18s, border-color 0.18s !important;
}
.pages li a:hover,
.pages li .active,
.pages li #active_z {
    background: #F58229 !important;
    border-color: #F58229 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════
   12. CONTACT PAGE (lien-he.html)
   ═══════════════════════════════════════════════ */
div.tt_lh {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 14px !important;
    padding: 32px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.05) !important;
}

/* Company info column — content is CMS-managed rich text (inline icons/colors),
   only polish the surrounding typography, don't fight inline styles */
div.nd_lienhe {
    font-family: 'Inter', sans-serif !important;
}
div.nd_lienhe p {
    line-height: 1.8 !important;
    margin-bottom: 6px !important;
    color: #555 !important;
}
div.nd_lienhe img { vertical-align: middle !important; }

/* Form column */
div.frm_lienhe .item_lienhe input[type='text'],
div.frm_lienhe .item_lienhe input[type='email'],
div.frm_lienhe .item_lienhe textarea,
div.frm_lienhe .item_lienhe input[type='password'] {
    background-image: none !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
}
div.frm_lienhe .item_lienhe { margin: 0 0 16px !important; }
div.captcha_box { margin-bottom: 6px !important; }

/* Buttons — input[type=button], not type=submit, so the generic
   submit-button rule above doesn't reach them */
div.frm_lienhe .item_lienhe input.click_ajax,
div.frm_lienhe .item_lienhe input.reset {
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    border-radius: 25px !important;
    padding: 11px 32px !important;
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s !important;
}
div.frm_lienhe .item_lienhe input.click_ajax {
    background: linear-gradient(135deg, #F58229, #d96e1a) !important;
    box-shadow: 0 6px 18px rgba(245,130,41,0.35) !important;
}
div.frm_lienhe .item_lienhe input.click_ajax:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(245,130,41,0.45) !important;
}
div.frm_lienhe .item_lienhe input.reset:hover {
    filter: brightness(0.95) !important;
}

/* Map */
div.bando {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}