/* PTK Solutions — ptk-overrides.css
   File ghi đè cuối cùng của theme. Nạp SAU tất cả CSS khác
   (kể cả ptk-home.css / ptk-service.css / ptk-about.css).

   Mục lục:
     A. Sửa lỗi mobile / tablet          (mục 1–10)
     B. Typography tiếng Việt            (mục 11)
     C. Trợ năng (accessibility)         (mục 12)

   WordPress: wp_enqueue_style('ptk-overrides', ..., array('ptk-theme'), ...); */

/* ==========================================================================
   A. SỬA LỖI MOBILE / TABLET
   ========================================================================== */

/* ==========================================================================
   1. Chặn tràn ngang (horizontal overflow) trên mọi trang
   Trước đây chỉ home-10 có rule này nên các trang khác vẫn scroll ngang.
   ========================================================================== */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body .page-wrapper,
body section,
body .container,
body .container-fluid,
body .row > * {
    min-width: 0;
}

body img {
    max-width: 100%;
}

/* Bootstrap row có margin âm -12px; khi cha dùng .p-0 thì phần âm này
   tràn ra ngoài viewport (contact.html: scrollWidth 387px > 375px). */
.container-fluid.p-0 > .row,
.container-fluid.px-0 > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

.container-fluid.p-0 > .row > [class*="col-"],
.container-fluid.px-0 > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   2. Menu mobile
   ========================================================================== */

/* Khoá cuộn nền khi menu mobile đang mở (JS thêm class .ptk-menu-open).
   Trước đây trang phía sau vẫn cuộn được khi menu mở. */
html.ptk-menu-open,
body.ptk-menu-open {
    overflow: hidden;
    overscroll-behavior: contain;
}

/* Panel vẫn cuộn được bên trong khi nền đã khoá.
   .mobile-menu-area là panel thật (270px); .mobile-menu-wrapper chỉ là lớp phủ. */
body.ptk-menu-open .mobile-menu-area,
body.ptk-menu-open .sidebar-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Tiếng Việt không viết hoa từng chữ: "Trang Chủ" -> "Trang chủ".
   Theme gốc set text-transform: capitalize cho menu mobile. */
.mobile-menu .navigation > li > a,
.mobile-menu .navigation li a,
.sidebar-wrapper .navigation li a {
    text-transform: none;
}

/* Vùng chạm tối thiểu cho link menu mobile */
.mobile-menu .navigation > li > a {
    min-height: 48px;
    display: flex;
    align-items: center;
}

/* Nút mở submenu đủ lớn để bấm */
.mobile-menu .navigation li .mean-expand-class,
.mobile-menu .navigation li .dropdown-btn {
    min-width: 48px;
    min-height: 48px;
}

/* ==========================================================================
   3. Vùng chạm (tap target) — WCAG 2.5.8 tối thiểu 24px, khuyến nghị 44px
   ========================================================================== */
@media (max-width: 991px) {

    .footer-section .footer-widget ul li a,
    .footer-section .footer-links li a,
    .footer-widget .list-item li a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }

    .footer-section .social-links a,
    .footer-section .social-icon,
    .social-links a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Link email / điện thoại trong footer + contact */
    .contact-info-box a,
    .footer-contact a,
    .info-box a {
        display: inline-block;
        min-height: 40px;
        line-height: 40px;
    }
}

/* ==========================================================================
   4. Form — iOS zoom khi focus nếu font-size < 16px
   ========================================================================== */
@media (max-width: 991px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="url"],
    select,
    textarea,
    .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 16px !important;
    }

    /* Ô nhập đủ cao để bấm thoải mái */
    .form-group input:not([type="checkbox"]):not([type="radio"]),
    .form-group select,
    .contact-form input:not([type="checkbox"]):not([type="radio"]),
    .contact-form select {
        min-height: 52px;
    }

    .form-group button,
    .contact-form button,
    .theme-btn {
        min-height: 48px;
    }
}

/* Checkbox "đồng ý điều khoản" đang để display:none — chuột/chạm vẫn bấm được
   qua <label>, nhưng bị loại khỏi accessibility tree nên KHÔNG tab tới được
   bằng bàn phím và screen reader không đọc trạng thái.
   Đổi sang visually-hidden: vô hình nhưng vẫn focus được. */
.form-group input[type="checkbox"],
.contact-form input[type="checkbox"] {
    display: inline-block !important;
    visibility: visible !important;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* Khi checkbox nhận focus bằng bàn phím, làm nổi label đi kèm */
.form-group input[type="checkbox"]:focus-visible + label,
.contact-form input[type="checkbox"]:focus-visible + label {
    outline: 2px solid #2f5bff;
    outline-offset: 3px;
}

/* ==========================================================================
   5. Bản đồ / iframe nhúng
   ========================================================================== */
.map-box iframe,
.google-map iframe,
iframe[src*="google.com/maps"] {
    width: 100%;
    max-width: 100%;
    border: 0;
}

/* ==========================================================================
   6. Bảng và khối code dài — cho cuộn trong khung riêng, không đẩy trang
   ========================================================================== */
@media (max-width: 767px) {

    .table-responsive,
    .entry-content table,
    .blog-details table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .entry-content pre,
    .blog-details pre {
        overflow-x: auto;
    }
}

/* ==========================================================================
   7. Chống vỡ chữ dài (URL, email) trên màn hẹp
   ========================================================================== */
@media (max-width: 575px) {

    .breadcumb-content a,
    .breadcrumb a,
    .contact-info-box .title,
    .footer-widget p,
    .blog-details p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ==========================================================================
   8. Hero slider — hiệu ứng trượt vào translateX(-60px) làm chữ bị cắt
   ở mép trái trên màn hẹp. Rút ngắn quãng trượt trên mobile.
   ========================================================================== */
@media (max-width: 575px) {
    .hero-content .hero-title {
        transform: translateX(-24px);
    }
}

/* ==========================================================================
   9. Ảnh — giữ tỉ lệ, tránh layout shift khi chưa có width/height
   ========================================================================== */
img[loading="lazy"] {
    background-color: transparent;
}

/* ==========================================================================
   10. Tôn trọng prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-content > *,
    .hero-content .hero-title {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ==========================================================================
   B. TYPOGRAPHY TIẾNG VIỆT
   ========================================================================== */

/* 11. Bỏ text-transform: capitalize kế thừa từ template gốc (viết cho tiếng Anh).
   Tiếng Việt viết hoa theo câu: "Trang chủ", không phải "Trang Chủ".
   Chỉ áp cho phần điều hướng / breadcrumb / tiêu đề nhỏ — giữ nguyên
   uppercase ở nơi thiết kế cố ý (eyebrow, tag, badge). */
.main-menu .navigation > li > a,
.mobile-menu .navigation li a,
.sidebar-wrapper .navigation li a,
.page-breadcrumb,
.page-breadcrumb li,
.page-breadcrumb li a,
.breadcumb-content .breadcumb-menu li,
.footer-section .footer-widget ul li a,
.widget_nav_menu li a,
.blog-meta a,
.post-meta a,
.sec-title,
.page-title .title {
    text-transform: none;
}

/* ==========================================================================
   C. TRỢ NĂNG
   ========================================================================== */

/* 12a. Viền focus rõ ràng cho điều hướng bằng bàn phím
   (theme gốc set outline: none ở nhiều chỗ). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #2f5bff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* 12b. Link "bỏ qua tới nội dung chính" cho screen reader / bàn phím */
.ptk-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: #051153;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.ptk-skip-link:focus {
    left: 0;
}

/* 12c. Chỉ hiển thị cho screen reader */
.ptk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   D. BỔ SUNG
   ========================================================================== */

/* 13. Nút "lên đầu trang" (.scrollToTop, position: fixed) đè lên link
   "Điều khoản sử dụng" ở dải copyright trên màn hẹp.
   Chừa chỗ ở đáy footer để nút không che nội dung.
   (Theme có cả .scroll-top trong style.css lẫn .scrollToTop trong markup —
   nhắm cả hai cho chắc.) */
@media (max-width: 767px) {

    .footer-section .copyright-wrap,
    .footer-section .footer-bottom,
    .footer-section .copyright-area {
        padding-bottom: 76px;
    }

    .scroll-top,
    .scrollToTop {
        right: 16px;
        bottom: 16px;
    }
}

/* ==========================================================================
   E. FOOTER MOBILE — thu gọn
   ========================================================================== */

/* 14. Footer trên mobile quá dài. Xử lý:
   - ẩn hẳn widget "Góc nhìn mới" (JS gắn class .ptk-footer-recent)
   - "Thông tin" và "Giải pháp" chuyển thành accordion, mặc định đóng
   JS: ptk-theme.js -> initFooterCollapse() */
/* Reset nút accordion ở MỌI kích thước — trên desktop nút vẫn tồn tại trong DOM,
   nếu không reset thì padding/viền mặc định của <button> làm tiêu đề bị thụt vào. */
.ptk-footer-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: default;
}

.ptk-footer-toggle .ptk-footer-caret {
    display: none;
}

/* Bootstrap reboot đặt `button:not(:disabled){cursor:pointer}` (0,1,1) nên
   thắng .ptk-footer-toggle (0,1,0). Trên desktop nút không có tác dụng
   -> tăng độ ưu tiên để trả về con trỏ mặc định. */
.footer-section .ptk-footer-toggle {
    cursor: default;
}

@media (max-width: 991px) {

    .footer-section .ptk-footer-recent {
        display: none;
    }

    /* Nút mở/đóng thay cho tiêu đề widget */
    .footer-section .footer-widget.is-collapsible {
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .footer-section .footer-widget.is-collapsible > .title {
        margin-bottom: 0;
    }

    .footer-section .ptk-footer-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 54px;
        cursor: pointer;
    }

    .ptk-footer-toggle .ptk-footer-caret {
        display: block;
    }

    .ptk-footer-caret {
        flex-shrink: 0;
        width: 10px;
        height: 10px;
        margin-right: 2px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .25s ease;
        opacity: .7;
    }

    /* Danh sách đóng/mở */
    .footer-section .footer-widget.is-collapsible > ul {
        display: none;
        padding-bottom: 8px;
    }

    .footer-section .footer-widget.is-collapsible.is-open > ul {
        display: block;
    }

    .footer-section .footer-widget.is-collapsible.is-open .ptk-footer-caret {
        transform: translateY(2px) rotate(225deg);
    }

    /* Trong accordion, link không cần cao 44px nữa (đã có vùng chạm rộng) */
    .footer-section .footer-widget.is-collapsible ul li a {
        min-height: 40px;
        line-height: 40px;
    }

    /* Row lồng bên trong footer có margin âm -12px, triệt tiêu padding của
       .container -> accordion chạy sát mép, mũi tên bị cắt.
       Trả lại lề chuẩn trên mobile. */
    .footer-section .footer-top .row .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .footer-section .footer-top .row .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* Cột chứa widget "Góc nhìn mới" đã ẩn — bỏ luôn khoảng trống của cột.
       Class do JS gắn (initFooterCollapse) nên không phụ thuộc :has(). */
    .footer-section .ptk-footer-recent-col {
        display: none;
    }

    /* Footer bớt cao */
    .footer-section .footer-top.space {
        padding-top: 56px;
        padding-bottom: 32px;
    }
}

/* ==========================================================================
   F. HAMBURGER — bỏ viền tròn
   ========================================================================== */

/* 15. Nút mở menu bỏ khung tròn, giữ vùng chạm >= 44px. */
.sidebar-btn,
.header-style1 .sidebar-btn,
.header-style5 .sidebar-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    line-height: normal;
    background: transparent;
}

.sidebar-btn .line {
    width: 26px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
}

.sidebar-btn .line:not(:last-child) {
    margin-bottom: 0;
}

@media (max-width: 575px) {

    .sidebar-btn {
        width: 44px;
        height: 44px;
    }

    .sidebar-btn .line {
        width: 24px;
    }
}

/* Nút đóng bên trong panel menu cũng bỏ vòng tròn cho đồng bộ */
.mobile-menu-wrapper .menu-toggle {
    border: 0;
    border-radius: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
}

/* Nút đóng rộng 44px (trước là 35px) nên logo trong panel chạm sát nút,
   chỉ còn 1px. Chừa chỗ ngay trên container để logo không thể chạm tới —
   cách này không phụ thuộc độ ưu tiên của các rule đặt width cho <img>. */
.mobile-menu-wrapper .mobile-logo {
    padding-right: 76px;
}

/* ==========================================================================
   G. BREADCRUMB — xuống dòng gọn trên màn hẹp
   ========================================================================== */

/* 16. .page-breadcrumb vốn là inline-block dạng viên thuốc (border-radius 18px).
   Tiêu đề dài -> chữ tràn hoặc xuống dòng lệch, dấu "/" rơi đầu dòng.
   Chuyển sang flex-wrap, canh giữa, bo góc mềm hơn khi nhiều dòng. */
@media (max-width: 767px) {

    /* Dùng luồng inline (KHÔNG dùng flex): flex biến mỗi <li> thành một ô
       riêng, khiến dấu "/" bị đẩy lẻ ra đầu dòng khi mục cuối xuống hàng.
       Với inline, dấu "/" chảy liền mạch cùng chữ như một câu bình thường. */
    .page-title .page-breadcrumb {
        display: block;
        max-width: 100%;
        margin-top: 14px;
        padding: 9px 18px;
        border-radius: 16px;
        text-align: center;
        line-height: 1.6;
    }

    .page-title .page-breadcrumb li {
        display: inline;
        font-size: 14px;
        line-height: 1.6;
    }

    .page-title .page-breadcrumb li a {
        display: inline;
        font-size: 14px;
    }

    .page-title .page-breadcrumb li a > i {
        margin-right: 6px;
    }

    /* Dấu "/" bám sát mục phía sau */
    .page-title .page-breadcrumb li > span {
        padding: 0 5px 0 0;
        opacity: .55;
    }

    /* Tiêu đề trang dài: ngắt từ hợp lý thay vì tràn */
    .page-title .title {
        overflow-wrap: break-word;
        hyphens: none;
    }
}

@media (max-width: 400px) {

    .page-title .page-breadcrumb {
        padding: 8px 12px;
        gap: 1px 5px;
    }

    .page-title .page-breadcrumb li,
    .page-title .page-breadcrumb li a {
        font-size: 13px;
    }
}

/* ==========================================================================
   H. FORM LIÊN HỆ — nới rộng vùng nhập trên mobile
   ========================================================================== */

/* 17. .contact-form đang có padding 50px hai bên (575px trở xuống là 30px),
   cộng thêm padding-left 52px của input để chừa chỗ icon -> vùng gõ chữ chỉ
   còn ~199px trên màn 375px. Giảm lề để ô nhập rộng hơn đáng kể. */
/* Lưu ý độ ưu tiên: theme đặt padding qua
     .tv-contact-section.inner .contact-form                                (0,3,0)
     .tv-contact-section.inner .contact-form .contact_form .form-grid input (0,4,1)
   nên phải viết selector tương đương mới ghi đè được. */
@media (max-width: 991px) {

    .contact-form,
    .tv-contact-section .contact-form,
    .tv-contact-section.inner .contact-form {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Icon lùi vào sát mép ô nhập hơn */
    .contact-form .form-group .icon,
    .tv-contact-section.inner .contact-form .form-group .icon {
        left: 18px;
    }

    .contact-form form .form-grid input,
    .contact-form form .form-grid select,
    .contact-form form .form-grid textarea,
    .tv-contact-section.inner .contact-form .contact_form .form-grid input,
    .tv-contact-section.inner .contact-form .contact_form .form-grid select {
        padding-left: 44px;
        padding-right: 16px;
    }

    /* Textarea dùng selector .form-group (không phải .form-grid).
       Canh lề trái bằng với các ô nhập có icon cho thẳng hàng. */
    .contact-form form .form-group textarea,
    .contact-form form .form-grid textarea,
    .tv-contact-section.inner .contact-form .contact_form .form-group textarea {
        padding-left: 44px;
        padding-right: 16px;
    }

    .contact-form .sec-title {
        font-size: 26px;
        line-height: 1.25;
    }
}

@media (max-width: 575px) {

    .contact-form,
    .tv-contact-section .contact-form,
    .tv-contact-section.inner .contact-form {
        padding-top: 36px;
        padding-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .contact-form .form-group .icon,
    .tv-contact-section.inner .contact-form .form-group .icon {
        left: 15px;
    }

    .contact-form form .form-grid input,
    .contact-form form .form-grid select,
    .contact-form form .form-group textarea,
    .tv-contact-section.inner .contact-form .contact_form .form-grid input,
    .tv-contact-section.inner .contact-form .contact_form .form-grid select,
    .tv-contact-section.inner .contact-form .contact_form .form-group textarea {
        padding-left: 40px;
    }
}

/* ==========================================================================
   I. MENU XỔ XUỐNG (desktop) — thiếu padding phải
   ========================================================================== */

/* 18. Theme đặt .main-menu ul.sub-menu { padding: 15px 25px; padding-right: 0 }
   — trái 25px, phải 0. Với nhãn tiếng Anh ngắn thì không lộ, nhưng nhãn tiếng
   Việt dài ("Website doanh nghiệp & Thương mại điện tử") chạm sát mép phải.
   Trả lại padding cân đối hai bên. */
.main-menu ul.sub-menu,
.sticky-header .main-menu ul.sub-menu {
    padding-right: 25px;
}

/* Mục có menu con dùng ::after (mũi tên ">") đặt ở right:20px —
   chừa thêm chỗ để mũi tên không đè lên chữ. */
.main-menu ul.sub-menu li.menu-item-has-children > a {
    padding-right: 22px;
}

/* Mega menu (nếu dùng) cũng canh lề giống nhau */
.main-menu .tv-mega-menu {
    padding-left: 25px;
    padding-right: 25px;
}

/* ==========================================================================
   J. LOGO HEADER — dùng bản xanh trên nền sáng
   ========================================================================== */

/* 19. Header có 2 logo: img:first-child = bản TRẮNG, img:last-child = bản XANH.
   Theme chỉ đổi sang bản xanh trong @media (max-width: 991px), nên từ 992px
   trở lên mọi trang con (header nền trắng #f8f9ff) đều hiển thị logo TRẮNG
   -> chỉ còn thấy chữ "P", phần "TK SOLUTIONS" mất hút.
   Trang chủ giữ logo trắng vì header nằm đè lên hero tối. */
@media (min-width: 992px) {

    body:not(.home10-page) .tv-header .header-logo a img:first-child {
        display: none;
    }

    body:not(.home10-page) .tv-header .header-logo a img:last-child {
        display: inline-block;
    }
}

/* Sticky header luôn có nền trắng mờ -> luôn dùng logo xanh */
.sticky-header .header-logo a img:first-child {
    display: none;
}

.sticky-header .header-logo a img:last-child {
    display: inline-block;
}

/* ==========================================================================
   K. MÀU HOVER TRÊN NỀN TỐI
   ========================================================================== */

/* 20. --theme-color (#1053f3) đặt trên nền footer / menu mobile (#061153)
   chỉ đạt tỉ lệ tương phản 2.95:1 — thấp hơn mức tối thiểu 4.5:1 của WCAG AA.
   Chữ ở trạng thái thường là trắng (~16:1), nên khi hover chữ lại KHÓ đọc hơn.
   Dùng biến thể sáng của màu thương hiệu cho nền tối: 7.2:1 (đạt AAA). */
:root {
    --ptk-hover-on-dark: #6ea8ff;
}

.footer-section .footer-widget ul li a:hover,
.footer-section .footer-widget ul li a:focus-visible,
.footer-section .footer-brand .contact-info .contact-item a:hover,
.footer-section .footer-bottom p a:hover,
.footer-section .footer-bottom .footer-policy a:hover,
.footer-section .recent-post-item a:hover {
    color: var(--ptk-hover-on-dark);
}

/* Menu mobile (panel nền tối) — mục đang chọn và trạng thái hover */
.mobile-menu ul li.active > a,
.mobile-menu ul li.active-class > a,
.mobile-menu .navigation li a:hover,
.mobile-menu .navigation li a:focus-visible,
.mobile-menu-wrapper .sidebar-wrap a:hover,
.mobile-menu-area .contact-list-one a:hover,
.mobile-menu-area .social-links li a:hover {
    color: var(--ptk-hover-on-dark);
}

.mobile-menu ul li.active-class > a:before {
    background: var(--ptk-hover-on-dark);
    border-color: var(--ptk-hover-on-dark);
}

/* ==========================================================================
   L. HOẠ TIẾT THƯƠNG HIỆU — thay bông hoa / dấu hoa thị bằng chữ P
   ========================================================================== */

/* 21. Icon trong dải marquee: trước dùng marquee-icon.png (24x25px),
   nay thay bằng ptk-mark-white.svg (tỉ lệ 200x257 -> cao hơn rộng).
   Cố định chiều cao để khớp cỡ chữ, chiều rộng tự co theo tỉ lệ. */
.marquee_mode img.icon,
.marquee-wrap img.icon,
.slider__marquee img.icon {
    width: auto;
    height: 26px;
    max-width: none;
    flex-shrink: 0;
    vertical-align: middle;
}

@media (max-width: 767px) {

    .marquee_mode img.icon,
    .marquee-wrap img.icon,
    .slider__marquee img.icon {
        height: 20px;
    }
}

/* 22. Chữ P ở tâm huy hiệu xoay (video-box / about spin) */
.circle-box .logo-box img,
.circle-box .logo-box > img {
    width: auto;
    height: 46px;
    max-width: 70%;
    object-fit: contain;
}

@media (max-width: 575px) {

    .circle-box .logo-box img {
        height: 34px;
    }
}

/* 23. Khoá hiệu ứng hover trên 3 icon quy trình (chữ P).
   Theme gốc cho khuôn clip xoay 360° khi hover
   (.process-box:hover .clip-svg path { animation: rotate-path }) — hợp lý với
   hoạ tiết bông hoa đối xứng, nhưng chữ P xoay thì mất nhận diện thương hiệu.
   Ngoài ra `animation` tác động lên `transform` sẽ ghi đè transform căn chỉnh
   đặt trên từng <path>, làm chữ P nhảy lệch vị trí ngay khi rê chuột. */
.process-box:hover .clip-svg path,
.tv-process-section.style-3 .process-inner .process-box:hover .clip-svg path,
.process-box .clip-svg path {
    animation: none !important;
    transform-origin: 0 0;
}

.process-box:hover .bg-shape,
.tv-process-section.style-3 .process-inner .process-box:hover .bg-shape {
    transform: none;
}

/* ==========================================================================
   M. TIÊU ĐỀ, NÚT BẤM, HERO
   ========================================================================== */

/* 24. LỖI: chữ P ở 3 icon quy trình không hiện.
   <svg class="clip-svg"> chỉ để chứa <clipPath> (không vẽ gì) nhưng theme
   không ẩn nó khỏi layout. .process-img là flex container -> chiếc <svg> này
   chiếm hết chỗ, đẩy <img> xuống 0x0 nên không thấy gì.
   Đưa nó ra khỏi luồng layout. */
.clip-svg {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

.process-img {
    position: relative;
}

.process-img img.main-img {
    flex: 0 0 auto;
    width: 258px;
    height: 258px;
    max-width: 100%;
    object-fit: cover;
}

@media (max-width: 575px) {

    .process-img img.main-img {
        width: 220px;
        height: 220px;
    }
}

/* --------------------------------------------------------------------------
   25. Tiêu đề: không để rớt dòng chỉ còn 1 chữ
   -------------------------------------------------------------------------- */

/* text-wrap: balance chia đều số chữ trên các dòng -> tránh dòng cuối mồ côi.
   (Hiệu ứng SplitType đã được sửa ở main.js để tách theo TỪ trước, nếu không
   mỗi ký tự là một inline-block và dòng sẽ ngắt giữa từ.) */
.sec-title,
.hero-content .hero-title,
.hero-content .title,
.title-anim,
.page-title .title,
.ptk-section-heading h2,
.ptk-detail-hero h1,
h1, h2, h3 {
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
}

/* Bọc từ do SplitType tạo ra: giữ ký tự dính nhau trong một từ */
.sec-title .word,
.hero-content .hero-title .word,
.title-anim .word {
    display: inline-block;
    white-space: nowrap;
}

/* Giảm nhẹ cỡ tiêu đề mục để câu đủ chỗ trên ít dòng hơn */
@media (min-width: 992px) {

    .sec-title {
        font-size: 40px;
        line-height: 1.18;
    }

    .ptk-section-heading h2 {
        font-size: clamp(30px, 3vw, 44px);
    }
}

/* --------------------------------------------------------------------------
   26. Nút bấm: căn giữa icon theo chiều dọc
   -------------------------------------------------------------------------- */

/* Theme đặt .arrow-all { position:absolute; top:10px/12px } — cố định theo px
   nên lệch khi nút cao khác nhau (nút cao 58px, vòng tròn 30px -> phải là 14px).
   .arrow-all-2 thì position:static và lệch -5px.
   Ngoài ra CSS gốc viết cho <svg> bên trong, còn markup lại dùng icon
   FontAwesome <i> nên các quy tắc định vị svg không áp dụng được. */
.theme-btn {
    align-items: center;
}

.theme-btn .arrow-all {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    margin-top: 0;
}

/* .arrow-all-2 là flex item tĩnh; theme để align-items:normal nên nó bị kéo
   giãn -> lệch tâm 5px. Chỉ cần align-self, TUYỆT ĐỐI không đổi position:
   theme có sẵn `right: 17px`, nếu chuyển sang position:relative thì thuộc tính
   này kích hoạt và kéo mũi tên sang trái, đè lên chữ. */
.theme-btn .arrow-all-2 {
    align-self: center;
}

/* Chỉ căn lại icon dạng FONT (FontAwesome). 40/42 nút dùng <svg> bên trong <i>
   với các svg định vị tuyệt đối + overflow:hidden để trượt khi hover — ghi đè
   width/height/overflow của chúng sẽ làm hiện cả 2 svg và tràn ra đè lên chữ. */
.arrow-all i:not(:has(svg)),
.arrow-all-2 i:not(:has(svg)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    line-height: 1;
    overflow: visible;
}

.arrow-all i:not(:has(svg))::before,
.arrow-all-2 i:not(:has(svg))::before {
    line-height: 1;
    display: block;
}

/* --------------------------------------------------------------------------
   27. Hero: giảm 20% cỡ chữ
   -------------------------------------------------------------------------- */
.tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
    font-size: 88px;   /* 110 -> 88 */
}

@media (max-width: 1299px) {

    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
        font-size: 80px;   /* 100 -> 80 */
    }
}

@media (max-width: 1199px) {

    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
        font-size: 64px;   /* 80 -> 64 */
    }
}

@media (max-width: 575px) {

    .tv-hero-section .hero-inner .hero-slider .hero-area .hero-content .hero-title {
        font-size: 48px;   /* 60 -> 48 */
    }
}

/* Trang chủ đặt !important ở breakpoint mobile -> phải ghi đè cùng mức */
@media (max-width: 991px) {

    body.home10-page .tv-hero-section .hero-content .hero-title {
        font-size: 34px !important;   /* 42 -> 34 */
    }
}

/* ==========================================================================
   N. THẺ DỊCH VỤ & HIỆU ỨNG CUỘN CHO TRANG CON
   ========================================================================== */

/* 28. Tiêu đề thẻ dịch vụ đè lên huy hiệu số (01..06).
   .icon-top là position:absolute ở góc phải trên (rộng 60px) nhưng
   .service-top không chừa chỗ -> tiêu đề dài chạy vào dưới huy hiệu. */
.service-box-five .service-top,
.service-box-five > h4,
.service-box-five .service-top h4 {
    padding-right: 68px;
}

.service-box-five .service-top {
    align-items: flex-start;
}

.service-box-five .service-top h4 {
    overflow-wrap: break-word;
    text-wrap: pretty;
}

@media (max-width: 575px) {

    .service-box-five .service-top,
    .service-box-five .service-top h4 {
        padding-right: 56px;
    }
}

/* Nút trong thẻ: chữ và mũi tên không được chồng nhau */
.service-box-five .theme-btn {
    align-items: center;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   29. Hiệu ứng "trôi lên" khi cuộn cho các trang con
   JS: ptk-theme.js -> initScrollReveal() gắn class .ptk-reveal / .ptk-reveal-img
   -------------------------------------------------------------------------- */
.ptk-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
                transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.ptk-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Ảnh: trôi lên nhẹ hơn + hơi phóng to cho mềm */
.ptk-reveal-img {
    opacity: 0;
    transform: translateY(16px) scale(1.02);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.ptk-reveal-img.is-revealed {
    opacity: 1;
    transform: none;
}

/* Sau khi hiện xong thì bỏ will-change để đỡ tốn bộ nhớ GPU */
.ptk-reveal.is-revealed,
.ptk-reveal-img.is-revealed {
    will-change: auto;
}

/* Người dùng chọn giảm chuyển động -> hiện ngay, không animate
   (JS cũng đã bỏ qua, đây là lớp bảo vệ thứ hai) */
@media (prefers-reduced-motion: reduce) {

    .ptk-reveal,
    .ptk-reveal-img {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   O. HERO BANNER — không cắt mất đầu mascot
   ========================================================================== */

/* 30. Ảnh hero tỉ lệ 1.78 (1672x941), khung hero cao 650-780px.
   Theme để `background-position: center center` + `cover`, nên trên màn rộng
   (>= ~1600px) ảnh scale theo bề ngang, phần dư chiều cao bị cắt ĐỀU trên và
   dưới — 60px ở 1600px, tới 161px ở 1920px. Đầu mascot chỉ cách mép trên ảnh
   khoảng 6% nên bị cắt cụt.

   Chỉ đổi TRỤC DỌC về mép trên, giữ nguyên trục ngang mà theme đã canh
   (center ở desktop, 68% ở mobile) để không làm mascot che chữ nhiều hơn. */
.tv-hero-section .hero-area > .bg.image,
body.home10-page .tv-hero-section .hero-area > .bg.image {
    background-position-y: top;
}
/* ==========================================================================
   CTA + FOOTER — dùng cùng bố cục trang chủ trên mọi trang
   ========================================================================== */
.newsletter-section .newsletter {
    gap: 42px;
    padding: 28px 50px 28px 0;
}
.newsletter-section .image-text {
    flex: 1 1 480px;
    min-width: 0;
}
.newsletter-section .image-text .title {
    width: max-content;
    max-width: 520px;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
.newsletter-section .newsletter-form {
    flex: 0 1 470px;
    min-width: 360px;
}
.newsletter-section {
    margin-top: -24px;
}

/* Footer gọn hơn: theme mặc định dùng .space = 120px cho cả hai chiều. */
.footer-section .footer-top.space {
    padding-top: 68px;
    padding-bottom: 56px;
}
.footer-section .footer-bottom {
    padding-top: 22px;
    padding-bottom: 22px;
}
.footer-section .footer-brand .contact-info {
    margin: 28px 0 24px;
    padding-bottom: 22px;
}

@media (max-width: 1199px) {
    .newsletter-section .newsletter {
        gap: 24px;
        padding: 30px 28px;
    }
    .newsletter-section .image-text .title {
        width: auto;
        white-space: normal;
        text-wrap: balance;
    }
}

@media (max-width: 991px) {
    .newsletter-section {
        margin-top: 0;
        margin-bottom: 0 !important;
    }
    .newsletter-section .newsletter {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 30px;
    }
    .newsletter-section .image-text,
    .newsletter-section .newsletter-form {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .newsletter-section .image-text {
        justify-content: center;
        padding-left: 0;
    }
    .newsletter-section .image-text .title {
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .newsletter-section .newsletter {
        gap: 18px;
        padding: 24px 20px;
    }
    .newsletter-section .newsletter-form {
        min-width: 0;
    }
    .footer-section .footer-top.space {
        padding-top: 48px;
        padding-bottom: 38px;
    }
    .footer-section .footer-bottom {
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

/* ==========================================================================
   P. THÔNG BÁO SAU KHI GỬI FORM
   ========================================================================== */

/* Khung chữ nằm ngay dưới form, do assets/js/ptk-forms.js chèn vào.
   Trước đây theme chỉ hiện popup đỏ "Oops! There was a problem." ở góc màn hình
   vì form gửi tới endpoint không tồn tại. */
.ptk-form-notice {
    display: none;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
}

.ptk-form-notice.is-visible {
    display: block;
}

.ptk-form-notice.is-success {
    border: 1px solid #b7e4c7;
    background: #e7f8ee;
    color: #12704a;
}

.ptk-form-notice.is-error {
    border: 1px solid #f5c2c7;
    background: #fdeaec;
    color: #a4232f;
}

/* Trên nền tối (form trong khối xanh đậm) */
.bg-dark .ptk-form-notice.is-success,
.tv-contact-section.style-5 .ptk-form-notice.is-success,
.newsletter .ptk-form-notice.is-success {
    border-color: rgba(115, 230, 255, .5);
    background: rgba(115, 230, 255, .14);
    color: #d6f6ff;
}

.bg-dark .ptk-form-notice.is-error,
.tv-contact-section.style-5 .ptk-form-notice.is-error,
.newsletter .ptk-form-notice.is-error {
    border-color: rgba(255, 155, 165, .5);
    background: rgba(255, 155, 165, .14);
    color: #ffdfe2;
}

/* Nút đang gửi */
.ptk-form-notice ~ button[disabled],
form button[disabled] {
    opacity: .65;
    cursor: progress;
}