/* Tablet layouts: compact navigation, bounded cards and a contained photo gallery. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    html body .v3-list-ql { margin-top: 64px !important; }
    html body .v3-list-ql .v3-list-ql-inn {
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
    }
    html body .v3-list-ql .v3-list-ql-inn > ul {
        display: flex !important;
        justify-content: center;
        width: max-content !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
    html body nav.tgg-mobile-breadcrumb-r22c {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 24px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
    html body .hom-head .hom-top > .container { box-sizing: border-box !important; }
    html body .hom-top .hom-nav { width: 100% !important; max-width: 100% !important; }
    html body .list-pg-bg .com-padd {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 240px !important;
        gap: 20px !important;
        align-items: start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    html body .list-pg-bg .com-padd::before,
    html body .list-pg-bg .com-padd::after { display: none !important; }
    html body .list-pg-bg .com-padd > .list-pg-lt,
    html body .list-pg-bg .com-padd > .list-pg-rt {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    html body .list-pg-bg .product-img-slide { width: 100% !important; min-width: 0 !important; }
    html body .list-pg-bg .product-img-slide .slider-for { width: 80% !important; min-width: 0 !important; }
    html body .list-pg-bg .product-img-slide .slider-nav { width: 17% !important; }
    html body .list-pg-bg .pglist-p-com-ti h1 { overflow-wrap: anywhere; }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
    html body .list-pg-bg .com-padd { grid-template-columns: minmax(0, 1fr) !important; }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
    html body .hom-top .hom-nav #userNotification .badge,
    html body .hom-top .hom-nav #userMessages .badge,
    html body .hom-top .hom-nav #userMessages .tgg-message-unread-badge {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        bottom: auto !important;
        left: auto !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 1px 4px !important;
        line-height: 14px !important;
        font-size: 10px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }
    html body .tgg-homepage-v1 .news-hban-box .txt .news-cate {
        display: inline-block !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 4px 8px !important;
        margin: 8px 0 !important;
        border-radius: 4px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
    html body main.tgg-homepage-v1 > section > .all-jobs-ban { padding-top: 44px !important; }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
    html body main.tgg-homepage-v1 .all-jobs-ban > .container > .row > br { display: none !important; }
    html body main.tgg-homepage-v1 .all-jobs-ban { padding: 20px 0 !important; }
    html body main.tgg-homepage-v1 .all-jobs-ban .jtit { padding: 0 !important; margin: 0 !important; }
    html body main.tgg-homepage-v1 .all-jobs-ban .jtit h1 {
        padding: 0 !important; margin: 0 0 8px !important; font-size: 28px !important; line-height: 1.25 !important;
    }
    html body main.tgg-homepage-v1 .all-jobs-ban .jtit p {
        padding: 0 !important; margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important;
    }
    html body main.tgg-homepage-v1 .all-jobs-ban .job-sear {
        margin: 20px auto !important;
        padding: 0 !important;
        height: auto !important;
    }
    html body main.tgg-homepage-v1 .all-jobs-ban .ban-short-links {
        margin-top: 16px !important;
        padding: 0 !important;
    }
    html body main.tgg-homepage-v1 .all-jobs-ban .ban-short-links .v3-list-ql-inn > ul > li {
        height: auto !important;
        min-height: 48px !important;
        overflow: visible !important;
    }
    html body main.tgg-homepage-v1 .all-jobs-ban .ban-short-links .v3-list-ql-inn > ul > li > div {
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        position: relative !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 8px 12px !important;
        gap: 10px !important;
    }
    html body main.tgg-homepage-v1 .all-jobs-ban .ban-short-links .v3-list-ql-inn > ul > li > div > img {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        margin: 0 !important;
    }
    html body main.tgg-homepage-v1 .all-jobs-ban .ban-short-links .v3-list-ql-inn > ul > li > div > h4 {
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    html body main.tgg-homepage-v1 .news-hom-ban-sli .sp-t > div {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    html body main.tgg-homepage-v1 .news-hom-ban-sli .sp-t > a {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
    html body .hom-head .hom-top,
    html body .hom-head .hom-top.dmact {
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 !important;
    }
    html body .hom-head .hom-top > .container {
        width: 100% !important;
        max-width: 1120px !important;
        height: 64px !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
    }
    html body .hom-top > .container > .row { margin: 0 !important; }
    html body .hom-top .hom-nav {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        height: 64px !important;
        min-width: 0 !important;
        float: none !important;
    }
    html body .hom-top .hom-nav > .top-log {
        order: 10 !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 112px !important;
        width: 112px !important;
        margin: 0 !important;
        position: static !important;
    }
    html body .hom-top .hom-nav > .top-log img {
        width: 112px !important;
        max-width: 100% !important;
        height: auto !important;
        position: static !important;
        margin: 0 !important;
    }
    html body .hom-top .hom-nav > .menu {
        order: 20 !important;
        flex: 0 0 auto !important;
        position: relative !important;
        inset: auto !important;
        margin: 0 !important;
        padding: 0 20px 0 0 !important;
        float: none !important;
    }
    html body .hom-top .hom-nav > .menu h4 {
        font-size: 14px !important;
        line-height: 44px !important;
        margin: 0 !important;
    }
    html body .hom-top .hom-nav > .menu::after { top: 18px !important; right: 3px !important; }
    html body .hom-top .hom-nav > .top-ser { display: none !important; }
    html body .hom-top .hom-nav > #userNotification.userNotifications,
    html body .hom-top .hom-nav > #userMessages.userMessages {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 44px !important;
        margin: 0 !important;
        float: none !important;
    }
    html body .hom-top .hom-nav > #userNotification { order: 40 !important; }
    html body .hom-top .hom-nav > #userMessages { order: 50 !important; }
    html body .hom-top .hom-nav > #userNotification > a,
    html body .hom-top .hom-nav > #userMessages > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        inset: auto !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }
    html body .hom-top .hom-nav > #userNotification > a > img,
    html body .hom-top .hom-nav > #userMessages > a > img {
        position: static !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
    }
    html body .hom-top .hom-nav > .tgg-auth-profile {
        order: 60 !important;
        display: block !important;
        flex: 0 1 140px !important;
        width: auto !important;
        min-width: 32px !important;
        max-width: 140px !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        margin: 0 !important;
        float: none !important;
    }
    html body .hom-top .hom-nav > .tgg-auth-profile .head-pro {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        max-width: 140px !important;
        position: relative !important;
        inset: auto !important;
        margin: 0 !important;
        padding: 0 12px 0 0 !important;
    }
    html body .hom-top .hom-nav > .tgg-auth-profile .head-pro > img {
        position: static !important;
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        object-fit: cover;
        border-radius: 50%;
    }
    html body .hom-top .hom-nav > .tgg-auth-profile .head-pro h4 {
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 20px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
    html body .hom-top .hom-nav > .tgg-auth-profile::after { top: 12px !important; right: 0 !important; }
    html body .hom-top .hom-nav > .tgg-auth-post-action {
        order: 30 !important;
        margin: 0 0 0 auto !important;
        flex: 0 0 auto !important;
        position: static !important;
        float: none !important;
    }
    html body .hom-top .hom-nav > .tgg-auth-post-action li,
    html body .hom-top .hom-nav > .tgg-auth-post-action li > a {
        position: static !important;
        float: none !important;
        margin: 0 !important;
    }
    html body .hom-top .hom-nav > .tgg-auth-post-action li > a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    html body .hom-top .hom-nav > .tgg-language-selector {
        order: 70 !important;
        position: static !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    html body .hom-top .hom-nav > .tgg-guest-actions { margin-left: auto !important; }

    /* Home: remove legacy negative gutters and fixed-width floated cards. */
    html body .tgg-homepage-v1 .container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 1120px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body .tgg-homepage-v1 .row { margin-left: 0 !important; margin-right: 0 !important; }
    html body .tgg-homepage-v1 .all-jobs-ban {
        padding: 32px 0 28px !important;
    }
    html body .tgg-homepage-v1 .jtit h1 {
        font-size: clamp(26px, 3vw, 36px) !important;
        line-height: 1.25 !important;
        margin: 0 0 10px !important;
    }
    html body .tgg-homepage-v1 .jtit p { font-size: 15px !important; margin: 0 !important; }
    html body .tgg-homepage-v1 .job-sear { margin: 24px auto !important; max-width: 820px !important; }
    html body .tgg-homepage-v1 .ban-short-links .v3-list-ql-inn > ul {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body .tgg-homepage-v1 .ban-short-links .v3-list-ql-inn > ul > li {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        min-width: 0 !important;
    }
    html body .tgg-homepage-v1 .ban-short-links li > div { min-height: 64px !important; }
    html body .tgg-homepage-v1 .ban-short-links h4 { font-size: 12px !important; }
    html body .tgg-homepage-v1 .news-hom-ban-sli { padding: 28px 0 0 !important; }
    html body .tgg-homepage-v1 .news-hom-ban-sli .sub-tit { padding: 0 !important; margin: 0 0 16px !important; }
    html body .tgg-homepage-v1 .news-hom-ban-sli .sp-t {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }
    html body .tgg-homepage-v1 .news-hom-ban-sli .sp-t h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
    }
    html body .tgg-homepage-v1 .news-hom-ban-sli .sp-t small { font-size: 14px !important; }
    html body .tgg-homepage-v1 .news-hom-ban-sli-inn .col-sm-12 { padding: 0 !important; }
    html body .tgg-homepage-v1 .news-hom-ban-sli-inn ul:not(.slick-initialized) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body .tgg-homepage-v1 .news-hom-ban-sli-inn ul:not(.slick-initialized) > li {
        min-width: 0 !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }
    html body .tgg-homepage-v1 .news-hban-box { width: 100% !important; margin: 0 !important; }
    html body .tgg-homepage-v1 .news-hban-box .im {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 10px;
    }
    html body .tgg-homepage-v1 .news-hban-box .im img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    html body .tgg-homepage-v1 .news-hban-box h2 {
        font-size: 15px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }
    html body .tgg-homepage-v1 .news-hban-box .news-date { font-size: 12px !important; }

    /* Detail gallery: keep the entire photo visible and leave room for context. */
    html body .list-pg-bg > .container {
        width: 100% !important;
        max-width: 1080px !important;
        padding: 0 24px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    html body .list-pg-bg > .container > .row { margin: 0 !important; }
    html body .list-pg-bg .com-padd { padding: 20px 0 !important; }
    html body .list-pg-bg .tgg-listing-primary-title {
        font-size: clamp(24px, 2.6vw, 32px) !important;
        line-height: 1.3 !important;
        margin: 0 0 8px !important;
    }
    html body .list-pg-bg .pglist-p-com-ti { padding: 20px !important; }
    html body .list-pg-bg .pglist-p-com-ti h3 { font-size: 20px !important; }
    html body .list-pg-bg .detailbanner { padding: 16px 20px !important; }
    html body .list-pg-bg .product-img-slide .slider-for,
    html body .list-pg-bg .product-img-slide .slider-for .slick-list,
    html body .list-pg-bg .product-img-slide .slider-for .slick-track {
        height: min(48vh, 400px) !important;
    }
    html body .list-pg-bg .product-img-slide .slider-for img {
        width: 100% !important;
        height: min(48vh, 400px) !important;
        object-fit: contain !important;
        background: #f3f5f8;
    }
    html body .list-pg-bg .product-img-slide .slider-nav { max-height: 400px !important; }
    html body .list-pg-bg .product-img-slide .slider-nav img { object-fit: cover !important; }
    html body .list-pg-bg .shareDiv { padding: 16px 0 0 !important; }
    html body .list-pg-bg .list-pg-inn-sp { padding: 20px !important; }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
    html body .hom-top .hom-nav { gap: 8px !important; }
    html body .hom-top .hom-nav > .tgg-auth-post-action { display: none !important; }
    html body .hom-top .hom-nav > #userNotification.userNotifications { margin-left: auto !important; }
    html body .hom-top .hom-nav > .tgg-auth-profile { flex-basis: 100px !important; max-width: 100px !important; }
    html body .hom-top .hom-nav > .tgg-auth-profile .head-pro { max-width: 100px !important; }
    html body .tgg-homepage-v1 .news-hom-ban-sli-inn ul:not(.slick-initialized) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}