/* =====================================================================
   TRAVELCAR - CSS GIAO DIỆN (wp/travelcar-ui.css)
   Gộp 2 file cũ travelcar-nav.css + travelcar-tienich.css thành 1 để bớt 1 lượt tải.
   Nạp sau moz-*.min.css và travelcar-layout.css trong index.php.
   Đổi file này nhớ tăng số ?v= trong index.php để trình duyệt lấy bản mới.
   ===================================================================== */

/* ----- Font: hiện chữ ngay bằng font dự phòng, font Lato/Roboto Slab tải xong thì thay (không bị "trắng chữ") -----
   Khai báo lại đúng các font mà moz-*.min.css đang dùng, thêm font-display: swap. */
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp/lato_regular.woff2) format("woff2"), url(/wp/lato_regular.woff) format("woff") }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp/lato_bold.woff2) format("woff2"), url(/wp/lato_bold.woff) format("woff") }
@font-face { font-family: Lato; font-style: italic; font-weight: 400; font-display: swap; src: url(/wp/lato_italic.woff2) format("woff2"), url(/wp/lato_italic.woff) format("woff") }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 300; font-display: swap; src: url(/wp/roboto_slab_light.woff2) format("woff2"), url(/wp/roboto_slab_light.woff) format("woff") }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp/roboto_slab_bold.woff2) format("woff2"), url(/wp/roboto_slab_bold.woff) format("woff") }

/* ----- Ảnh: có width/height để giữ chỗ (trang không bị nhảy khi ảnh tải), vẫn co giãn theo khung ----- */
#content img[width][height]:not([style*="object-fit"]), #globalfooter img[width][height] { height: auto; max-width: 100% }
picture { display: contents }

/* ----- Nút chia sẻ (ShareThis tải chậm): giữ sẵn chỗ để tiêu đề không bị đẩy khi nút hiện ra ----- */
.sharethis-inline-share-buttons { min-height: 48px }

/* =====================================================================
   MENU, CỘT TRÁI, CHÂN TRANG, KHỐI LIÊN KẾT TRANG CHỦ  (bản 2026-11)
   Đi kèm: include/site_nav.php, product_category.php, product_detail.php,
           wrap-footer.php, home.php. Nạp sau travelcar-layout.css trong index.php.
   ===================================================================== */

/* ----- Chung ----- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; color: #0b7daa; padding: 8px 14px; font-weight: bold }
.skip-link:focus { left: 8px; top: 8px; outline: 2px solid #0b7daa }

/* =====================================================================
   MENU TRÊN CÙNG (include/product_category.php) - tiền tố .tch-
   Máy tính (từ 1024px): thanh chính 72px dính khi cuộn + menu lớn
   Dưới 1024px: thanh 60px, nút gọi, nút menu mở ngăn kéo bên phải
   ===================================================================== */
#globalnav.tch { position: sticky; top: 0; z-index: 60; font-family: Lato, Helvetica, Arial, sans-serif; color: #1f2a30 }
#globalnav.tch *, #globalnav.tch *::before, #globalnav.tch *::after { box-sizing: border-box }
.tch ul { list-style: none; margin: 0; padding: 0 }
.tch a { text-decoration: none !important }
.tch [hidden] { display: none !important }
.tch-wrap { max-width: 1220px; margin: 0 auto; padding: 0 20px }

/* ----- Thanh chính ----- */
.tch-bar { position: relative; background: #fff; border-bottom: 1px solid #e6edef; transition: box-shadow .2s }
.tch.is-scrolled .tch-bar { box-shadow: 0 6px 20px rgba(16,40,36,.10) }
.tch-bar > .tch-wrap { display: flex; align-items: center; height: 72px; gap: 12px }
.tch-logo { flex: 0 0 auto; display: block; line-height: 0 }
.tch-logo svg { display: block; width: 196px; height: 49px }

.tch-nav { flex: 1 1 auto; display: flex; justify-content: center; height: 100% }
.tch-menu { display: flex; height: 100% }
.tch-item { display: flex }
.tch-link { position: relative; display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 14px; color: #1f2a30 !important; font-size: 16px; font-weight: bold; white-space: nowrap }
.tch-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #11B191;
                   transform: scaleX(0); transition: transform .2s }
.tch-link:hover, .tch-link:focus, .tch-item.is-open > .tch-link, .tch-link.is-active { color: #0a7a64 !important }
.tch-link:hover::after, .tch-item.is-open > .tch-link::after, .tch-link.is-active::after { transform: scaleX(1) }
.tch-chev { width: 12px; height: 12px; transition: transform .2s; opacity: .7 }
.tch-item.is-open .tch-chev { transform: rotate(180deg) }

/* ----- Menu lớn ----- */
.tch-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #e6edef; box-shadow: 0 24px 40px rgba(16,40,36,.14);
            padding: 26px 0 28px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility 0s .18s }
.tch-item.is-open > .tch-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s }
.tch-mega-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start }
.tch-mega-title { margin: 0 0 14px; font-size: 13px; font-weight: bold; color: #5d6769; text-transform: uppercase; letter-spacing: .08em }
.tch-mega-foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #eef3f3 }
.tch-mega-foot a { font-weight: bold; color: #0b7daa }

.tch-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
.tch-cards-4 { grid-template-columns: repeat(4, 1fr) }
.tch-cards a { display: block; height: 100%; padding: 13px 16px; border: 1px solid transparent; border-radius: 10px; transition: background .15s, border-color .15s }
.tch-cards a:hover, .tch-cards a:focus, .tch-cards a[aria-current] { background: #f1faf7; border-color: #cdeee5 }
.tch-cards strong { display: block; color: #1f2a30; font-size: 16px; margin-bottom: 3px }
.tch-cards span { display: block; color: #5d6769; font-size: 14px; line-height: 1.35 }
.tch-cards .tch-card-all { background: #f6f9fa }
.tch-cards .tch-card-all strong { color: #0a7a64 }

.tch-chips { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #eef3f3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.tch-chips span { color: #5d6769; font-size: 14px; margin-right: 4px }
.tch-chips a { padding: 5px 14px; border: 1px solid #dbe3e3; border-radius: 16px; color: #1f2a30; font-size: 14px }
.tch-chips a:hover, .tch-chips a:focus { border-color: #11B191; color: #0a7a64 }

.tch-routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px }
.tch-routes a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: #1f2a30; font-size: 16px; font-weight: bold }
.tch-routes a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #11B191; box-shadow: 0 0 0 4px #e3f6f1; flex: 0 0 auto }
.tch-routes a:hover, .tch-routes a:focus, .tch-routes a[aria-current] { background: #f1faf7; color: #0a7a64 }

.tch-promo { padding: 22px; border-radius: 14px; background: linear-gradient(135deg, #0c8f76, #11B191 60%, #29c3a3); color: #fff }
.tch-promo-kicker { margin: 0 0 4px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .08em; opacity: .9 }
.tch-promo-title { margin: 0 0 14px; font-size: 18px; font-weight: bold; line-height: 1.35 }
.tch-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 10px; background: #ffd262;
           color: #4a3200 !important; font-size: 21px; font-weight: bold; box-shadow: 0 3px 0 #d9a93a }
.tch-cta:hover, .tch-cta:focus { background: #ffc93d }
.tch-promo-links { margin-top: 14px !important }
.tch-promo-links li { margin: 6px 0 }
.tch-promo-links a { color: #fff; font-size: 14px; text-decoration: underline !important }

/* ----- Bên phải: tìm kiếm, gọi, nút menu ----- */
.tch-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto }
.tch-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
                background: transparent; color: #1f2a30; cursor: pointer; transition: background .15s }
.tch-icon-btn:hover, .tch-icon-btn:focus { background: #f0f5f5 }
.tch-icon-btn svg { width: 18px; height: 18px; fill: currentColor }
.tch-call { display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 8px; border-radius: 999px; background: #e8590c; color: #fff !important;
            box-shadow: 0 4px 14px rgba(232,89,12,.35); transition: background .15s, transform .1s }
.tch-call:hover, .tch-call:focus { background: #d14f0a }
.tch-call:active { transform: translateY(1px) }
.tch-call .tc-ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255,255,255,.2); animation: tc-ring 3.5s ease-in-out infinite }
.tch-call-text { display: flex; flex-direction: column; line-height: 1.1; font-size: 18px; font-weight: bold; letter-spacing: .01em }
.tch-call-text small { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: .06em; opacity: .85 }
.tch-burger { display: none; flex-direction: column; gap: 4px }
.tch-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #1f2a30 }

/* ----- Ô tìm kiếm ----- */
.tch-search { background: #f6f9fa; border-top: 1px solid #e6edef; padding: 14px 0 }
.tch-search form { display: flex; gap: 10px }
.tch-search input { flex: 1; height: 46px; padding: 0 16px; border: 1px solid #cfd9db; border-radius: 10px; font-size: 16px; outline: 0 }
.tch-search input:focus { border-color: #11B191; box-shadow: 0 0 0 3px rgba(17,177,145,.15) }
.tch-search button { padding: 0 24px; border: 0; border-radius: 10px; background: #11B191; color: #fff; font-weight: bold; font-size: 16px; cursor: pointer }

/* ----- Ngăn kéo điện thoại ----- */
.tch-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(10,25,22,.45) }
.tch-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: min(360px, 88vw); display: flex; flex-direction: column; background: #fff;
              box-shadow: -10px 0 30px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .25s ease }
.tch-drawer.is-in { transform: none }
.tch-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; border-bottom: 1px solid #eef3f3;
                   font-weight: bold; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #5d6769 }
.tch-close { font-size: 30px; line-height: 1 }
.tch-drawer-search { position: relative; margin: 14px 20px 6px }
.tch-drawer-search input { width: 100%; height: 44px; padding: 0 44px 0 14px; border: 1px solid #dbe3e3; border-radius: 10px; font-size: 16px; outline: 0 }
.tch-drawer-search button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer }
.tch-drawer-search svg { width: 16px; height: 16px; fill: #5d6769 }
.tch-drawer-nav { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 16px }
.tch-drawer-nav details { border-bottom: 1px solid #eef3f3 }
.tch-drawer-nav summary, .tch-drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: #1f2a30 !important;
                                           font-size: 17px; font-weight: bold; cursor: pointer; list-style: none }
.tch-drawer-link { border-bottom: 1px solid #eef3f3 }
.tch-drawer-nav summary::-webkit-details-marker { display: none }
.tch-drawer-nav summary::after { content: "+"; font-size: 22px; font-weight: normal; color: #11B191 }
.tch-drawer-nav details[open] > summary::after { content: "−" }
.tch-drawer-nav details[open] > summary { color: #0a7a64 !important }
.tch-drawer-nav details ul { padding-bottom: 12px }
.tch-drawer-nav details li a { display: block; padding: 9px 12px; border-radius: 8px; color: #3c4448; font-size: 16px }
.tch-drawer-nav details li a:active, .tch-drawer-nav details li a:hover { background: #f1faf7 }
.tch-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px }
.tch-drawer-more { display: block; margin: -4px 0 14px 12px; font-weight: bold; color: #0b7daa !important }
.tch-drawer-foot { display: flex; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #eef3f3 }
.tch-drawer-foot .tc-btn { flex: 1; padding: 12px 8px; font-size: 16px }
.tch-drawer-foot .tc-btn-call { flex: 1.6 }
html.tch-lock, html.tch-lock body { overflow: hidden }
html.tch-lock .tc-callbar { display: none }   /* menu mở: ẩn thanh gọi, trong menu đã có nút gọi */

/* ----- Màn hình vừa và nhỏ ----- */
@media (max-width: 1199px) {
    .tch-link { padding: 0 10px; font-size: 15px }
    .tch-link::after { left: 10px; right: 10px }
    .tch-logo svg { width: 168px; height: 42px }
    .tch-routes, .tch-cards-4 { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 1023px) {
    .tch-nav, .tch-search-btn, .tch-search { display: none !important }
    .tch-bar > .tch-wrap { height: 60px; padding: 0 12px 0 16px }
    .tch-logo svg { width: 150px; height: 38px }
    .tch-burger { display: inline-flex }
}
@media (max-width: 480px) {
    .tch-call { padding: 0; width: 44px; height: 44px; justify-content: center }
    .tch-call-text { display: none }
    .tch-call .tc-ico { width: 44px; height: 44px; padding: 12px; background: transparent }
}

/* =====================================================================
   TRANG DỊCH VỤ: CỘT TRÁI, CHÂN BÀI, THANH GỌI ĐIỆN THOẠI
   (include/product_detail.php, blog_detail.php, hàm tc_cta / tc_callbar trong site_nav.php)
   ===================================================================== */
.tc-ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: 0 0 auto }

/* ----- Nút dùng chung ----- */
.tc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-weight: bold; line-height: 1.2;
          text-decoration: none !important; transition: background-color .15s, transform .1s, box-shadow .15s }
.tc-btn:active { transform: translateY(1px) }
.tc-btn-call { background: #e8590c; color: #fff !important; padding: 12px; font-size: 19px; box-shadow: 0 3px 0 #b5470a }
.tc-btn-call:hover, .tc-btn-call:focus { background: #d14f0a }
.tc-btn-ghost { background: #fff; border: 1px solid #e8590c; color: #c94d0a !important }
.tc-btn-ghost:hover, .tc-btn-ghost:focus { background: #fff1e8 }
.tc-btn-zalo { background: #0068ff; color: #fff !important }
.tc-btn-zalo:hover, .tc-btn-zalo:focus { background: #0057d6 }
@keyframes tc-ring { 0%, 86%, 100% { transform: rotate(0) } 88% { transform: rotate(-14deg) } 92% { transform: rotate(14deg) } 96% { transform: rotate(-8deg) } }
.tc-btn-call .tc-ico, .tc-callbar-call .tc-ico { animation: tc-ring 3.5s ease-in-out infinite }

/* ----- Cột trái ----- */
.tc-side { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; padding: 0 4px 8px 0;   /* 88px: chừa thanh menu 72px dính trên cùng */
           scrollbar-width: thin; scrollbar-color: #d5dde0 transparent }
.tc-call { background: #fff7f0; border: 1px solid #ffd8bf; border-radius: 12px; padding: 14px; margin-bottom: 16px }
.tc-call-kicker { margin: 0 0 8px; font-size: 12px; font-weight: bold; color: #c94d0a; text-transform: uppercase; letter-spacing: .06em; text-align: center }
.tc-call-row { display: flex; gap: 8px; margin-top: 8px }
.tc-call-row .tc-btn { flex: 1; padding: 8px 6px; font-size: 14px }

.tc-card { background: #fff; border: 1px solid #e3e9ec; border-radius: 12px; padding: 16px }
.tc-card-title { margin: 0 0 12px; font-size: 12px; font-weight: bold; color: #5d6769; text-transform: uppercase; letter-spacing: .08em }
.tc-card-more { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e3e9ec; font-weight: bold; font-size: 14px; color: #0b7daa }

.tc-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.tc-chips a { display: block; padding: 8px 6px; border: 1px solid #e3e9ec; border-radius: 8px; background: #fff; color: #272733; font-size: 15px; text-align: center }
.tc-chips a:hover, .tc-chips a:focus { border-color: #11B191; color: #0a7a64; text-decoration: none }
.tc-chips a.is-current { background: #11B191; border-color: #11B191; color: #fff; font-weight: bold }

.tc-list { list-style: none; margin: 0; padding: 0 }
.tc-list a { display: block; padding: 7px 10px; border-radius: 6px; color: #3c4448; font-size: 15px; line-height: 1.35 }
.tc-list a:hover, .tc-list a:focus { background: #f2f7f7; color: #272733; text-decoration: none }
.tc-list a.is-current { background: #e7f7f3; color: #0a7a64; font-weight: bold; box-shadow: inset 3px 0 0 #11B191 }
.tc-list a.tc-hub { font-weight: bold; color: #0a7a64 }

.tc-acc-item { border-top: 1px solid #eef3f3 }
.tc-acc-item:first-child { border-top: 0 }
.tc-acc-item > summary { display: flex; align-items: center; gap: 8px; padding: 9px 4px; cursor: pointer; list-style: none; font-weight: bold; color: #272733 }
.tc-acc-item > summary::-webkit-details-marker { display: none }
.tc-acc-item > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid #909c9e; border-bottom: 2px solid #909c9e;
                                transform: rotate(45deg); margin: -3px 4px 0 0; transition: transform .2s }
.tc-acc-item[open] > summary::after { transform: rotate(-135deg); margin-top: 3px }
.tc-acc-item[open] > summary { color: #0a7a64 }
.tc-acc-item > summary:hover { color: #0a7a64 }
.tc-acc-item[open] { padding-bottom: 8px }
.tc-count { margin-left: auto; padding: 1px 8px; border-radius: 10px; background: #f0f7f7; color: #5d6769; font-size: 12px; font-weight: normal }

/* ----- Chân bài: khối gọi đặt xe ----- */
.tc-cta { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center; margin: 36px 0 28px; padding: 28px 30px;
          border-radius: 16px; background: linear-gradient(135deg, #0c8f76 0%, #11B191 55%, #29c3a3 100%); color: #fff; box-shadow: 0 10px 30px rgba(17,177,145,.25) }
.tc-cta-kicker { margin: 0 0 6px; font-size: 13px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; opacity: .9 }
.tc-cta-title { margin: 0 0 14px; color: #fff; font-size: 26px; line-height: 1.25 }
.tc-cta-points { list-style: none; margin: 0; padding: 0 }
.tc-cta-points li { display: flex; align-items: flex-start; gap: 8px; margin: 7px 0; font-size: 16px; line-height: 1.4 }
.tc-cta-points .tc-ico { color: #ffe08a; margin-top: 2px }
.tc-cta-points a { color: #fff; text-decoration: underline }
.tc-cta-actions { display: flex; flex-direction: column; gap: 10px }
.tc-cta .tc-btn-lg { padding: 12px 16px; font-size: 26px; background: #ffd262; color: #4a3200 !important; box-shadow: 0 4px 0 #d9a93a }
.tc-cta .tc-btn-lg:hover, .tc-cta .tc-btn-lg:focus { background: #ffc93d }
.tc-cta .tc-btn-lg span { display: flex; flex-direction: column; align-items: flex-start }
.tc-cta .tc-btn-lg small { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .8 }
.tc-cta .tc-btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.75); color: #fff !important; padding: 10px; font-size: 17px }
.tc-cta .tc-btn-ghost:hover, .tc-cta .tc-btn-ghost:focus { background: rgba(255,255,255,.22) }
.tc-cta .tc-btn-zalo { padding: 10px; font-size: 17px }
.tc-cta-note { margin: 0; text-align: center; font-size: 13px; opacity: .9 }

/* ----- Chân bài: có thể bạn quan tâm ----- */
.tc-related { margin: 0 0 36px }
.tc-related-title { margin: 0 0 12px; font-size: 20px }
.tc-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px }
.tc-related a { display: block; height: 100%; padding: 14px 16px; border: 1px solid #e3e9ec; border-radius: 10px; background: #fff; color: #272733;
                transition: border-color .15s, box-shadow .15s }
.tc-related a:hover, .tc-related a:focus { border-color: #11B191; box-shadow: 0 4px 14px rgba(0,0,0,.07); text-decoration: none }
.tc-related strong { display: block; margin-bottom: 4px; font-size: 16px; line-height: 1.3 }
.tc-related span { font-size: 14px; color: #0b7daa }

/* ----- Thanh gọi cố định dưới màn hình điện thoại ----- */
.tc-callbar { display: none }
@media (max-width: 767px) {
    .tc-side-col { margin-top: 8px }                         /* giao diện gốc đã đưa cột trái xuống dưới bài trên điện thoại */
    .tc-side { position: static; max-height: none; overflow: visible; padding: 0 }
    .tc-call { display: none }                                /* đã có thanh gọi dưới màn hình */
    .tc-cta { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; margin-top: 28px }
    .tc-cta-title { font-size: 22px }
    .tc-cta .tc-btn-lg { font-size: 23px }
    .tc-callbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; box-shadow: 0 -2px 12px rgba(0,0,0,.18);
                  padding-bottom: env(safe-area-inset-bottom); background: #e8590c }
    .tc-callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; color: #fff !important;
                    font-size: 17px; font-weight: bold; text-decoration: none !important }
    .tc-callbar-call { flex: 2 !important; background: #e8590c }
    .tc-callbar-zalo { background: #0068ff }
    body { padding-bottom: 56px }                             /* chừa chỗ cho thanh gọi */
}
@media (prefers-reduced-motion: reduce) { .tc-btn-call .tc-ico, .tc-callbar-call .tc-ico { animation: none } }

/* ----- Trang chủ: lưới liên kết tuyến đường và dịch vụ (include/home.php) ----- */
.home-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px }
.home-links a { display: block; height: 100%; padding: 12px 16px; background: #fff; border: 1px solid #dbe3e3; border-radius: 6px; color: #272733; font-weight: bold;
                transition: border-color .15s, box-shadow .15s }
.home-links a:hover, .home-links a:focus { border-color: #4dbdeb; box-shadow: 0 2px 8px rgba(0,0,0,.08); text-decoration: none }
.home-services a span { display: block; margin-top: 4px; font-weight: normal; font-size: 14px; color: #5d6769 }
.home-sizes { line-height: 2 }
.home-sizes a { display: inline-block; margin: 0 6px 6px 0; padding: 2px 12px; border: 1px solid #dbe3e3; border-radius: 16px; background: #fff; white-space: nowrap }

/* ----- Chân trang (include/wrap-footer.php) ----- */
.mgn-footer-fat .ft-cols { margin-bottom: 24px }
.mgn-footer-fat .ft-cols .mgn-col { border-left: 0 !important; padding: 0 16px 0 0; min-width: 170px }
.mgn-footer-fat .ft-title { margin: 0 0 8px; color: #424A4F; font-weight: bold; font-size: 15px; text-transform: uppercase; letter-spacing: .03em }
.mgn-footer-fat .mgn-links { margin: 0; line-height: 28px }
.mgn-footer-fat .mgn-links a, .mgn-footer-fat address a { color: #5d6769 }
.mgn-footer-fat .mgn-links a:hover, .mgn-footer-fat address a:hover { color: #0b7daa; text-decoration: underline !important }
.mgn-footer-fat .ft-company { margin-bottom: 0; padding-top: 20px; border-top: 1px solid #dde8e8 }
.mgn-footer-fat .ft-company address { font-style: normal; line-height: 1.8; margin: 0 }
.mgn-footer-fat .ft-social { border-left: 0 !important; text-align: right }
.mgn-footer-fat .ft-inline { list-style: none; margin: 0 0 10px; padding: 0 }
.mgn-footer-fat .ft-inline li { display: inline-block; margin-left: 14px }
@media (max-width: 767px) {
    .mgn-footer-fat .ft-cols .mgn-col { flex: 1 0 50% !important; padding: 0 8px 16px; text-align: left }
    .mgn-footer-fat .ft-company .mgn-col, .mgn-footer-fat .ft-social { text-align: center; flex: 1 0 100% !important }
    .mgn-footer-fat .ft-inline li { margin: 0 7px }
}


/* =====================================================================
   THANH TIỆN ÍCH DƯỚI MENU (lib/tienich.php) - tiền tố .tcb-
   Cài đặt: admin > Hệ thống > Thanh tiện ích
   ===================================================================== */
.tcb { --tcb-bg: #fff; --tcb-fg: #1f2a30; --tcb-mut: #5d6769; --tcb-line: #e6edef; --tcb-lb-bg: #e7f7f3; --tcb-lb-fg: #0a7a64;
       --tcb-up: #0a8a3a; --tcb-dn: #d32f2f; --tcb-sep: #c3cfd2;
       position: relative; z-index: 5; background: var(--tcb-bg); color: var(--tcb-fg); border-bottom: 1px solid var(--tcb-line);
       font-family: Lato, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1 }
.tcb-dark  { --tcb-bg: #13201d; --tcb-fg: #e8f2ef; --tcb-mut: #9fb3ae; --tcb-line: #0b1513; --tcb-lb-bg: #1f3a33; --tcb-lb-fg: #7fe0c4;
             --tcb-up: #4fd17f; --tcb-dn: #ff7b72; --tcb-sep: #3d524c }
.tcb-brand { --tcb-bg: #0b5d4f; --tcb-fg: #fff; --tcb-mut: #cfeee6; --tcb-line: #084a3f; --tcb-lb-bg: rgba(255,255,255,.16); --tcb-lb-fg: #fff;
             --tcb-up: #8ef0b8; --tcb-dn: #ffb4a8; --tcb-sep: rgba(255,255,255,.35) }
.tcb-s { font-size: 13px } .tcb-l { font-size: 15px }

.tcb-wrap { display: flex; align-items: center; max-width: 1220px; height: 38px; margin: 0 auto; padding: 0 0 0 20px }
.tcb-viewport { position: relative; flex: 1 1 auto; height: 100%; overflow: hidden;
                -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%) }
.tcb-track { display: flex; width: max-content; height: 100% }
.tcb-seq { display: flex; align-items: center; flex: 0 0 auto; height: 100%; padding-right: 48px; white-space: nowrap }

.tcb-g { display: inline-flex; align-items: center; height: 100% }
.tcb-g + .tcb-g { margin-left: 28px }
.tcb-lb { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-right: 12px; border-radius: 12px;
          background: var(--tcb-lb-bg); color: var(--tcb-lb-fg); font-size: .82em; font-weight: bold; text-transform: uppercase; letter-spacing: .04em }
.tcb-nolabels .tcb-lb { display: none }
.tcb-i { display: inline-flex; align-items: baseline; gap: 5px; color: var(--tcb-fg) !important; text-decoration: none !important }
.tcb-i + .tcb-i::before { content: "•"; margin: 0 12px 0 2px; color: var(--tcb-sep) }
a.tcb-i:hover b, a.tcb-i:focus b { text-decoration: underline }
.tcb-k { color: var(--tcb-mut) }
.tcb-i b { font-weight: bold }
.tcb-i em { font-style: normal; font-size: .9em; font-weight: bold }
.tcb-up { color: var(--tcb-up) } .tcb-dn { color: var(--tcb-dn) }

.tcb-ctrl { flex: 0 0 auto; display: flex; gap: 2px; padding: 0 10px 0 6px; border-left: 1px solid var(--tcb-line) }
.tcb-btn { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tcb-mut); font-size: 11px; cursor: pointer; line-height: 1 }
.tcb-btn:hover, .tcb-btn:focus { background: var(--tcb-lb-bg); color: var(--tcb-fg) }

/* ----- Kiểu 1: chạy ngang liên tục ----- */
@keyframes tcb-run { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.tcb-mode-marquee .tcb-track { animation: tcb-run 60s linear infinite }
.tcb-mode-marquee.tcb-ltr .tcb-track { animation-direction: reverse }
.tcb-mode-marquee.tcb-hoverpause:hover .tcb-track, .tcb-mode-marquee.is-paused .tcb-track { animation-play-state: paused }

/* ----- Kiểu 2: lần lượt từng nhóm ----- */
.tcb-mode-groups .tcb-track, .tcb-mode-groups .tcb-seq { width: 100% }
.tcb-mode-groups .tcb-seq { position: relative; padding: 0 }
.tcb-mode-groups .tcb-g { position: absolute; left: 24px; right: 24px; top: 0; margin: 0; opacity: 0; transform: translateY(8px);
                          transition: opacity .35s, transform .35s; pointer-events: none; overflow: hidden }
.tcb-mode-groups .tcb-g.is-on { opacity: 1; transform: none; pointer-events: auto }

/* ----- Kiểu 3: đứng yên (vuốt ngang nếu dài) ----- */
.tcb-mode-static .tcb-viewport { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none }
.tcb-mode-static .tcb-viewport::-webkit-scrollbar { display: none }

@media (max-width: 767px) {
    .tcb-nomobile { display: none }
    .tcb-wrap { height: 34px; padding-left: 12px }
    .tcb { font-size: 13px }
    .tcb-ctrl { padding: 0 4px }
}
/* Không tắt chạy khi máy bật "giảm chuyển động": thanh chạy chậm, có nút tạm dừng (đạt WCAG 2.2.2). */

/* ----- Link ngoài: biểu tượng ↗ (bật ở Admin → Hệ thống → Cài đặt → Liên kết ngoài) ----- */
a.tc-ext::after{content:"\2197";display:inline-block;margin-left:2px;font-size:.78em;line-height:1;vertical-align:.25em;opacity:.65;text-decoration:none}
a.tc-ext:hover::after{opacity:1}
a.tc-ext:has(img)::after,a.tc-ext:has(picture)::after{content:none}

/* ----- Khối tác giả cuối bài blog (include/blog_detail.php) ----- */
.tc-author{display:flex;gap:16px;align-items:flex-start;margin:28px 0 8px;padding:18px 20px;border:1px solid #e3e9ea;border-radius:12px;background:#f7fafa}
.tc-author-img{flex:none;display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;background:#e3e9ea}
.tc-author-img img{width:72px;height:72px;object-fit:cover;display:block}
.tc-author-txt{min-width:0}
.tc-author-lb{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7b868a}
.tc-author-nm{font-size:17px;font-weight:700;color:#1D6B87;text-decoration:none}
.tc-author-nm:hover{text-decoration:underline}
.tc-author-rl{display:block;font-size:13px;color:#5d6769;margin-top:1px}
.tc-author p{margin:8px 0 0;font-size:14px;line-height:1.55;color:#424A4F}
@media (max-width:575px){.tc-author{padding:14px;gap:12px}.tc-author-img,.tc-author-img img{width:56px;height:56px}}