/* ============================================================================
   LỚP RESPONSIVE cho template desktop (templates/)
   ----------------------------------------------------------------------------
   css/style.css gốc nặng 153 KB và KHÔNG có media query nào. File này đè lên
   nó thay vì sửa trực tiếp, nên muốn gỡ bỏ chỉ cần xoá một dòng <link> trong
   mystyle.php — không đụng gì tới file gốc.

   Nguyên tắc: giữ nguyên 100% giao diện trên màn hình rộng, chỉ can thiệp khi
   màn hình hẹp lại.

   Ghi chú kỹ thuật đã kiểm chứng bằng Chrome DevTools trên site thật:
     - .container / .row / .col-* đều là border-box
     - .row dùng margin âm -15px mỗi bên, .container không có padding bù
       => nội dung rộng 1215px thay vì 1200px, gây cuộn ngang. Sửa bằng cách
          cho .container padding 15px và max-width 1230px: trên màn hình rộng
          vùng nội dung vẫn đúng 1200px như cũ, nhưng hết tràn.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Khung chứa: co giãn được, hình thức trên desktop giữ nguyên
   ------------------------------------------------------------------------ */
.container,
.container_1100 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.container      { max-width: 1230px; }
.container_1100 { max-width: 1130px; }

/* .row20 dùng margin âm -20px (rộng hơn padding 15px của .container) nên thừa
   5px mỗi bên. Hạ về -15px cho khớp, đồng thời chỉnh padding cột tương ứng để
   khoảng cách giữa các cột vẫn là 30px như lưới .row. */
.row20 { margin-left: -15px; margin-right: -15px; }
[class*="col20-"] { padding-left: 15px; padding-right: 15px; }

/* Ảnh không bao giờ vượt khung cha */
.container img,
.container_1100 img,
.page-heading img,
.faq-block img,
#content img,
.block_footer img,
.ws_images img {
    max-width: 100%;
    height: auto;
}

/* Bảng rộng: cuộn ngang trong khung riêng thay vì làm vỡ cả trang */
.table-responsive,
.ta_noidung table,
#content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Video / bản đồ nhúng co theo khung */
iframe { max-width: 100%; }
.ggmaps iframe { width: 100%; }

/* Nội dung do người dùng nhập (CKEditor) hay có width cứng */
.ta_noidung img,
.ta_noidung iframe,
.ta_noidung table { max-width: 100% !important; }

/* Chống tràn do chuỗi dài không dấu cách (URL, mã sản phẩm) */
.ta_noidung, .faq-item__a, .page-heading__title, .home-intro__title {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Đường kẻ đứt dưới tiêu đề "... KHÁC" (trang chi tiết thi công / tin tức).
   style.css đặt cứng .title_main_n:after { width: 680px } — trên điện thoại
   380px nó rộng gần gấp đôi khung nhìn nên KÉO CẢ TRANG rộng ra 695px: nội
   dung chỉ chiếm nửa trái màn hình, nửa phải trống trơn và trang cuộn ngang
   được. Cho nó co theo khung cha, vẫn chặn ở 680px nên desktop giữ nguyên. */
.title_main_n:after {
    width: 100%;
    max-width: 680px;
}

/* ---------------------------------------------------------------------------
   2. Nút mở menu (hamburger) — ẩn trên desktop, hiện khi màn hình hẹp
   ------------------------------------------------------------------------ */
.menu-toggle {
    display: none;
    position: relative;
    width: 46px;
    height: 42px;
    padding: 10px 9px;
    margin: 2px 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 4px;
    cursor: pointer;
    z-index: 20;
}
.menu-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle span + span { margin-top: 5px; }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nút mở/đóng menu con trên mobile */
.submenu-toggle { display: none; }

/* ---------------------------------------------------------------------------
   3. Máy tính bảng ngang và màn hình nhỏ  (<= 1199px)
   ------------------------------------------------------------------------ */
@media (max-width: 1199px) {
    .col-offset-1, .col-offset-2, .col-offset-3,
    .col-offset-4, .col-offset-5, .col-offset-6 { margin-left: 0; }

    .top-menu div ul li a { padding: 15px 12px; font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   4. Máy tính bảng  (<= 991px) — chuyển sang menu hamburger
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {

    /* --- Menu --- */
    .main_menu { padding: 0; }
    .top-menu > div { position: relative; }

    .menu-toggle { display: block; margin: 6px 0; }

    /* Danh sách menu đổ dọc, ẩn cho tới khi bấm nút */
    .top-menu > div > ul.ul_menu_main {
        display: none;
        width: 100%;
        text-align: left;
        padding: 0 0 8px;
    }
    .top-menu > div > ul.ul_menu_main.is-open { display: block; }

    .top-menu div ul.ul_menu_main > li {
        display: block;
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .top-menu div ul.ul_menu_main > li > a {
        padding: 13px 4px;
        font-size: 15px;
    }
    .top-menu div ul li:hover { background-color: transparent; }
    .top-menu div ul.ul_menu_main > li:hover > a { color: #ff9db2; }

    /* Menu con: bỏ dropdown tuyệt đối, chuyển thành danh sách thụt vào */
    .top-menu div ul li .menu_list_m,
    .top-menu div ul li ul li .menu_cat_m,
    .top-menu div ul li ul li ul li .menu_item_m {
        position: static;
        visibility: visible;
        opacity: 1;
        display: none;
        width: 100%;
        top: auto;
        left: auto;
        background: rgba(0, 0, 0, .22);
        transition: none;
    }
    .top-menu div ul li .menu_list_m.is-open { display: block; }
    .top-menu div ul li .menu_list_m li a { padding: 11px 4px 11px 24px; font-size: 14px; }

    /* Nút mũi tên mở menu con */
    .has-sub { position: relative; }
    .submenu-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 46px;
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 17px;
        line-height: 46px;
        cursor: pointer;
        z-index: 5;
    }
    .submenu-toggle:before { content: "\25BC"; display: inline-block; transition: transform .2s ease; }
    .submenu-toggle.is-open:before { transform: rotate(180deg); }

    /* --- Lưới: 4 cột -> 2 cột, cột rộng -> tràn hàng --- */
    .col-3 { width: 50%; }
    .col-4 { width: 50%; }
    .col-2 { width: 33.33%; }
    .col-5, .col-6 { width: 50%; }
    .col-7, .col-8, .col-9, .col-10, .col-11 { width: 100%; }

    /* Lưới sản phẩm .col20-20pc (25%) -> 3 cột */
    .col20-20pc { width: 33.33%; }

    /* --- Cỡ chữ tiêu đề mục: 42px quá lớn cho khung hẹp --- */
    .title_main h2, .title_main h4 { font-size: 30px; line-height: 1.3; }
    .title_main_n h2, .title_main_n h4 { font-size: 24px; }
    .home-intro__title { font-size: 32px; }
    .faq-block__title { font-size: 27px; }

    /* --- Logo trên slider --- */
    .block_slider .logo img { max-width: 90px; }
}

/* ---------------------------------------------------------------------------
   5. Điện thoại  (<= 767px) — mỗi cột chiếm trọn một hàng
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 100%; }

    .col20-20pc { width: 50%; }
    .colcount_2 { column-count: 1; -webkit-column-count: 1; }

    /* Tiêu đề mục nhỏ lại cho vừa */
    .title_main h2, .title_main h4 { font-size: 24px; line-height: 1.3; }
    .title_main_n h2, .title_main_n h4 { font-size: 21px; }

    /* Nút liên hệ nổi bớt chiếm chỗ */
    .contact { right: 12px !important; }
    .contact li { margin-bottom: 34px; }

    /* Bảng trong nội dung: chữ nhỏ hơn cho đỡ phải cuộn nhiều */
    .ta_noidung table { font-size: 14px; }

    .block_slider .logo img { max-width: 70px; }
}

/* ---------------------------------------------------------------------------
   6. Điện thoại nhỏ  (<= 479px)
   ------------------------------------------------------------------------ */
@media (max-width: 479px) {
    .col-2 { width: 50%; }
    .title_main h2, .title_main h4 { font-size: 21px; }
    .home-intro__title { font-size: 22px; }
    .page-heading__title { font-size: 20px; }
}