/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Các tùy chỉnh CSS của giao diện nên để vào đây */
/* block class */
.panel-class{
	padding: 0px;
	box-shadow: 0px 0px 0px;
	margin-bottom: 18px;
}
.panel-class .panel-heading{
	background-color: #fc8801;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	color: #FFFFFF;
	border-radius: 5px;
	border: 0px;
}
.panel-class .panel-body{
	padding: 10px 15px 50px;
	background: url(../images/co.png) no-repeat right bottom;
	border-left: 1px dashed #FC8801;
	border-bottom: 1px dashed #FC8801;
	border-right: 1px dashed #FC8801;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
.danhmuc .panel-body{
	padding: 10px 15px 50px;
	background: url("../images/co.png") no-repeat right bottom;
	border-left: 1px dashed #FC8801;
	border-bottom: 1px dashed #FC8801;
	border-right: 1px dashed #FC8801;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
.video .panel-body{
	padding: 10px 15px 50px;
	background: url("../images/co.png") no-repeat right bottom;
	border-left: 1px dashed #FC8801;
	border-bottom: 1px dashed #FC8801;
	border-right: 1px dashed #FC8801;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
.bg_blok_phai .panel-body{
	padding: 10px 15px 50px;
	background: url("../images/news/bg-block-class.png") no-repeat right bottom;
	border-left: 1px dashed #FC8801;
	border-bottom: 1px dashed #FC8801;
	border-right: 1px dashed #FC8801;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
@media ( min-width : 599px) {
    .mobile-menu-toggle-btn {
        top: 5px;
    }
}

@media ( max-width : 599px) {
    .mobile-menu-toggle-btn {
        top: -4px;
    }
}

@media ( max-width : 426px) {
    #sologan h2, #sologan p.site_description {
        font-size: 12px;
    }
    #sologan h1, #sologan p.site_name {
        font-size: 17px;
    }
    #bg_slider {
        margin-top: 30px;
    }
    .mobile-menu-toggle-btn i {
        margin: 4px 1px 1px 1px;
    }
}
.cat-nav {
    background: url('../images/hcb-header.png') right bottom no-repeat;
    padding: 6px 0 5px 0;
    position: relative;
}
.cat-nav a {
    line-height: 22px;
    margin: 0 5px;
}
.cat-nav h2 a {
    font-family: "butlong";
    font-size: 24px;
}
.cat-nav a.current-cat {
    color: #891a1c;
    font-weight: bold;
    padding-right: 20px;
}
.cat-nav a.rss {
    background: url(../images/rss2.png) 0 0 no-repeat;
    position: absolute;
    right: 5px;
    top: 9px;
}
.subcat {
    margin-left: 20px;
}
.subcat a {
    font-family: "butlong";
    color: #fe292b;
    margin-right: 8px;
    font-size: 16px;
    white-space: nowrap;
}

.tms_cat_title {
    display: inline-block;
    width: 100%;
    text-align: left;
    color: #0092e8;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    text-transform: capitalize;
    padding-bottom: 10px;
}
.tms_cat_title:before {
    top: 35px;
    background-color: #0092e8;
    content: "";
    height: 3px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 0;
}
.tms_cat_title h2 {
    margin: 0;
    float: left;
    font-size: 16px;
    line-height: 34px;
    padding: 2px 15px;
    text-transform: uppercase;
    position: relative;
    background: #0092e8;
    color: #FFF;
    position: relative;
}
.tms_cat_title h2:after{
    border-bottom: 38px solid #0092e8;
    border-right: 38px solid rgba(0,0,0,0);
    border-top: 0px solid rgba(0,0,0,0);
    content: "";
    display: block;
    position: absolute;
    right: -38px;
    top: 0;
    z-index: 1;
}
.tms_cat_title a {
    color: #e80000;
    margin-left: 5px;
}
.cat-nav {
    background: url(../images/hcb-header.png) right bottom no-repeat;
    padding: 6px 0 5px 0;
    position: relative;
}
.cat-nav a.current-cat {
    color: #891a1c;
    font-weight: bold;
    padding-right: 20px;
}
.cat-nav h2 a {
    font-family: "butlong";
    font-size: 24px;
}
.cat-nav a {
    line-height: 22px;
    margin: 0 5px;
}
.subcat {
    margin-left: 20px;
    display: inline-block;
}
.subcat a {
    font-family: "butlong";
    color: #fe292b;
    margin-right: 8px;
    font-size: 16px;
    white-space: nowrap;
}
.cat-news, .cat-news .news-full {
    width: 100%;
}
.box, .box-border, .box-border-shadow, .content-box, .block-signed a, .clearfix, .container, .sideon {
    display: block;
}
.content-box {
    padding: 10px;
}
.m-bottom {
    margin-bottom: 10px !important;
}
.content-box h4 a {
    color: #4400ac;
}
div.hcb-img {
    background: url(../images/hcb-img.png) no-repeat;
    width: 150px;
    height: 150px;
    margin-right: 10px;
    padding: 10px;
    text-align: center;
}
div.hcb-img img {
    width: 100%;
    height:120px;
}
.content-box p {
    text-align: justify;
}
.cat-news .ot-news ul li, .cat-news .ot-news-full ul li {
    background: url(../images/icon_fo.png) 2px 13px no-repeat;
    padding: 9px 0 5px 22px;
}
.cat-news .ot-news ul li a {
    color: #4400ac;
}
.header {
    background: url(../images/bg_header.jpg) no-repeat;
    background-repeat: round;
  
}
.header .logo {
    max-width: 200px;
    width: auto;
}
.topadv {
    width: 100%;
}
.cat-news .ot-news ul, .cat-news .ot-news-full ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.blocksite {
    width: 180px;
    margin: auto;
}
.block_header_vetcon {
    background: url(../images/kiddot-bird.jpg) no-repeat;
    height: 68px;
}
.block_content {
    padding: 0 8px 5px 8px;
    background: url(../images/kiddot-center.png) repeat-y;
}
.block_bottom {
    background: url(../images/kiddot-bottom.png) no-repeat;
    height: 7px;
    width: 180px;
}
.block_content h3 {
    text-align: center;
    font-family: "butlong";
    color: #fe292b;
    font-size: 17px;
    margin-bottom: 10px;
}
.block_content ul {
    padding-left: 1px;
    list-style: disc;
}
.block_header_kiencon {
    background: url(../images/kiddot-ant.jpg) no-repeat;
    height: 60px;
}
.block_header_star {
    background: url(../images/kidgrass_sun.jpg) no-repeat;
   background-size: 100%;
    height: 61px;
}
.block_content_star {
    padding: 0 8px;
    background: url(../images/kidgrass_center.jpg) repeat-y;
    background-size: 100%;
}
.block_bottom_star {
    background: url(../images/kidgrass_bottom.jpg) no-repeat;
    background-size: 100%;
    height: 23px;
    width: 100%;
    margin-top: -9px;
}
.block_content_star ul {
    padding: 10px 0;
}
.block_content_star ul li {
    padding: 5px;
}
.block_content_star ul li a img {
    margin-right: 4px;
}
.block_header_star h3,
.block_header_star h3 a {
    font-family: "butlong";
    font-size: 20px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    text-align: right;
    padding: 34px 6px;
}

.superfish-container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.pad-cols:first-child {
    padding-left: 0px;
}
.back-col {
    margin-bottom: 15px;
    padding-bottom: 20px;
    margin-top: 15px;
    padding-left: 8px;
    padding-right: 7px;
    padding-top: 15px;
    height: 430px;
    border-radius: 10px;
    background: #fbffc2 url(../images/co.png) no-repeat bottom;
}
.pad-cols:first-child .back-a{
    background-image: url(../images/food.png);
    background-repeat: no-repeat;
    background-position: center left;
        background-size: 13%;
}
.pad-cols:nth-of-type(2) .back-a{
    background-image: url(../images/icon_news.png);
    background-repeat: no-repeat;
    background-position: center left;
        background-size: 13%;
}
.pad-cols:nth-of-type(3) .back-a{
    background-image: url(../images/may-bay.png);
    background-repeat: no-repeat;
    background-position: center left;
        background-size: 13%;
}
.pad-cols:nth-of-type(4) .back-a{
    background-image: url(../images/camera.png);
    background-repeat: no-repeat;
    background-position: center left;
        background-size: 13%;
}
.back-a {
    padding: 7px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
    border: 1px dashed #fc8800;
    border-radius: 5px;
}
.back-a strong {
    color: #0002fb;
}
.cat-a {
    text-align: center;
}
.cat-a img {
    max-height: 180px;
    object-position: center;
    object-fit: cover;
    height: 100%;
}
.cat-a img {
    border: 4px solid #f98b8c;
    border-radius: 5px;
    width: 100%;
}
.pad-note {
    padding: 0 3px;
    padding-bottom: 10px;
    height: 115px;
}
.bor-a {
    text-align: center;
}
.bor-a a {
    padding: 5px 15px;
    border: 1px solid #00adef;
    border-radius: 5px;
    background-color: #00adef;
}
.bor-a a strong {
    font-weight: 100;
    color: #FFF;
}
@media (max-width: 1024px) {
    .back-col {
        position: relative;
        min-height: 475px;
    }
    .back-col .pad-note {
        /* height: 100%; */
    }
    .back-col .bor-a {
        position: absolute;
        bottom: 20px;
        width: 100%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .custom-navigation::after,
    .class-borer::after{
        content: "";
        display: block;
        clear: both;
    }
    .custom-navigation a.flex-prev {
        margin-left: 0;
    }
    #footer h3,
    #footer .panel-simple div>div,
    #footer .panel-simple div>div>a {
        color: #434343;
    }

    .footer-info {
        color: #434343;
    }
}
@media (max-width: 499px) {
    .superfish-container {
        grid-template-columns: minmax(200px, 1fr);
        grid-template-rows: repeat(4, auto);
    }
}
@media (max-width: 840px) {
    .superfish-container {
        margin-bottom: 15px;
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        grid-template-rows: repeat(2, 480px);
    }
}
@media (max-width: 1024px) {
    .superfish-container {
        margin: 0 5px;
    }
}
.frame-menu2 {
    border: none;
    box-shadow: none;
    background: #f2f8f1;
    margin-top: 40px;
}
.frame-menu1 {
    border: none;
    box-shadow: none;
    background: #f5f9f2;
    margin-top: 30px;
}
.frame-menu1 .panel-heading {
    background: #ff7930;
    border: none;
    position: relative;
    padding: 5px 15px;
    padding-left: 35px;
    border-top-left-radius: 10px;
}
.frame-menu2 .panel-heading {
    background: #8bc92c;
    border: none;
    position: relative;
    padding: 5px 15px;
    padding-left: 35px;
    border-top-left-radius: 10px;
}
.frame-menu1 .panel-heading:before {
    content: "";
    background: url(../images/orage_left.png);
    position: absolute;
    left: -10px;
    top: -34px;
    width: 40px;
    height: 63px;
}
.frame-menu1 .panel-heading .panel-title {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15px;
    color: inherit;
}

.frame-menu1 .panel-heading:after {
    content: "";
    background: url(../images/orange_right.png);
    position: absolute;
    width: 100%;
    height: 62px;
    top: -34px;
    background-repeat: no-repeat;
    right: -59px;
}
.frame-menu1 .panel-body {
    border: 1px solid #ff7930;
}
.frame-menu2 .panel-body {
    border: 1px solid #8bc92a;
}
.frame-menu2 .panel-heading:before {
    content: "";
    background: url(../images/green_left.png);
    position: absolute;
    left: -10px;
    top: -35px;
    width: 40px;
    height: 63px;
}
.frame-menu2 .panel-heading:after {
    content: "";
    background: url(../images/green_right.png);
    position: absolute;
    width: 100%;
    height: 62px;
    top: -36px;
    background-repeat: no-repeat;
    right: -59px;
}
.frame-menu2 .panel-heading .panel-title {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}
 /* Màu nền cho mỗi mục */
        .menu li:nth-child(1) a {
            background-color: #3498db; /* Màu xanh */
        }

        .menu li:nth-child(2) a {
            background-color: #2ecc71; /* Màu xanh lá */
        }

        .menu li:nth-child(3) a {
            background-color: #f39c12; /* Màu vàng */
        }

        .menu li:nth-child(4) a {
            background-color: #e74c3c; /* Màu đỏ */
        }

        .menu li:nth-child(5) a {
            background-color: #9b59b6; /* Màu tím */
        }

        /* Hiệu ứng hover */
        .menu a:hover {
            background-color: #555;
            color: #fff;
            transform: translateY(-3px);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .menu {
                flex-direction: column;
            }

            .menu li {
                margin: 10px 0;
            }
        }
        
         nav {
            text-align: center;
        }

        .menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        .menu li {
            margin: 0 15px;
            position: relative;
        }

        .menu a {
            text-decoration: none;
            color: white;
            font-size: 18px;
            padding: 15px 30px;
            display: block;
            border-radius: 5px;
            transition: all 0.3s ease;
        }