/* ========================================================
   Decox Design - Homepage Stylesheet (home.css)
   Unique styles for template-home.php (Hero slider,
   3-Box Feature Cards, Interior Projects, Signature,
   Collection, TikTok Feed, YouTube Videos, News, Tags)
   ======================================================== */

/* --- 1. Hero Slider --- */
.slider{margin-top:8px}

/* --- 2. Feature 3-Box Gallery Grid --- */
.gallery{
    display:grid;

    /* 70% - 30% */
    grid-template-columns:minmax(0, 7fr) minmax(0, 3fr);

    gap:15px;

    /*
        Quy định tỷ lệ chung của toàn bộ gallery.
        Có thể chỉnh số này nếu muốn gallery cao/thấp hơn.
    */
    aspect-ratio: 2 / 1;
}


/* Reset */
.gallery .row{
    margin:0;
}


/* =========================
   CỘT TRÁI
========================= */

.gallery .cleft{
    min-width:0;
    min-height:0;
}

.gallery .cleft .row,
.gallery .cleft a{
    width:100%;
    height:100%;
}

.gallery .cleft a{
    display:block;
    position:relative;
    overflow:hidden;
    border-radius:20px;
}

.gallery .cleft img{
    width:100%;
    height:100%;

    /* Không méo ảnh */
    object-fit:cover;
    object-position:center;

    display:block;
}


/* =========================
   CỘT PHẢI
========================= */

.gallery .cright{
    display:grid;

    /* 2 hình chia đều chiều cao */
    grid-template-rows:minmax(0, 1fr) minmax(0, 1fr);

    gap:15px;

    min-width:0;
    min-height:0;
}

.gallery .cright .item{
    width:100%;
    height:100%;

    min-height:0;
    position:relative;
}

.gallery .cright .item a{
    display:block;

    width:100%;
    height:100%;

    position:relative;
    overflow:hidden;

    border-radius:20px;
}

.gallery .cright img{
    width:100%;
    height:100%;

    /* QUAN TRỌNG: ảnh không bị bóp */
    object-fit:cover;
    object-position:center;

    display:block;
}


/* =========================
   TEXT OVERLAY
========================= */

.gallery .row p{
    background:linear-gradient(
        0deg,
        rgba(0,0,0,.85) 0,
        rgba(0,0,0,.3) 50%,
        rgba(0,0,0,.15) 65%,
        rgba(0,0,0,.075) 75.5%,
        rgba(0,0,0,.037) 82.85%,
        rgba(0,0,0,.019) 88%,
        transparent
    );

    bottom:0;
    color:#eee;

    font-size:14px;
    font-weight:400;
    line-height:1.5;

    left:0;
    right:0;

    padding:75px 44px 25px;

    pointer-events:none;
    text-align:center;

    z-index:2;
    position:absolute;

    border-radius:0 0 20px 20px;

    margin:0;
}

.gallery .row p span{
    max-height:50vh;
    overflow:auto;

    pointer-events:all;

    text-transform:uppercase;

    font-size:28px;
    font-family:"PoppinsVN", sans-serif;
    font-weight:bold;
}

.gallery .cright .row p span{
    font-size:18px;
}


/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .gallery{
        grid-template-columns:1fr;

        /* bỏ tỷ lệ cố định desktop */
        aspect-ratio:auto;
    }

    .gallery .cleft{
        aspect-ratio:16 / 10;
    }

    .gallery .cright{
        grid-template-columns:1fr 1fr;
        grid-template-rows:none;
    }

    .gallery .cright .item{
        aspect-ratio:1 / 1;
    }
}


@media screen and (max-width:640px){

    .gallery{
        margin-bottom:30px;
    }

    .gallery .cright{
        grid-template-columns:1fr;
    }

    .gallery .cright .item{
        aspect-ratio:16 / 10;
    }

    .gallery .row p span,
    .gallery .cright .row p span{
        font-size:20px;
    }
}
.nav_up{position:fixed;background:url(https://decoxdesign.com/icon/arow-top.png) no-repeat;width:60px;height:60px;bottom:75px;right:10px;cursor:pointer;white-space:nowrap;filter:alpha(opacity=70);z-index:999;background-size:60px;}

/* #264c5d; */
/* 30: tintuc; 32: tuvan*/
/* 9: thietke; 10: thicong; */

/* --- 3. Project Listings & Headings --- */
.titduan{text-align: center; font-size: 20px; color: #264c5d; text-transform: capitalize; margin:20px 0; border-top: 1px solid #264c5d; font-weight: bold; padding-top: 20px;}
ul.listduan{overflow: hidden;}
ul.listduan li{}


.home_l{float:left; width:20%}
.home_r{float:right; width:78%}
.title_home{text-align:center; display:flex; justify-content:center; height:300px; align-items:center}
.title_home .fix{text-align:right}
.title_home h2,.title_home p{font-size:22px; text-transform:uppercase; color:#264c5d; font-weight:700; font-family: "PoppinsVN", sans-serif; margin-bottom:5px; white-space:nowrap;}
.title_home h2 a,.title_home p a{color:#264c5d}
.title_home span{color:#8b5b19;}

.listsp{margin:0 -5px 10px}
.listsp::after{content:' ';display:block;clear:both}
.listsp li{width:16.666%;float:left;margin:0px 0 15px}
.listsp.home li{width: 100%}
.listsp li .images{height: 200px; overflow: hidden;text-align: center; display: flex; align-items: center; justify-content: center; margin: auto; position:relative;}
.listsp li .images img{max-height:100%;}
.listsp li h3{text-transform: capitalize; font-size: 15px; line-height: 30px; margin:10px auto 10px; height: 60px; overflow: hidden; text-align: center; width: 90%; font-weight: bold;}
.listsp li h3 a{color: #2b2b2b}
.listsp li p{line-height: 24px; text-align: center; font-size: 15px; height:25px;}
.listsp li p span.price{font-weight: 400;}
.listsp li p del{color: #666}

/* --- 4. Signature Collection --- */
.signature{margin: 20px auto 0; width:95%}
/*.signature .cleft{float:left; width:66%}
.signature .cright{float:right; width:33.33%}
.signature .cleft .row{height:auto; margin:0;}
.signature .row a{ display: flex; justify-content: center; height: 100%; align-items: center; text-align: center; border-radius:20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;}
.signature .row p{background: linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent); bottom: 0;
color: #eee; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 75px 44px 25px; pointer-events: none; right: 0; text-align: center; z-index: 99996; position: absolute; border-radius:0 0 20px 20px;}
.signature .row p span{max-height: 50vh; overflow: auto; pointer-events: all; text-transform: uppercase; font-size: 28px; font-family: "PoppinsVN", sans-serif; font-weight:bold}
.signature .cright .row{margin:0; margin-bottom:10px}
.signature .cright .row p span{font-size:18px}
.signature .row{position:relative; overflow:hidden; border-radius:20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;} 
.signature .row img{height:auto; border-radius:20px; max-width:none;width:100%; -webkit-border-radius: 20px; -moz-border-radius: 20px;}
.signature .cleft .row img{height:auto; }*/

/* --- 5. Collection Section --- */
.collection{margin: 0 auto 40px; width:95%} .collection.nohome{width:100%;}
/*.collection li{margin:0px 0 0px;display: flex; flex-wrap: wrap;}
.collection li a{display:block; height:auto; overflow:hidden; border-radius:20px; float:left; width:33.333%; padding:0 5px 10px; }
.collection li a div{position:relative}
.collection li img{width:100%; border-radius: 20px;}
.collection li p{background: linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 88%,transparent); bottom: 0;
color: #eee; font-size: 14px; font-weight: 400; border-radius:20px; left: 0; pointer-events: none; right: 0; text-align: center; z-index: 99996; position: absolute; justify-content: center; height: 100%; align-items: center; display:none; font-family: "PoppinsVN", sans-serif; font-weight:bold}
.collection li a:hover p{display:flex}
.collection li p span{max-height: 50vh; overflow: auto; pointer-events: all; text-transform: uppercase; font-size: 16px;}
*/
.collection li{margin:0px 0 0px;display: flex; flex-wrap: wrap;}
.collection li a{display: block;overflow: hidden;border-radius: 20px;width: 33.333%;padding: 0 5px 10px;}
.collection li a div {position: relative;width: 100%;aspect-ratio: 4 / 3;   /* ✅ QUAN TRỌNG */overflow: hidden;border-radius: 20px;}
.collection li img {width: 100%; height: 100% !important;object-fit: cover;border-radius: 20px;display: block;}
.collection li p{background: linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 88%,transparent); bottom: 0;
color: #eee; font-size: 14px; font-weight: 400; border-radius:20px; left: 0; pointer-events: none; right: 0; text-align: center; z-index: 99996; position: absolute; justify-content: center; height: 100%; align-items: center; display:none; font-family: "PoppinsVN", sans-serif; font-weight:bold}
.collection li a:hover p{display:flex}
.collection li p span{max-height: 50vh; overflow: auto; pointer-events: all; text-transform: uppercase; font-size: 16px;}
.collection .list_collection.inpage li a{width:100%;}

.gocnhin{margin:20px auto 10px; overflow:hidden}
.gocnhin li{width:14.666%; margin:0 0% 15px 2%; float:left; list-style: initial; line-height: 22px; color:#999}
.gocnhin li a{color:#666;font-weight:bold}

/*.fix-contact{position:fixed;right:10px;bottom:150px;z-index:9999;}
.fix-contact ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.fix-contact li{margin:0;padding:0;}
.fix-contact a{display:block;width:60px;height:60px;border-radius:50%;overflow:hidden;transition:transform .3s ease;}
.fix-contact a:hover{transform:translateY(-3px);}
.fix-contact img{display:block;width:100%;height:100%;object-fit:cover;}
.hotline-number{position:absolute;right:75px;top:20%;transform:translateY(-50%);background:#fff;color:#111;font-size:16px;font-weight:700;padding:15px 20px;border-radius:30px;box-shadow:0 8px 20px rgba(0,0,0,0.15);white-space:nowrap;opacity:0;visibility:hidden;transition:all .3s ease;}
.hotline-item:hover .hotline-number{opacity:1;visibility:visible;right:85px;}
.hotline-item.active .hotline-number{opacity:1;visibility:visible;right:85px;}
*/

/* --- 6. Mobile Signature & Collection --- */
@media screen and (max-width: 640px) {
.signature{width:97%}
.signature .row img{width:100%; height:auto}
.signature .row p span,.signature .cright .row p span{font-size:14px}
.signature .row img,.collection li img,.collection li a,.signature .row a,.signature .row{border-radius:8px}

.collection{width:98%; margin-bottom:20px}
.collection li a{padding:0 2px 5px}
.collection li p span{font-size:10px}
.collection li a div,.collection li img{border-radius:10px !important;}

.gocnhin{margin:0px auto 0}
.gocnhin li{width:90%; margin:0 0 10px 30px}
}

/* --- 7. TikTok Video Feed --- */
.scroll_tiktok{margin:30px 0}
.scroll_tiktok li{}
.scroll_tiktok li .images{overflow:hidden;border-radius:4px; position:relative; text-align: center;display: flex;align-items: center;justify-content: center}
.scroll_tiktok li a{cursor:pointer}
.scroll_tiktok li img{border-radius:4px;}
.scroll_tiktok li .owl-carousel .owl-item img{width:auto;}
.scroll_tiktok li h3,.scroll_tiktok li p{height:60px; margin-top:10px; line-height:22px; color:#264c5d; font-weight:bold}
.scroll_tiktok li .images span{top:40%}
.scroll_tiktok li .images .bg{left:0;right:0}
.scroll_tiktok li .images i{opacity:0.8;background: url(https://decoxdesign.com/skins/images/play-tiktok.png); background-repeat: no-repeat; background-size: contain; position: absolute; bottom: 10px; left: 10px; height: 50px; width: 50px; margin: auto;z-index:9999}
#tiktok_show .tiktok-embed iframe{}
#tiktok_show.popupthanks .mau-content{padding:10px; top:0; background:none; margin:auto; bottom: 0; box-shadow:none}

@media screen and (max-width: 640px) {
.home_l,.home_r{width:100%} .home_l{margin-bottom:20px}
.title_home{height:auto}
.title_home .fix{text-align:center}
    
.scroll_tiktok li .images{}
.scroll_tiktok li img{height:100%}
.scroll_tiktok.home_r{margin: 20px 5px; width:98%}
}

@media screen and (max-width: 480px) {

}

/* --- 8. YouTube Video Section & Tags --- */
.video_home{margin:20px 0 40px}
.video_home::after{content:' '; display:block; clear:both}
.video_home .video-container{height: 553px; width: 100%; position: relative;}
.video_home iframe{height: 100%; width: 100%; border-radius: 10px;}
.video_home .video_scroll{margin: 15px 0px 0px;}
.video_home .video_scroll li{width:25%; float:left; padding: 0 5px; position:relative; cursor:pointer}
.video_home .video_scroll li a{cursor: pointer; border-radius: 4px; display: block}
.video_home .video_scroll li .padding{padding: 20px}
.video_home .video_scroll li img{border-radius: 4px; width: 100%; box-shadow: 0 0 10px rgba(46, 59, 125, 0.23);}
.video_home .video_scroll li span,.scroll_tiktok li .images span{opacity:0;background: url(https://decoxdesign.com/images/icon-play.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 25%; left: 0; right: 0; height: 50px; width: 60px; margin: auto;z-index:9999}
.video_home .video_scroll li .bg,.scroll_tiktok li .images .bg{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 88%,transparent); display:none; position: absolute; left: 5px; right: 5px;bottom: 0;top: 0; border-radius: 5px;}
.video_home .video_scroll li:hover .bg,.scroll_tiktok li:hover .images .bg{display:block}
.video_home .video_scroll li:hover span, .scroll_tiktok li:hover .images span{opacity:0.7;}
.video_home .video_scroll li .tit{font-weight: bold; color: #333; font-size: 16px; margin-bottom: 10px;}
.video_home .video_scroll li .mota{font-size: .9em; color: #444}

.list_key{margin:0px 0 50px; overflow:hidden}
.list_key .tit{color:#264c5d; font-size:18px; margin-bottom:15px; font-weight:bold;}
.list_key svg,.list_key li{float:left; margin-right:8px}
.list_key a{background:#e1e0e0; color:#264c5d; display:inline-block; border-radius:8px; line-height:38px; padding:0 12px; font-size:15px; font-weight:500;}

.youtube-lite{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8.5;
    background: #000;
    overflow: hidden;
    cursor: pointer; border-radius:4px;
}

.youtube-lite img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.youtube-lite::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.15);
}

.youtube-play{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 12px;
    background: rgba(255,0,0,.9);
    cursor: pointer;
}

.youtube-play::before{
    content: "";
    position: absolute;
    left: 27px;
    top: 14px;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
}

.youtube-lite:hover .youtube-play{
    background: #ff0000;
}


@media screen and (max-width: 640px) {
.gallery{margin-bottom:30px;}
.gallery .row p span,.gallery .cright .row p span{font-size:20px;}
.video_home{margin-bottom:40px}
.video_home .video-container{height: 300px; margin: 0 5px; width:auto}
}

@media screen and (max-width: 480px) {
.gallery img{aspect-ratio: 4 / 3; object-fit: cover;}
.video_home .video-container{height: 250px;}
.video_home .video_scroll{margin-top:10px}

.list_key{margin:0 0 25px 5px}
.list_key li{margin-bottom:10px}
.list_key .tit{font-size:16px}
.list_key a{font-size:13px; padding:0 8px;line-height:34px;}
}

/* --- 9. News & Articles Block --- */
.listnews{margin:0 -5px 10px}
.listnews::after{content:' ';display:block;clear:both}
.listnews li{width:25%;float:left;margin:0px 0 0px} /*.listnews.listnewslide li{width:100%;}*/
.listnews li .pad{padding:10px;margin:5px 0;background: none}
.listnews li .images{height: 170px; overflow: hidden;}
.listnews li .images img{width: 100%; height: 100%;border-radius:5px;}
.listnews li h3{text-transform: none; color: #264c5d; font-size: 16px; line-height: 24px; margin:10px 0 10px; height: 48px; overflow: hidden;font-weight:bold}
.listnews li h3 a,.listnews li h3.bold{color: #264c5d} .listnews li h3.bold{font-weight: bold; font-size: 18px; line-height: 24px;}
.listnews li p{line-height: 24px; color: #888; height: 72px; overflow: hidden;}
.listnews li p a{color: #888}
.listvideo{margin:0 -5px 10px}
.listvideo::after{content:' ';display:block;clear:both}
.listvideo li{width:25%;float:left;margin:10px 0 0px}
.listvideo li .pad{padding:5px;margin:5px;position: relative;}
.listvideo li img{display: block; max-width: 100%; height: 170px; width: 100%; margin: 0% auto; vertical-align: middle;}
.listvideo li h2{text-align: left; padding: 10px; color: #264c5d; height: 50px; font-weight: bold; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.listvideo li span{background: url(https://decoxdesign.com/images/icon-play.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 28%; left: 0; right:0; height: 50px; width: 60px; margin:auto;}
.listvideo.home li{width: 100%}
.listvideo.home li img{height: auto;border-radius:5px;}

hr.bar{width: 100%; display: block; height: 1px; background: #eee; margin: 30px 0; border: 0; border-top: 1px dashed #ccc;}

/* --- 10. Owl Carousel Navigation & Sliders --- */
#slide_div .owl-nav,.listdesign .owl-nav,.listdesign_child .owl-nav,#new_div .owl-nav,.listvideo .owl-nav,.listtiktok .owl-nav{position:absolute;top:38%;height:0;width:100%}
.listtiktok .owl-next,.listtiktok .owl-prev,.listdesign .owl-next,.listdesign .owl-prev,.listdesign_child .owl-next,.listdesign_child .owl-prev,#slide_div .owl-next,#slide_div .owl-prev,#new_div .owl-next,#new_div .owl-prev,.listvideo .owl-prev,.listvideo .owl-next{position:absolute;padding:0;margin:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;background:rgba(0,0,0,.3);width:48px;height:48px;text-align:center;color:#333;line-height:0}
#slide_div .owl-next,#slide_div .owl-prev,.listtiktok .owl-next,.listtiktok .owl-prev,.listdesign .owl-next,.listdesign .owl-prev,.listdesign_child .owl-next,.listdesign_child .owl-prev,.listvideo .owl-next,.listvideo .owl-prev{background:rgba(255,255,255,.5) !important;font-size:38px !important}
#slide_div .owl-next:hover,#slide_div .owl-prev:hover,.listtiktok .owl-next:hover,.listtiktok .owl-prev:hover,.listdesign .owl-next:hover,.listdesign .owl-prev:hover,.listdesign_child .owl-next:hover,.listdesign_child .owl-prev:hover{background:rgba(0,0,0,.7) !important; color:#fff;}

.listdesign .owl-nav,.listdesign_child .owl-nav,#new_div .owl-nav,.listvideo .owl-nav,.listtiktok .owl-nav{top:30%;}

.owl-prev{left:10px}
.owl-next{right:10px}
.owl-carousel,.owl-carousel .owl-item{position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%;height:auto;}
.owl-carousel .owl-dots.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:fadeOut}
@keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://decoxdesign.com/skins/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav{margin-top:10px}
.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}
.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}
.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}
.owl-theme .owl-nav.disabled .owl-dots{margin-top:10px}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1;background:#fff;}
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
.owl-nav.disabled{display:none}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

input::-moz-placeholder, textarea::-moz-placeholder {color: #6b6868}
input:-ms-input-placeholder, textarea::-ms-input-placeholder {color: #6b6868}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #6b6868}

/* Responsive cho comment & Facebook */
#___comments_0{width:100% !important}
.video-wrap{width:100% !important}
.fb-comments {max-width:100%}
.fb-comments span{max-width:100%} .fb-comments iframe{max-width:100%}
.fb_iframe_widget{max-width:100%} .fb_iframe_widget iframe{max-width: 100%}
.fb_iframe_widget span{max-width:100%}
.divdetail{max-width:100%}



@media screen and (max-width: 840px) {
.service li{width: 50%}
.listnews li{width: 50%}
.listproject{width: 90%}
.listproject li{width: 25%}
.footer{padding-bottom:50px;}
.footer .company{text-align:left;}
.footer .company,.footer .info,.footer .social,.footer .address{width: 95%; margin: 0 auto 20px; float: none;}
.footer .linkfoot{width: auto;margin: 15px;}
.footer .info .icon{position:absolute; top:0px; right:10px;}
.footer .social .dmca{position:absolute; bottom:50px; right:0px;}
.footer .menubot{display:none;}
.footer .menubot li{display:block; padding-left:0;}
.footer .menubot.mnb{display:block;}
.footer .introduce{display:none;}
.album-slide .grid{width: 33.333%}
.listvideo li{width: 50%}
}
@media screen and (max-width: 768px) {
.column.size-1of4 {width: 33.3333%}

}

@media screen and (max-width: 640px) {
.nav_up{bottom: 10px}
.service li{width: 100%}
.listproject li{width: 33.333%}
.titlehome{margin-top: 10px;}
.fb-customerchat{display: none !important}
nav .nav-r ul.category-mb li span.new{display:none;}


#divgallery .left,#divgallery .right{width: 100%}
#divgallery .left h3{font-size: 20px; line-height: 30px; margin-bottom: 5px;}
#divgallery .left p{}
#divgallery .right,.nav_up{display: none !important}

.album-slide .grid{width: 50%}
.listvideo li{width: 100%}
.listvideo li img{height: auto}

.listdesign li{width: 50%; margin-bottom: 0;}
.listdesign li .pad{padding: 0}
.listdesign li .images{height: 140px}
.listdesign li h3{font-size: 14px; margin-bottom: 5px; line-height: 20px}
.listdesign li p a{font-size: 13px}
.listdesign li .info{padding: 4px}
.listdesign.home li .images{height: 245px}
}
@media screen and (max-width: 480px) {
.listnews li{width: 50%}
.listnews li .images{height:100px }
.listnews li .pad{padding:5px;}
.listnews li p{display:none;}
.listnews li h3{margin-bottom:0; font-size:13px; line-height:18px; height:60px;}

h1.in{font-size: 24px; margin-top: 0;}
.footer .linkfoot{width:98%;}
.album-slide .grid{width: 100%}
.service li .grid{height: auto}
.service li a.send{position: relative; display: block; bottom: 0; margin: 10px auto 5px;}

.column.size-1of4 {width: 50%}
.divdetail.thugondes,.listproject{width: 96%}
.listproject{margin-bottom: 0;}
.listproject li{width: 33.3333%}
.listproject li a{font-size: 13px; margin-bottom: 0px;}

.listdesign li .images{height:125px;}

.footer{padding-top:20px;}
.footer .company{margin-bottom:0;}
.footer .company img{height:30px;}
.footer .social a{line-height:20px;}
.footer .social a img{float:left;}
}
@media screen and (max-width: 414px) {

}

@media only screen and (max-width : 320px){

}

@media only screen and (max-width : 768px){

}