/*
    Có nhiều độ phân giải theo các màn hình từ smartphone, tablet, pc
    320, 375, 414, 480, 568, 601, 640, 667, 736, 768, 800, 906, 1024, 1200, 1280, 1360, 1366 trở lên
    Lấy chuẩn nhỏ nhất là 320 cho trường hợp smartphone dựng dọc rồi chia theo khoảng

*/
/*================Tham khảo cách viết từ bootstrap================*/
/*Bắt đầu từ mobile, tức css viết ngoài cùng là css cho trường hợp mobile dựng dọc - thường là 1 cột, padding left right 15px*/


.cffffff { color: #fff; }

.fSFUHelveticaLight { font-family: SFUHelveticaLight; }

.c666 { color: #666; }

.fs23 { font-size: 23px; }

.khungAnhCrop0:hover img { transform: translate(-50%, -50%) scale(1); }

@media (min-width: 480px) {
    /*Bắt đầu từ 480 tính tương ứng với trường hợp mobile quay ngang - thường là 2 cột*/
}

@media (min-width: 768px) {
    /*Bắt đầu từ 768 tính tương ứng với trường hợp tablet dựng dọc - thường là 2 hoặc 3 cột*/
}

@media (min-width: 992px) {
    /*Bắt đầu từ 992 tính tương ứng với trường hợp tablet quay ngang - thường là 3 hoặc 4 cột*/
}

@media (min-width: 1200px) {
    /*Bắt đầu từ 1200 tính tương ứng với trường hợp lớn hơn tablet - bắt đầu của PC - thường là 4 hoặc 5 cột*/
    header {height: auto;}
}

/*================Đối với Tất Thành code bản pc trước, vì vậy sẽ viết ngược từ to về bé như sau================*/
/*css mặc định dành cho trường hợp pc 1360, 1366px trở lên*/

@media (max-width: 1359px) {
    /*Bắt đầu từ 1200 tính tương ứng với trường hợp lớn hơn tablet - bắt đầu của PC - thường là 4 hoặc 5 cột*/
}

@media (max-width: 1199px) {
    /*Bắt đầu từ 992 tính tương ứng với trường hợp tablet quay ngang - thường là 3 hoặc 4 cột*/
    .w980 { width: calc(100% - 40px) !important; }

    .row { margin: 0 -20px; }

    .BackToTop { display: none; }
    /*Left col*/
    .left { width: 27.58%; }

    .left .left2 .SanPham .fs13 { max-height: 52px; font-size: 12px; }

    .right { width: 69.65%; }

    .carousel li { width: 100% !important; }
    /*Header*/
    header.headrwd .menurps { float: left; margin-right: 55px; margin-top: 16px; }

    header.headrwd { height: auto; width: 100%; padding: 9px 0; display: table; background-image: linear-gradient(to top, #f6f6f6 0%, white 37%, white 100%); }

    header.headrwd .fr { padding-left: 39px; background: url('Layer-121.png') left center no-repeat; }

    header.headrwd .hrwd-hotline { font-weight: bold; color: #f30000; text-transform: uppercase; font-size: 15px; }


    #sidr { width: 254px; background: #0c96e1; }

    .sidr.left { left: -260px; right: auto; }

    #sidr .search__box { float: left; position: relative; margin: 10px 0 10px 10px; width: calc(100% - 36px - 15px); }

    #sidr .search__box input { height: 36px; font-size: 14px; margin: 0; background: #40bcff; color: #fff; }

    #sidr .search__box input::-moz-placholder, #sidr .search__box input::-webkit-input-placholder { color: #fff; opacity: 1; }

    #sidr .search__box .submit { display: block; background: url(icon_search.png) center center no-repeat; position: absolute; width: 36px; height: 36px; top: 0; right: 0; }

    #sidr #close__menu { float: left; display: block; background: url(close_menu.png) center center no-repeat; width: 36px; height: 36px; margin: 10px 0 10px 5px; }

    #sidr .lang { width: 100%; height: 48px; background: #007bbe; font-size: 14px; line-height: 48px; clear: both; padding-left: 20px; color: #fff; }

    #sidr .lang a:hover { color: #fff; }

    #sidr .lang img { vertical-align: middle; }

    #sidr .lang span { font-weight: bold; }

    #sidr .nav { height: calc(100% - 36px - 54px); overflow-y: scroll; margin-bottom: 0; }

    #sidr ul { border-top: 1px solid #ebebeb; border-bottom: none; background: #ebebeb; }

    #sidr ul li { border: none; border-bottom: 1px solid #cccccc; height: 44px; line-height: 44px; clear: both; }

    #sidr ul li.active { background: #007bbe; position: relative; }

    #sidr ul li.active a { color: #fff; }

    #sidr ul li.active:before { content: ""; height: 100%; width: 4px; background: #40bcff; left: 0; position: absolute; }

    #sidr ul li ul { display: none; border-top: none; clear: both; background: #0c96e1; }

    #sidr ul li ul li { background: url(bullet_menu.jpg) 35px 20px no-repeat; padding-left: 35px; }

    #sidr ul li ul li a { width: 100%; padding-right: 5px; color: #fff; font-size: 14px; }

    #sidr ul li a { color: #333; padding-left: 20px; width: calc(100% - 30px); float: left; display: block; }

    #sidr ul li > span { margin-right: 16px; margin-top: 14px; padding: 0; display: block; width: 14px; height: 14px; background: url(plus.png) center center no-repeat; }

    #sidr ul li > span.active { background: url(minus.png) center center no-repeat; }

    #sidr, #sidr ul li:hover > a, #sidr ul li > span:hover, #sidr ul li:hover > span { -webkit-box-shadow: none; -ms-box-shadow: none; box-shadow: none; }

    header.headrwd .menurps { margin-right: 18px; }
    /*Banner*/
    #Banner { height: auto !important; }

    #Banner .container { height: auto !important; }

    #Banner .item img { width: 100% !important; height: auto !important; }
    /*News*/
    #News { margin: 0 !important; }

    #News .title, #Store .title, #Product .title { padding: 0; height: auto; /*overflow: inherit;*//*Duc sua*/overflow: hidden !important; margin: 22px 0; }

    .date img { padding-right: 0; padding-left: 0; }

    .date img:nth-of-type(2) { margin-left: 5px; }
    /*News cate*/
    #News-Home .title { padding-top: 0; }

    #News-Home .item { width: calc((100% - 34px) / 3); }

    #News-Home .w980 .item:nth-child(3n + 2) { margin-right: 0; }

    #News-Home .w980 .item:nth-child(4n + 2) { margin-right: 17px; }

    #News-Home .item .desc { max-height: 75px; height: 75px;}
    /*News detail*/
    #News-Detail .left { width: 27.58%; }

    #News-Detail .right { width: 69.65%; }

    #News-Detail .TextSize img, #Introduce .TextSize img { max-width: 100%; height: auto; }
    /*#Product home*/


    #Product .product-slide .owl-next, #Product .product-slide .owl-prev { width: 30px; height: 50px; top: 15%; background: url("../css/Icon/arrow_tb.png"); }

    #Product .product-slide .product-item { width: calc(25% - 8px); }

    #Product .product-slide .owl-prev { left: 0; }

    #Product .product-slide .owl-next { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); right: 0; }

    #Product .product-slide .owl-next:hover, #Product .product-slide .owl-prev:hover { background: url(../css/Icon/arrow_tb.png); }
    /*Product category*/
    #Product-Home.fap .product-item:nth-child(3n + 2) { margin-right: 0 !important; }

    #Product-Home.fap .product-item:nth-child(4n + 2) { margin-right: 15px !important; }

    #Product-Home .product-item-test, #Product-Home .product-item { width: calc((100% - 30px) / 3) !important; margin-right: 15px !important; padding-bottom: 0; }

    #Product-Home .product-item-test:nth-child(4n + 2) { margin-right: 15px !important; }

    #Product-Home .product-item-test:nth-child(3n + 2) { margin-right: 0 !important; }
    /*Product detail*/
    #Product .product-slide { display: none; }

    #Product #product-slide-3 { display: block; }

    #Product #product-slide-3 .product-item { width: calc((100% - 34px) / 3); margin-right: 17px; }

    #Product #product-slide-3 .product-item:nth-child(3n) { margin-right: 0; }

    #Product-Detail .left { width: 27.58%; }

    #Product-Detail .right { width: 69.65%; }

    #Product-Detail .Product-Pic { width: 50.5%; overflow: hidden; }

    #Product-Detail .w320 { width: 46.73%; }

    #Product-Detail .Product-Pic .khungAnh .khungAnhHV .blur { margin-top: 29%; margin-left: 22%; }

    #Product-Detail .Red-Line { padding-bottom: 30px; overflow: hidden; width: 100% !important; }

    .left .AvatarBorder { margin: 16px 5px 5px 2px; }

    .left .Avatar { margin: 1px; }
    /*News home*/
    #News .Article { width: 57.15%; }

    #News .Article .above { width: calc(100% - 197px); padding-left: 20px; }

    #News .Article .above .new-top a { font-size: 18px; line-height: 24px; color: var(--color-sub); }

    #News .Other { width: 42.85%; padding-left: 20px; }

    #News .Other > a { font-size: 18px; line-height: 20px; color: var(--color-sub); }

    /*Store home*/
    #Store { padding-bottom: 30px; }

    #Store .w980 .fl { width: 20% !important; height: auto !important; }

    #Store .Map select { width: calc((100% - 80px) / 3) !important; height: 35px; margin-right: 10px; float: left; }

    #Store .Map input[type=text] { width: calc((100% - 80px) / 3) !important; height: 35px; margin-right: 60px; float: right; }

    #Store .w980 .Map { padding-top: 0; }

    #Store .w980 .Map .clgt { float: right; width: 80%; }

    #Store .map-border { width: 80%; float: left; height: 250px; overflow: hidden; }

    #Store .GG-map { width: 100%; height: 100%; }
    /*Store list*/
    #Store-List .vcl { padding-right: 10px; }

    #Store-List .timkiemm1 { width: 119px; height: 29px; font-size: 14px; background-color: var(--color-sub); }

    #Store-List .right select { width: 151px; height: 30px; background-color: #fafafa; border: 1px solid #d5d5d5; margin-right: 10px; padding-top: 5px; }

    #noidung1 .store-item { width: 100%; }

    #Store-List .right .info { width: calc(100% - 171px); }
    /*Pic Library*/
    #Picture-Lib-Detail .right .pic-border { width: calc((100% - 27px) / 2); margin-right: 27px; margin-bottom: 20px; }

    #Picture-Lib-Detail .right .container .khungAnh { width: calc(100% - 4px); }

    #Picture-Lib-Detail .right .pic-border:nth-child(2n) { margin-right: 0; }

    #Picture-Lib .w980 .item { width: calc((100% - 52px) / 3); margin-right: 26px; }

    #Picture-Lib .w980 .item:nth-child(3n + 2) { margin-right: 0; }

    #Picture-Lib .w980 .item:nth-child(4n + 2) { margin-right: 26px; }

    .Lib .item .Img-title { max-height: 45px; }

    #Video-Lib-Detail .Red-Line { width: 95% !important; padding-top: 0; }
    /*Map đại lý*/
    .modal-content { width: 727px; height: 482px; }

    .close { right: 24px; }
    /*Bottom slide*/
    #BotSlide .item { width: 99% !important; }
    /*Contact*/
    #Contact .container .row > .fl { width: 54.20%; }

    #Contact .container .row > .fr { width: 42.48%; }

    #Contact .pic-border { width: 100% !important; }

    #Contact .GG-map { height: 320px !important; overflow: hidden; }
    /*Partner*/
    #Partner .khungAnh { width: calc((100% - 36px) / 4); margin-right: 12px; margin-bottom: 20px; }

    #Partner .khungAnh:nth-child(4n) { margin-right: 0; }

    #Partner .container { padding-top: 30px !important; }
    /*Footer*/
    footer .contact { width: 240px; }

    footer .QA { width: 205px; margin-left: 30px; }

    footer .FaceBook { width: 220px !important; }

    footer .Copyright::before { border-color: #e7e7e7; }

    footer .Copyright::after { border-color: #e7e7e7; }
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
    /*Bắt đầu từ 480 tính tương ứng với trường hợp mobile quay ngang - thường là 2 cột*/
    #pro-info .left { width: 100%; }

    .w980 { width: calc(100% - 20px) !important; }

    .row { margin: 0 -10px; }

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

    #CommonTool { height: 40px; color: #ebebeb; font-size: 14px !important; line-height: 30px; color: #999; }

    #CommonTool .date, #CommonTool .view { font-size: 14px !important; color: #999; }

    #CommonTool .date { background: none; padding-left: 0; }

    #CommonTool .view { display: none; }

    #CommonTool a.LargeSize { width: 30px; height: 30px; background: url("Rectangle-30 copy 5.jpg"); }

    #CommonTool a.SmallSize { width: 30px; height: 30px; background: url("Rectangle-30 copy.jpg"); }

    #Banner2 { height: auto; }

    #Banner2 .owl-next, #Banner2 .owl-prev { top: 50%; transform: translateY(-50%); }

    #sidr .search__box { float: left; position: relative; margin: 6px 0 6px 10px; width: calc(100% - 36px - 15px); }

    #sidr #close__menu { margin: 6px 0 6px 5px; }

    #Product .product-slide { display: none; }

    #Product #product-slide-2 { display: block; }

    #Product #product-slide-3 { display: none; }

    #Product .product-slide .product-item { width: calc((100% - 17px) / 2); margin-right: 17px !important; padding-right: 0 !important; }

    #Product .product-slide .product-item:nth-child(2n) { margin-right: 0 !important; }

    #Product .product-slide .owl-next, #Product .product-slide .owl-prev { top: 15.5%; }

    #Product-Home .product-item-test { width: 100% !important; padding-right: 0 !important; }

    #News { padding-bottom: 10px !important; }

    #News .Article .top__news__title{font-size: 18px;line-height: 24px;color: var(--color-sub);font-weight: bold; display: block}

    #News .Article > .date{ display:block}

    #News .Article { position: relative; padding-bottom: 0; padding-top: 0 !important; }

    #News .Article .khungAnh { width: 38.33% !important; }

    #News .ArticStore-listle .new-top { position: absolute; top: 0; left: 0; }

    #News .Article .new-top a { color: var(--color-sub); font-weight: bold; }

    #News .Article .above .new-top a{ display: none;}
    
    #News .Article .above .new-top .date{ display: none;}

    #News .Article .above .desc { padding-top: 0 !important; }

    #News .Article .above { width: 57.33% !important; }

    #News .Article .below { display: none; }

    #News .Other { padding-left: 0; padding-top: 0; }

    #News-Detail .left { display: none; }

    #News-Detail .right { width: 100%; }

    #Store .Map select, #Store .Map .Find { width: 100% !important; margin-bottom: 10px; }

    #Store .w980 .Map .clgt { width: 100%; }

    .htdl-text { width: 84.66% !important; float: left; }

    #Store .Map input[type="text"] { width: calc(100% - 50px) !important; margin-right: 0; float: left; }

    .btn-search-trangchu { position: inherit !important; right: 0 !important; float: right; margin-bottom: 30px; }

    #News .Other ul { margin-top: 10px !important; }

    .title .cateName { font-size: 21px; }

    #Store .GG-map .Store-list { position: relative; float: none; height: 355px; }

    #Store .GG-map, #Store .map-border { height: auto; }

    #Product-Home .product-item-test, .product-item, #News-Home .item, #Picture-Lib .w980 .item, .store-item, .store-item { padding-bottom: 0 !important; margin-bottom: 20px !important; /*padding-right: 10px !important;*/box-sizing: border-box; margin-right: 0 !important; }

    #noidung1 .store-item { padding-right: 0 !important; }

    #Picture-Lib .w980 .item { width: 100%; margin-bottom: 20px; }

    #Picture-Lib-Detail .right .pic-border { margin-right: 0; margin-bottom: 10px; }

    #Product-Home .product-item-test:nth-child(2n) { margin-right: 0; }

    #Product-Home .title, #News-Home .title { padding: 0; margin: 10px 0; }

    #Picture-Lib-Detail .right .container .khungAnh .khungAnhHV .blur { margin-top: 35%; margin-left: 28%; }

    #Video-Lib-Detail .left { display: none; }

    #Video-Lib-Detail .right { width: 100%; }

    #Partner .khungAnh { width: calc(50% - 9px); margin-right: 18px; }

    #Partner .khungAnh:nth-child(2n) { margin-right: 0; }

    #Store-List .right .info { text-align: center; }

    .More { display: none; }

    footer .f-tt { background: var(--color-sub); box-shadow: 1px 0 10px #0c90d5 inset; border-top: none; display: table; width: 100%; }

    footer .ft-tt { padding: 0; }

    footer .ft-tt li { line-height: 20px; margin-bottom: 5px; list-style: none; }

    footer .f-hotline-text { margin-left: 10px; display: inline-block; }

    footer .f-hotline { padding: 14px 0; border-bottom: 1px solid #e6e6e6; }

    footer .f-dangky { border-top: 1px solid #ffffff; padding: 10px 0; }

    footer .f-dk-ip { background: url(f-mail.png) right 6px center no-repeat #fafafa; border: 1px solid #d4d4d4; border-radius: 3px; }

    #Contact .lh-title-rwd { padding: 10px 0 !important; }

    .modal-content { width: 95%; height: auto; }

    .timkiemm1 { width: 100% !important; height: 40px !important; line-height: 40px; font-size: 16px; text-transform: uppercase; line-height: 30px; }

    .dlsl { width: 100% !important; margin-bottom: 10px; }

    #map_canvas { height: 395px !important; }

    .close { right: 14px; }

    #Introduce .TextSize img { width: 100% !important; height: auto !important; }

    #Product-Detail .red-title { text-transform: none; }

    .BackToTop { right: 10px; bottom: 60px; }
}

@media (max-width: 479px) {
    /*Bắt đầu từ mobile, tức css viết ngoài cùng là css cho trường hợp mobile dựng dọc - thường là 1 cột, padding left right 15px*/
    #News .Article { position: relative; padding-bottom: 23px; padding-top: 55px; }

    #map_canvas { height: 395px !important; }

    #CommonTool .date, #CommonTool .view { font-size: 11px; }
}