@import url('https://fonts.googleapis.com/css2?family=Niramit:wght@400;500;600;700&display=swap');body{font-family:"Niramit",sans-serif;margin:0;font-size:15px}
.container{max-width:1180px}
a{text-decoration:none;color:#333}
header{display:flex;align-items:center;position:relative;z-index:1}
section#menu{background:#fff;border-bottom:1px solid #7c8085;position:sticky;top:0;z-index:999;transition:all .15s ease}
header .logo{
    flex-grow:1}
    .logo img{width:auto;height:35px}
    #menu-toggle{background-color:transparent;color:#333;border:none;font-size:1.5em;cursor:pointer;padding:0.5em 0;margin-right:0.7em}
    #offcanvas-menu{position:fixed;top:0;left:-300px;width:300px;height:100%;background-color:#f0f0f0;overflow-y:auto;transition:left 0.3s ease;z-index:1001}
    #offcanvas-menu.open{left:0}
    .menu-header{background-color:#ddd;padding:15px;text-align:right}
    #menu-close{background-color:transparent;border:none;font-size:1.2em;cursor:pointer;padding:0}
    #offcanvas-menu nav ul{list-style:none;padding:0;margin:0}
    #offcanvas-menu nav ul li{border-bottom:1px solid #ddd}
    #offcanvas-menu nav ul li a{display:block;padding:10px;text-decoration:none;color:#333}
    #offcanvas-menu nav ul li a:hover{background-color:#ddd}
    #offcanvas-menu nav ul li ul{display:none;background-color:#eee;padding-left:20px}
    #offcanvas-menu nav ul li.active > ul{display:block}
    #offcanvas-menu nav ul li a i{float:right;transition:transform 0.3s ease}
    #offcanvas-menu nav ul li.active > a i{transform:rotate(180deg)}

/*---------------------MODAL--------------------------*/
.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:300px}
.close{color:#aaa;float:right;font-size:28px;font-weight:bold}
.close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer}
form{display:flex;flex-direction:column}
label{margin:5px 0}
input{margin-bottom:10px;padding:8px;border:1px solid #ccc;border-radius:4px}
button.submit{padding:5px 10px;background-color:#00182f;color:white;border:none;border-radius:999px;cursor:pointer}
button#openModal{background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;color:white;border:none;border-radius:999px;cursor:pointer;width:35px;height:35px}
button#openModal:hover{background-color:#4cae4c}

/*---------------------------SEARCH----------------------------*/
.search-container{position:relative;display:inline-block}
.search-icon{font-size:24px;cursor:pointer;background:none;border:none}
.search-form{display:none;position:absolute;top:60px;right:0;width:320px;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;border:1px solid #ccc;padding:10px 0 0 20px;box-shadow:0 2px 10px rgba(0,0,0,0.1);border-radius:10px}
@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.search-form input{padding:5px;margin-right:5px}
.search-form button{padding:5px 10px}
button#search-icon i{font-size:18px;padding:10px}
form#search-form button{background:#00182f;color:#fff;border:none;border-radius:5px}
p.login-username input,p.login-password input{width:100%}
h2.title-lien-quan{background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;padding:10px 15px;width:fit-content;border-radius:20px;margin:0 auto;color:#fff}

/*--------------------------MAIN------------------------------------*/
.row{--bs-gutter-x:1.2rem}
section#title-web{background-image:linear-gradient(rgb(76 175 80 / 40%), #009688), url(../img/bg-tech.jpg);background-size:cover}
.page-head-main{padding:50px}
section#noi-bat{background:#f2f0fb;padding-top:30px;padding-bottom:20px}
section#box-wg-home{padding-top:30px;background:#2001c30f;padding-bottom:20px}
.content-noi-bat{text-align:center;background:#fff;border-radius:15px;margin-bottom:30px;overflow:hidden;box-shadow:rgba(100,100,111,0.2) 0 7px 29px 0}
.box-content-noi-bat{padding:10px}
.thumb-noi-bat{width:7rem;height:7rem;margin:1rem auto;position:relative}
.thumb-noi-bat img{width:100%;height:100%;border-radius:15px}
.thumb-noi-bat .type{position:absolute;top:100%;left:50%;transform:translate(-50%,-50%);line-height:.875rem;font-size:.625rem;text-align:center;font-weight:700;letter-spacing:.05rem;text-indent:.05rem;box-shadow:rgba(0,0,0,0.35) 0 5px 15px;background:#fff;padding:5px;border-radius:10px}
.thumb-noi-bat .type p{margin-bottom:0}
.title-noi-bat h3{font-size:16px;line-height:1.4em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;padding-top:10px;margin-bottom:5px}
.cat-noi-bat a{font-size:13px;font-weight:500}
.support ul{list-style:none;display:flex;justify-content:space-between;margin-bottom:0;padding:15px 0 10px 0;background:#eeeeee}
.support ul li{display:flex;flex-flow:column;align-items:center;color:#214e00;width:50%}
.support ul li span{color:#33333399;font-size:12px;padding-top:5px;font-weight:700}
span.truncate{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.section-head span{background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;padding:5px 10px;border-radius:999px}
.section-head span i{color:#fff}
h2.section-title{font-weight:700;text-transform:uppercase}
.section-title i,h2.widget-title i{background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;color:white;padding:10px;border-radius:999px;font-size:30px}
h2.widget-title{display:flex;position:relative;align-items:center;text-transform:uppercase;margin-bottom:30px}
h2.widget-title i{margin-right:7px}
.minislab{position:absolute;right:0;font-size:14px;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;padding:5px 10px;border-radius:15px}
.minislab a{text-transform:capitalize;color:#fff}
.paginate_links{overflow:hidden;text-align:center;display:table;margin:20px auto}
.paginate_links .page-numbers{width:32px;height:32px;display:inline-block;float:left;margin:0 5px;padding-top:5px;color:#2473fd;border:1px solid #2473fd;margin-bottom:5px}
.paginate_links .page-numbers:hover{background:#2473fd;color:#fff}
.paginate_links .page-numbers.prev,.paginate_links .page-numbers.next{background:transparent;width:auto;border:none}
.paginate_links .page-numbers.prev:hover,.paginate_links .page-numbers.next:hover{text-decoration:underline;color:#2473fd}
.paginate_links .page-numbers.current{background:#2473fd;color:#fff}
section#cat{background:#edeaea;padding-top:30px;padding-bottom:20px}
section#cat h1{font-size:1.8rem;text-transform:uppercase;margin-bottom:30px;font-weight:600;color:#fff}
section#cat h1 i{background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;color:white;padding:10px;border-radius:999px;font-size:30px}
.thumb-single{width:16rem;height:16rem}
.thumb-single img{width:100%;height:100%;object-fit:cover;border-radius:15px}
h1.title-single{font-size:30px;margin-bottom:20px;color:#fff}
ul.info{list-style:none;padding:0;line-height:1.8rem;color:#fff}
ul.info li{display:flex;justify-content:space-between}
ul.info li a{color:#fff}
ul.info li span{font-weight:700}
.download a{color:#fff}
.tabs{margin:0 auto;overflow:hidden;box-shadow:rgba(0,0,0,0.24) 0 3px 8px;border-radius:10px}
.tabs__labels{display:flex;width:100%;justify-content:space-between}
.tabs__input{display:none}
.tabs__label{display:block;flex-grow:1;padding:1rem;font-size:1.2rem;background-color:#f9f9f9;border-bottom:1px solid #ddd;cursor:pointer;text-align:center;transition:background-color 0.3s ease;margin:0}
.tabs__label:hover{background-color:#f1f1f1}
#tab-1:checked ~ .tabs__labels label[for="tab-1"],#tab-2:checked ~ .tabs__labels label[for="tab-2"],#tab-3:checked ~ .tabs__labels label[for="tab-3"]{background-color:#fff;border-bottom:2px solid #111}
.tabs__content{padding:2rem;background-color:#fff}
.tabs__panel{display:none;animation:fadeIn 0.3s ease;columns:1}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tabs__panel-image{margin-bottom:2rem}
#tab-1:checked ~ .tabs__content #tab-panel-1,#tab-2:checked ~ .tabs__content #tab-panel-2,#tab-3:checked ~ .tabs__content #tab-panel-3{display:block}
/* section#single-content-article,section#single-download{background-image:linear-gradient(rgb(2 23 71 / 90%),rgba(0,0,0,.7)),url(../img/bg-tech.jpg);background-size:cover;padding-top:50px;padding-bottom:20px}*/

section#single-content-article, section#single-download {
    background: #f2f0fb;
    padding-top: 50px;
    padding-bottom: 20px;
}

.social-share-buttons a{margin:3px}
.download-links-container{margin-top:40px;margin-bottom:20px;padding:25px;border:1px solid #ddd;border-radius:5px;background:#fff}
.download-links-container h3{margin-top:0;font-size:1.2em}
.download-links-container ul{list-style:none;padding:0;margin:0}
.download-links-container li{margin-bottom:5px}
.download-links-container a{color:#007bff;text-decoration:none;text-align:right;transition: all ease 0.2s;}
.download-links-container a:hover {color: red;text-decoration: none !important;}
span#countdown-download-link-0{text-align:right}
.download-links-container a:hover{text-decoration:underline}
.download-links-container ul li{display:flex;justify-content:space-between;border-bottom:1px solid #d7d7d7;padding:10px 0}
.download-links-container ul li:last-child{border-bottom:none;padding:10px 0 0}
h3.title-download{background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;width:fit-content;padding:10px 15px;margin:0 auto;color:#fff;font-size:20px;text-transform:uppercase;border-radius:999px}
.notice.notice-success{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;background-color:red;padding:10px 15px;border-radius:15px;font-size:18px;color:#fff}
.notice{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}
.close-notice{cursor:pointer;float:right;font-size:25px;font-weight:bold;line-height:1;color:#ffffff;text-shadow:0 1px 0 #fff;filter:alpha(opacity = 20);opacity:1;top:-11px;position:relative}
.close-notice:hover,.close-notice:focus{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}
/*
section#single-content-header{background-image:linear-gradient(rgb(2 23 71 / 90%),rgba(0,0,0,.7)),url(../img/bg-single.jpg);background-size:cover;padding-top:40px;padding-bottom:50px}
*/
section#single-content-header {
    background-image: linear-gradient(rgb(76 175 80 / 40%), #009688), url(../img/bg-single.jpg);
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 50px;
}
.container.lien-quan{margin-top:40px}
.share p,.social-share-buttons a{color:#fff;font-size:18px}
.social-share-buttons a i{font-size:22px}
form#error_report_form input[type="submit"]{width:145px;margin:10px auto}
article img{padding-top:20px;margin-bottom:30px}
section#f-mobile-single-post-type,section#page{background-image:linear-gradient(rgb(2 23 71 / 90%),rgba(0,0,0,.7)),url(../img/bg-single.jpg);background-size:cover;padding-top:30px;padding-bottom:30px;color:#fff}
.f-mobile-single-post-type-entry-content a{color:#ff9400;font-weight:700}
.f-mobile-single-post-type-entry-content img{display:block;margin:3% auto}
.f-mobile-single-post-type-entry-content h2,.f-mobile-single-post-type-entry-content h3,.f-mobile-single-post-type-entry-content h4,.f-mobile-single-post-type-entry-content h5,.f-mobile-single-post-type-entry-content h6{border-left:5px solid #ff9400;padding-left:10px;border-radius:10px;margin-bottom:30px}
section#cat{padding-top:30px;padding-bottom:20px;background-image:linear-gradient(rgb(2 23 71 / 70%),rgba(0,0,0,.7)),url(../img/bg-single.jpg);background-size:cover}
.rating p{background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;width:fit-content;margin:0 auto;padding:10px 15px;border-radius:999px;font-size:16px}
.tbl_back.image img{width:100%}
section#error{padding-top:30px;margin-bottom:10px}
.group-btn > button:first-child {margin-right: 6px;}

section#main-error {
    background-image: linear-gradient(rgb(2 23 71 / 90%), rgba(0, 0, 0, .7)), url(../img/bg-single.jpg);
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 50px;
    text-align: center;
    color: #fff;
}
.login {
    display: none;
}
/*---------------------------breadcrumb---------------------------------*/
.breadcrumb-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
ol.breadcrumb{margin-bottom:0}
ol.breadcrumb,ol.breadcrumb a{color:#fff}
.breadcrumb > li + li:before{content:"→";padding:0 5px}
.breadcrumb-container ol li.active{display:inline-flex}
.row.single-content-header{display:flex;align-items:center}

/*---------------------------MOBILE---------------------------------*/
@media only screen and (min-width:992px){h2.section-title,h2.widget-title{font-size:1.8rem}}
@media only screen and (max-width:991px){.box-like-dislike {padding-top: 10px;}}
@media only screen and (max-width:768px){.login span{display:none}.thumb-single{width:10rem;height:10rem;margin:30px auto}.group-btn,h1.title-single{text-align:center}ol.breadcrumb{justify-content:center}}
@media only screen and (max-width:600px){ol.breadcrumb li {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 150px;}}
@media only screen and (max-width:576px){section#single-content-header{padding-top:0}}
@media only screen and (max-width:430px){.logo img{width:auto;height:35px}}
@media only screen and (max-width:390px){.search-form{right:-28px}.page-head-main{padding:30px}h2.section-title,h2.widget-title{font-size:1.3rem}}