/*@import "zalo.css";
@import "animate.css";
@import "addgiohang.css";
@import "thaydoimau.css";
@import "container.css";*/
@import "stam.css";
body{
    font-size: 14px;
    color: #000;
     font-family: 'truongsinh';
    margin: 0px;
    padding: 0px;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    height: 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50%;
}
.colred{
    color: red;
    font-weight: bolder;
    font-size: 20px;
    padding-right: 10px;
}
.globalweb{
    width: 800px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.toggle-icon {
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 16px;
}
.panel-heading {
    position: relative;
    cursor: pointer;
    border: 1px solid #0C4CA3;
    border-radius: 5px;
    padding: 15px 10px;
    margin-bottom: 10px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    background: #fff;
}
.panel-heading:hover,
.panel.open .panel-heading{
    background: #0C4CA3;
    color: #fff;
}
.panel-heading i.muiten {
    font-size: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
}
.subject-ts {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    border-bottom: solid 1px #ccc;
    color: #F00;
    padding-top: 20px;
    padding-bottom: 30px;
}
.logohome {
    width: 800px;
    margin: auto;
    text-align: center;
}
.logohome img{
    width: 20%;
}
.panel-body {
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    border: 1px solid #0C4CA3;
    background: #fff;
}
.panel-body.shop,
.catcon-hide.open {
    padding: 0;
    border-radius: 0;
    margin: 0;
    border: unset;
    background: unset;
}
.globaltext img {
    width: 100% !important;
    height: auto !important;
}
.globalcat > ul > li > div.subject,
.catcon.subject2 {
    background: #EB8D01;
    padding: 15px 10px !important;
    border: 1px solid red;
    color: #fff !important;
    border-radius: 5px;
    cursor: pointer;
}
.globalcat > ul > li.catcha.active > div.subject,
.catcon.subject2.active{
    background: red;
}

.globalcat ul {
  list-style: none;
  padding:0 20px;
}

.globalcat li {
  margin: 5px 0;
}
.globalcat > ul > li{
    margin: 15px 0;
    font-size: 18px;
}

.globalcat a.catcha {
  font-weight: bold;
  color: #0056b3;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.globalcat a.catcha:hover {
  text-decoration: underline;
}

.globalcat ul ul { /* ẩn nhóm con mặc định */
  display: none;
  margin-left: 15px;
}

.globalcat .catcon {
  cursor: pointer;
  color: #444;
  padding: 3px 0;
}
/*.globalcat .catcon:hover {
  color: #d9534f;
}*/

.globalcat .catcon-hide {
    display: none;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #0C4CA3;
}

li.catcha > ul{
    padding: 7px 0 0 0;
}

li.catcha > ul > li.catcon {
    background: #97D1FD;
    color: #000;
    padding: 15px 10px !important;
    border: solid 1px #06F;
    font-size: 16px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.titlesp {
    text-align: center;
    font-size: 30px;
    margin: 15px 0;
}
.container {
    padding: 0 10px;
}
.globaltext {
    line-height: 25px;
}
.copyright{
    text-align: center;
    color: #000;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: solid 1px;
    text-transform: uppercase;
}

/* Mobile CSS */
@media (max-width: 768px) {
  
    .globalweb {
        width: 100%;
    }
    .logohome {
        width: 100%;
        padding-top: 0px;
    }
    .logohome img {
        width: 40%; /* logo to hơn chút trên mobile */
    }
    .subject-ts {
        font-size: 16px;
        padding: 15px 0;
    }
    .panel-heading {
        font-size: 14px;
        padding: 12px 8px;
    }
    .panel-heading i.muiten {
        font-size: 22px;
        top: 13px;
        right: 8px;
    }
    .panel-body {
        font-size: 14px;
        padding: 8px;
    }
    .globalcat ul {
        list-style: none;
        padding: 0 7px;
    }
    .globalcat > ul > li {
        font-size: 16px;
        margin: 10px 0;
    }
    li.catcha > ul > li.catcon {
        font-size: 14px;
        padding: 12px 8px !important;
    }
    .titlesp {
        font-size: 20px;
        margin: 10px 0;
    }
    .colred {
        padding-right: 5px;
    }
    li.catcon.subject2 i {
        padding-right: 5px;
    }
}

/* Extra small mobile (max 480px) */
@media (max-width: 480px) {
    .colred {
        padding-right: 5px;
    }
    .logohome img {
        width: 50%;
    }
    .subject-ts {
        font-size: 25px;
    }
    .panel-heading {
        font-size: 14px;
        padding: 10px 6px;
    }
    .panel-heading i.muiten {
        font-size: 25px;
    }
    .globalcat > ul > li {
        font-size: 14px;
    }

    li.catcha > ul > li.catcon {
        font-size: 13px;
    }
    .titlesp {
        font-size: 18px;
    }
    .panel-heading {
        position: relative;
        cursor: pointer;
        border: 1px solid #0C4CA3;
        border-radius: 5px;
        padding: 15px 15px 15px 10px; /* chừa chỗ cho icon trái và phải */
        margin-bottom: 10px;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: bold;
        background: #fff;
        display: flex;
        align-items: center;
        gap: 10px; /* khoảng cách icon và chữ */
    }
    .panel-heading .fa-plus {
        flex-shrink: 0; /* giữ icon cố định, không co lại */
    }
    .panel-heading .muiten {
        margin-left: auto; /* đẩy icon mũi tên sang phải */
        font-size: 22px;
    }
    li.catcon.subject2 i {
        padding-right: 5px;
    }
}