/* Min-width */
@media (min-width: 576px) {}

@media (min-width: 768px) {

    .container,
    .container-sm {
        max-width: 100%;
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .category-lists .col-xl-2 {
        width: 14.28%;
    }

    .category-lists span {
        max-width: 80%;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1215px;
    }
}


/* Max-width */
@media (max-width: 1299.98px) {
    .header-bottom .header-ul .line {
        margin: 0px 5px;
    }

    .search-wrapper.active {
        width: 200px;
    }
}

@media (max-width: 1199.98px) {
    .menu {
        display: none;
    }

    .menu-bar-res {
        display: flex;
        align-items: center;
    }
}

@media (max-width: 991.98px) {
    .header-bottom .logo {max-width:200px ;}
    .menu-wrapper:before {
        display: none;
    }

    .header-nav {
        padding: 5px 0;
    }

    .menu-wrapper {
        width: auto;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
        vertical-align: top;
    }

    .header-top {
        text-align: right;
    }

    .header-top marquee {
        width: calc(100% - 150px);
        margin-right: 0px;
    }

    .slideshow {
        width: 100%;
    }

    .footer-title {
        margin-bottom: 0px;
    }

    .wrap-whyus {
        margin-top: 0 !important;
        z-index: 1;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .wrap-whyus .whyus-list {
        height: auto !important;
        min-height: 85px;
        border-right: none;
        border-radius: 8px;
        margin-bottom: 0;
        text-align: center;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .wrap-whyus .whyus-list::before {
        border-radius: 8px;
    }

    .wrap-whyus .whyus-list:hover::before {
        top: 0 !important;
        background: #42ABFF;
    }

    .wrap-whyus .whyus-list:hover .icon,
    .wrap-whyus .whyus-list:hover .name {
        transform: none !important;
    }

    .visao-item {
        margin: 0px 0px 20px 0px !important;
        max-width: 100%;
    }

    #product-title {
        width: 100%;
        -webkit-line-clamp: 3;
    }

    .left-pro-detail,
    .right-pro-detail,
    .camket-pro-detail {
        width: 100% !important;
        padding: 0px;
    }
    
    .wrap-news .news-list > .is-big .image a { display: block; height: 100%;}
    .wrap-news .news-list > .is-big .image img { width: 100%; height: 100%; object-fit: cover;}
}

@media (max-width: 767.98px) {
    div#header {
        z-index: 1000;
        min-height: 46px;
    }

    .search-wrapper .btn {
        border-radius: 0;
        width: 36px;
    }

    .header-top marquee {
        width: calc(100%);
    }

    .search-wrapper.active {
        width: 100%;
        position: relative;
    }

    .slideshow .slider {
        width: 100%;
    }

    .title-main {
        margin-bottom: 15px;
    }

    .wrap-cauhoi {
        background: none;
    }

    .wrap-cauhoi .accordion {
        max-width: 100%;
    }

    .doitac-item {
        padding: 10px;
    }

    .wrap-newsletter .hotline {
        min-height: 135px;
        padding-left: 120px;
    }

    .wrap-newsletter .hotline span {
        font-size: 20px;
        padding-bottom: 10px;
    }

    .wrap-newsletter .hotline a {
        font-size: 35px;
        line-height: 40px;
    }

    .footer {
        padding-bottom: 50px;
    }

    .footer-ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer-ul li.line {
        display: none;
    }

    .footer-ul li {
        width: 50%;
    }

    .wrap-product-list .slider-products,
    .wrap-product-list .slider-product-thumbs {
        width: 100%;
    }

    .wrap-product-list .slider-product-thumbs {
        margin-bottom: 30px;
    }

    .product-item .image,
    .product-item .info {
        width: 100%;
    }

    .footer-statistic,
    .footer-copyright {
        text-align: center;
    }

    .vanhoa-item {
        max-width: 100%;
    }

    #chuyenkhoaTabs .nav-item {
        width: 49.5%;
        margin-bottom: 3px;
    }

    #chuyenkhoaTabs .nav-link {
        font-size: 14px;
        width: 100%;
    }

    #chuyenkhoaTabs .nav-link img {
        width: 20px;
    }

    .giatri-item .info {
        min-height: auto;
    }

    .news-item .name {
        min-height: auto;
    }

    .news-item .line {
        margin-top: 0px;
    }

    .wrap-history {
        background: #f8f8f8;
    }

    .wrap-history .slider-nav,
    .wrap-history .slider-for {
        width: 100%;
    }
    
    .year-item span { font-size: 18px; white-space: nowrap;}    

    /* .year-item.slick-current span {
        padding-left: 20px;
    } */

    /* .year-item.slick-current::before {
        right: auto;
        left: 0px;
    } */

    .attr-pro-detail,
    .camket-pro-detail {
        width: 100%;
    }

    .left-pro-detail {
        margin: 0px auto;
    }

    .left-pro-detail {
        width: 100%;
    }

    .right-pro-detail {
        width: 100%;
        ;
    }

    .menu-wrapper .menu-toggle {
        width: 54px;
    }

    .menu-header {
        padding: 10px;
    }

    .menu-header .btn-close-menu {
        border: 1px solid #e0e0e0;
        color: #333;
        line-height: 21px;
        padding: 7px 5px 7px 0;
        position: relative;
        text-align: right;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #6e6e6e;
    }

    .menu-header .btn-close-menu::before,
    .menu-header .btn-close-menu::after {
        content: "";
        position: absolute;
        width: 1px;
        top: 4px;
        left: 8px;
        background-color: #fff;
        height: 8px;
    }

    .menu-header .btn-close-menu::before {
        transform: rotate(45deg);
    }

    .menu-header .btn-close-menu::after {
        transform: rotate(-45deg);
    }

    .menu-dropdown {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        left: auto;
        width: 100vw;
        /* toàn bộ chiều ngang */
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        border: none;
        border-radius: 0px;
        padding: 0px;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
        transition: right 0.3s ease;
    }

    .menu-dropdown.open {
        display: block !important;
        right: 0;
        z-index: 1002;
    }

    .menu-left {
        width: 100px;
        /* height: calc(100vh - 49px); */
        border-right: 0px;
    }

    .menu-right {
        padding: 10px;
        background: #fff;
    }

    .menu-panel .category-item {
        width: calc(100% / 3);
        padding: 0px;
    }

    #thuong-hieu .category-item {
        width: calc(100% / 3 - 6px);
        padding: 0px;
    }

    .search-wrapper {
        height: 36px;
        border-radius: 5px;
    }
    .footer-article .logo { max-width: 90px;}
}

@media (max-width: 575.98px) {
    .menu-left li {
        padding: 7px 5px;
    }

    .gird-images {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 238px);
        grid-gap: 5px 5px;
    }

    .box-images:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .gradient-title {
        width: 300PX;
    }

    .cart .text-start {
        display: NONE;
    }

    .wrap-uudai {
        padding-top: 1rem;
        transform: translateY(0);
    }

    .wrap-counter .num {
        display: none
    }

    .banner h2 {
        font-size: 20px;
    }

    .btn-submain {
        font-size: 14px;
    }

    header#header.fixed {
        position: relative;
    }

    .title-main h2 {
        font-size: 22px;
    }

    .title-main::before {
        font-size: 5rem;
        line-height: 65px;
    }

    .wrap-diadiem-hot .service-list h2.name {
        font-size: 16px;
    }

    .wrap-counter .num {
        font-size: 4.5rem;
    }

    .wrap-counter .counter {
        font-size: 2.5rem;
    }

    .wrap-service-list .service-list .name {
        font-size: 17px;
    }

    .wrap-service-list .service-list .info h3 {
        font-size: 16px;
    }

    .wrap-service-list .service-list .info .line {
        margin: 5px auto;
    }

    .news-item .name a {
        height: 39px;
    }

    .news-item .desc {
        font-size: 13px;
    }

    .service-item .name {
        font-size: 18px;
    }

    .service-item .desc {
        font-size: 14px;
    }

    .item_history .name {
        font-size: 1.5rem;
    }

    .item_year {
        font-size: 17px;
    }

    #frm-newsletter {
        padding: 0px;
    }

    .notify-popup {
        bottom: 85px;
    }

    .news-item.list .image {
        width: 120px;
    }

    .news-item.list .info {
        width: calc(100% - 120px);
        padding: 0px 10px;
    }

    .title-main h2,
    .title-main h3,
    .title-main h4 {
        white-space: normal !important;
    }

    .choose-list button {
        font-size: 16px;
        margin-bottom: 5px;
        padding: 7px 15px 4px;
    }

    .left-pro-detail {
        width: 100%;
    }

    .khachhang-item {
        width: 300px;
    }

    .accordion-button {
        font-size: 16px;
    }

    .footer-payments {
        text-align: center;
    }

    .item_history .desc {
        margin-bottom: 0px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 3;
    }

    .category-item {
        padding: 5px;
        width: calc(100% / 3);
    }

    .wrap-brand .brand-item,
    .wrap-doitac .brand-item {
        width: calc(100% / 3 - .5rem);
    }

    .filter-brand .filter-dropdown-item {
        width: calc(100% / 3 - .5rem);
    }

    .cart-fixed {
        bottom: 100px;
    }

    .wrap-about .about-img {
        position: relative;
        text-align: left;
        padding-bottom: 20%;
    }

    .wrap-about .about-img img:nth-child(2) {
        margin-left: 0px;
        margin-top: 0px;
        position: absolute;
        right: 0px;
        top: 15%;
    }

    .gallery-pro-detail .gallery-pro-detail-left {
        width: 100%;
        margin: 0px;
        order: -1;
    }

    .gallery-pro-detail .slider-product-thumbs {
        width: calc(100% - 85px);
    }

    .gallery-pro-detail .slider-products {
        width: 100%;
    }
}

@media (max-width: 380.98px) {
    .product-video {
        width: 60px;
        height: 60px;
    }
}
/* ==================== ANH HOANG - vi mo ==================== */
@media (max-width: 991.98px) {
    /* card dich vu: ten nam trong .info, mac dinh opacity:0 + translateY(100%), chi hien
       khi :hover. May cam tay khong co hover -> ten dich vu KHONG BAO GIO hien, card chi
       con moi tam anh. Duoi 992px cho .info hien san. */
    .service-item .info { opacity: 1; visibility: visible; transform: translateY(0);}
    /* anchor nav trang gioi thieu: 6 muc khong du cho -> cho truot ngang, khong xuong dong lung tung */
    .anchor-nav ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;}
    .anchor-nav li { flex: 0 0 auto;}
        /* user chot 16/09/2026: mobile cho 6 muc XUONG DONG, khong cuon ngang, khong sticky */
    .anchor-nav ul { flex-wrap: wrap; row-gap: 4px;}
    .anchor-nav li + li { border-left: 0;}
    /* con so an tuong: nhom avatar chong it lai cho vua man hinh */
    /* (da bo: doi tac gio la owl-carousel, moi anh nam trong .owl-item nen img + img
       khong con khop; khoang cach do owl margin:10 lo) */
}
@media (max-width: 767.98px) {
    /* seo-text: thu gon them 1 chut cho man hinh nho */
    .seo-text { max-height: 96px;}
}

@media (min-width: 992px) {
    .wrap-project .project-gallery { display: flex; flex-wrap: nowrap; gap: 8px; overflow: hidden; margin-left: 0; margin-right: 0; height: clamp(360px, 32vw, 453px);}
    .wrap-project .project-col { flex: 0 0 73px; min-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; cursor: pointer; transition: flex-grow .6s cubic-bezier(.4, 0, .2, 1);}
    .wrap-project .project-col.active { flex-grow: 1;}

    /* Dai CHUA mo: bo tron 100px (trinh duyet tu cap lai con nua canh ngan = 36.5px
       tren dai 73px -> ra hai dau vien tron nhu Figma). Dai dang mo tra ve mac dinh.
       Dung :not(.active) chu KHONG de len roi de lai: nhu vay item active tu roi ve
       .rounded-lg (10px) cua base.css, khoi chep con so 10px ra cho thu hai — sau nay
       doi .rounded-lg thi cho nay tu theo. */
    .wrap-project .project-col .project-item { transition: border-radius .6s cubic-bezier(.4, 0, .2, 1);}
    .wrap-project .project-col:not(.active) .project-item { border-radius: 100px;}
    .wrap-project .project-item,
    .wrap-project .project-item > a { height: 100%;}
    .wrap-project .project-item > a { position: relative;}
    .wrap-project .project-item img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: auto; height: 100%; max-width: none; min-width: 100%; object-fit: cover;}
    /* caption chi hien o panel dang mo */
    .wrap-project .info { opacity: 0; visibility: hidden; transition: opacity .4s ease .15s, visibility .4s ease .15s;}
    .wrap-project .project-col.active .info { opacity: 1; visibility: visible;}
    /* --on: 1 = mui ten ngang (panel dang mo), 0 = mui ten khuyu cheo (dai hep) */
    .wrap-project .project-col .icon { --on: 0;}
    .wrap-project .project-col.active .icon { --on: 1;}
}


/* gia tri cot loi (trang gioi thieu): bo cuc CUNG theo Figma.
   Chi ap khi >=992px VA PHP da gan .is-arc (= dung 5 gia tri). Thieu 1 trong 2 dieu kien
   -> khong rule nao duoi day ap -> roi ve luoi 5 cot nhu cu. Guard nam o about_tpl.php.

   Canvas khoa ti le 1138/496 = DUNG khung Figma, nen moi so % duoi day dan thang tu Figma,
   khong phai px cung -> doi be rong man hinh khong lech (kinh-nghiem.md muc 1).

   MOI .col la MOT hop chua CA vong tron LAN chu, neo bang tam vong tron:
   chu dai ra thi hop cao them ve ca 2 phia, tam vong tron dung yen tren cung.
   Neu tach vong tron va chu thanh 2 khoi dinh vi rieng thi chu dai ra se day vong tron lech cung.
   Vi dung translateY(-50%) nen .giatri-item KHONG duoc co data-aos (AOS ghi de transform). */
@media (min-width: 992px) {
    .wrap-giatri .giatri-list.is-arc { position: relative; display: block; aspect-ratio: 1145 / 495; margin: 0;}
    .wrap-giatri .giatri-list.is-arc > * { position: absolute; width: auto; max-width: none; padding: 0; margin-top: 0; z-index: 2;}
    /* 3 lop hinh hoc export nguyen ban tu Figma (105:706 / 105:761 / 105:760).
       Toa do = so do Figma quy ve % cua khung 1138x496, khong phai px cung.
       preserveAspectRatio="none" da co san trong file -> keo theo % la khop y ban ve.
       z-index: 3 lop nay duoi cung (0) < anh container (1) < 5 the chu+vong tron (2),
       dung thu tu Figma: vong cung -> mang mo 1 -> mang mo 2 -> anh -> vong tron. */
    .wrap-giatri .giatri-list.is-arc .deco { position: absolute; z-index: 0; pointer-events: none;}
    .wrap-giatri .giatri-list.is-arc .deco-1 { left: 27.77%; top: 18.95%; width: 43.41%; height: 49.05%;}
    .wrap-giatri .giatri-list.is-arc .deco-2 { left: 32.60%; top: 23.59%; width: 33.83%; height: 38.51%;}
    .wrap-giatri .giatri-list.is-arc .deco-3 { left: 34.53%; top: 23.59%; width: 29.83%; height: 34.92%;}
    /* z-index 0: anh va cung nam DUOI 5 vong tron — Figma ve vong 01/05 de len goc anh.
       Ca 2 deu dung SAU .col trong DOM nen khong co z-index se de nguoc len tren. */
    .wrap-giatri .giatri-list.is-arc > .image { left: 30.04%; top: 0; width: 40.16%; z-index: 1;}
    /* toa do tam 5 vong tron, % cua khung 1138x496 */
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(1) { left: 0; top: 17.7%; width: 31.4%; transform: translateY(-50%);}
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(2) { left: 0; top: 49.2%; width: 35.1%; transform: translateY(-50%);}
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(3) { left: 37%; top: 59.9%; width: 24.9%;}
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(4) { right: 0; top: 49.2%; width: 36.1%; transform: translateY(-50%);}
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(5) { right: 1%; top: 18.3%; width: 31.6%; transform: translateY(-50%);}
    /* the trang cua che do luoi khong dung o day, chi con chu tren nen trang */
    .wrap-giatri .giatri-list.is-arc .giatri-item { display: flex; align-items: center; gap: 16px; border: 0; background: none; border-radius: 0;}
    /* vong tron: nen trang chu xanh (nguoc voi che do luoi), giu nguyen 80px cua style.css */
    .wrap-giatri .giatri-list.is-arc .icon { flex: 0 0 auto; color: var(--color-main); background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08);}
    /* 2 muc trai: chu ben trai, vong ben phai (DOM la icon truoc -> row-reverse) */
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(1) .giatri-item,
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(2) .giatri-item { flex-direction: row-reverse; text-align: right;}
    /* hang ngang: go margin-bottom cua vong tron, khong thi tam bi day len 8px khoi cung */
    .wrap-giatri .giatri-list.is-arc > .col:not(:nth-child(3)) .icon { margin-bottom: 0;}
    /* 2 muc phai: vong ben trai, chu ben phai */
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(4) .giatri-item,
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(5) .giatri-item { text-align: left;}
    /* muc day: vong tren, chu duoi -> neo bang top, khong can translateY */
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(3) .giatri-item { flex-direction: column;}
    
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(2) .info { margin-right: 10.5%;}
    .wrap-giatri .giatri-list.is-arc > .col:nth-child(4) .info { margin-left: 9.7%;}
    
}

/* tam nhin / su menh: Figma cao 474px, ma 2 the chi cao 308 -> noi dung khong du chieu cao
   de anh nen lo ra phan container ve o nua phai. Chot san chieu cao toi thieu (chinh vi mo). */
@media (min-width: 992px) {
    /* KHONG dung display:flex o day: .container se thanh flex item, co che margin:auto
       canh giua cua Bootstrap de lech. Chi chot min-height, phan du roi xuong duoi. */
    .wrap-tamnhin { min-height: 440px;}
}

/* tin tuc trang chu: duoi 992px la luoi Bootstrap - bai dau col-12 (nguyen hang),
   4 bai sau col-6 (2 the/hang) -> 1 + 2 + 2, khong con the le loi nua hang.
   Row phai co g-3, khong thi --bs-gutter-y = 0 -> cac hang the dinh liet vao nhau.
   Tu 992px doi sang CSS GRID 4 cot, .is-big chiem 2 cot x 2 hang ->
     hang 1: [ lon lon ] [2] [3]
     hang 2: [ lon lon ] [4] [5]
   Bootstrap col khong dien duoc "chiem 2 hang" nen phai dung grid o day.
   .is-big gan tu PHP ($k == 0), KHONG dung nth-child. */
@media (min-width: 992px) {
    .wrap-news .news-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-left: 0; margin-right: 0;}
    .wrap-news .news-list > * { width: auto; max-width: none; padding-left: 0; padding-right: 0; margin-top: 0;}
    .wrap-news .news-list > .is-big { grid-column: span 2; grid-row: span 2;}
    /* the lon cao gap doi -> cho anh gian ra chiem phan du, chu van nam duoi */
    .wrap-news .news-list > .is-big .news-item { display: flex; flex-direction: column;}
    .wrap-news .news-list > .is-big .image { flex: 1 1 auto; min-height: 0;}
    .wrap-news .news-list > .is-big .image a { display: block; height: 100%;}
    .wrap-news .news-list > .is-big .image img { width: 100%; height: 100%; object-fit: cover;}
}