:root{
    --body:#fdf8e5;
    --do:#d20001;
    --xanh-duong:#0d5390;
    --button-do:#ff3d4b;
    --button-xam:#44525b;
    --vang-menu:#fce68f;
    --bg-menu:#0d081c;
    --bg-button-search:#80807f;
    --button-slider:#44525b;
    --vang-active:#a58308;
    --footer:#3c3c3c;
    --footer-tv:#313131;
}

@font-face {
    font-family: 'candara';
    src: url(../fonts/candara-bold-italic.ttf);
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'candara';
    src: url(../fonts/candara-bold.ttf);
    font-weight: 700;
}
@font-face {
    font-family: 'candara';
    src: url(../fonts/candara-italic.ttf);
    font-style: italic;
}
@font-face {
    font-family: 'candara';
    src: url(../fonts/candara.ttf);
    font-weight: 400;
}
@font-face {
    font-family: 'myriad-pro';
    src: url(../fonts/myriad-pro.otf);
    font-weight: 400;
}
@font-face {
    font-family: 'myriad-pro';
    src: url(../fonts/myriadpro-bold-italic.otf);
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'myriad-pro';
    src: url(../fonts/myriadpro-bold.otf);
    font-weight: 700;
}
@font-face {
    font-family: 'myriad-pro';
    src: url(../fonts/myriadpro-italic.otf);
    font-style: italic;
}
@font-face {
    font-family: 'myriad-pro';
    src: url(../fonts/myriadpro-semibold-italic.otf);
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'myriad-pro';
    src: url(../fonts/myriadpro-semibold.otf);
    font-weight: 500;
}

*{box-sizing: border-box;margin: 0;padding: 0;}

body{background-color: var(--body);font-size: 16px;font-family: 'candara';font-weight: 400;}

.view-web{width: 100%;}

.banner .img-banner {position: relative;width: 100%;}
.banner .img-banner img {width: 100%;height: auto;display: block;}
.banner .logo-banner {position: absolute;top: 50%;left: 10%;transform: translate(-50%, -50%);text-align: center;}
.banner .logo-banner img {width: 70px;height: auto;}

.menu-bar .toogle-search {display:flex;align-items: center;cursor: pointer;user-select: none;padding: 10px;justify-content: space-between;}
.menu-bar .toogle-search .toggle-menu {width: 28px;height: 22px;display: inline-flex;flex-direction: column;justify-content: center;gap: 4px;position: relative;}
.menu-bar .toogle-search .toggle-menu .line {height: 3px;width: 100%;border-radius: 3px;transform-origin: center;background: var(--bg-menu);}
.menu-bar .toogle-search i {line-height: 1;color: var(--bg-menu);}
.menu-bar .sky-bar {background-color: var(--bg-menu);height: 100vh;width:80%;display: flex;flex-direction: column;position: fixed;top: 12%;
left: -100%;transition: left 0.3s ease;z-index: 1000;}
.menu-bar .sky-bar.active {left: 0;}
.menu-bar .sky-bar .list-menu-nav {display: flex;flex-direction: column;padding: 0;margin: 0;list-style: none;}
.menu-bar .sky-bar .list-menu-nav li {position: relative;}
.menu-bar .sky-bar .list-menu-nav li a {display: block;padding: 20px 10px;color: var(--vang-menu);text-decoration: none;transition: all 0.3s ease;}
.menu-bar .sky-bar .list-menu-nav li a:hover {background: var(--do);color: #fff;}
.menu-bar .sky-bar .list-menu-nav li a.active {background: var(--do);color: #fff;}
.menu-bar .toggle-menu.active .line:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
.menu-bar .toggle-menu.active .line:nth-child(2) {opacity: 0;}
.menu-bar .toggle-menu.active .line:nth-child(3) {transform: rotate(-45deg) translate(4px, -6px);}
.menu-bar .form-search {display: flex;;align-items: center;width: 100%;border-radius: 20px;background: #313131;width: 60%;margin-left: 10px;}
.menu-bar .form-search input[type="search"] {flex: 1;border: none;outline: none;background: transparent;padding: 10px 0 10px 10px;color: white;}
.menu-bar .form-search input::placeholder {color: white;font-style: italic;}
.menu-bar .form-search i {cursor: pointer;background-color: var(--bg-button-search);width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;
justify-content: center; color: white;}

.content-body{padding: 10px;}
.content-body .date-slogan {display: flex;flex-direction: column;gap: 6px;align-items: flex-start;position: relative;padding-bottom: 6px;}
.content-body .date-slogan>span {display: inline-block;font-weight: 700;line-height: 1.2;padding-bottom: 0;Position: relative;color: #363636;}
.content-body .date-slogan>div{font-weight: 700;}
.content-body .activity{display: flex;flex-direction: column;gap: 10px;}
.content-body .activity a{text-decoration: none;}
.content-body .activity .lesson .title-chinh {display: flex;align-items: center;font-weight: 700;color: var(--xanh-duong);padding: 10px 15px 10px 0;gap: 10px;
font-family: 'myriad-pro';}
.content-body .activity .lesson .title-chinh img {width: 32px;height: 32px;}
.content-body .activity .lesson .slider-activity {position: relative;width: 100%;overflow: hidden;}
.content-body .activity .lesson .slider-activity img {width: 100%;height:auto;display: block;object-fit: cover;}
.content-body .activity .lesson .slider-activity .slick-prev,.slider-activity .slick-next {position: absolute;top: 50%;transform: translateY(-50%);color: #fff;border: none;
z-index: 10;cursor: pointer;font-size: 1.25em;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.content-body .activity .lesson .slider-activity .slick-prev {left: 14px;background: var(--button-xam);}
.content-body .activity .lesson .slider-activity .slick-next {right: 14px;background: var(--button-do);}
.content-body .activity .slider-top-activity {max-width: 800px;margin: auto;}
.content-body .activity .slider-top-activity__main img {width: 100%;height: auto;display: block;}
.content-body .activity .slider-top-activity__thumbs {margin-top: 10px; }
.content-body .activity .slider-top-activity__main img {width: 100%;height: 200px;object-fit: cover;display: block; }
.content-body .activity .slider-top-activity__thumbs img { width: 100%;height: 80px;object-fit: cover;cursor: pointer;}
.content-body .activity .slider-top-activity__thumbs .slick-slide {padding: 0 5px;}
.content-body .activity .slider-top-activity .slick-prev,.content-body .activity .slider-top-activity .slick-next {position: absolute;top: 50%;transform: translateY(-50%);
z-index: 10;border: none;color: #fff;font-size: 1.25em;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;
cursor: pointer;}
.content-body .activity .slider-top-activity .slick-prev {left: 10px;background: var(--button-xam);}
.content-body .activity .slider-top-activity .slick-next {right: 10px;background: var(--button-do);} 
.content-body .activity .slider-top-activity .slick-prev:before,.content-body .activity .slider-top-activity .slick-next:before {content: "";}
.content-body .activity .slider-top-activity .slick-prev i,.content-body .activity .slider-top-activity .slick-next i {font-size: 1.25em;line-height: 1;color: #fff;}
.content-body .activity .lesson .row { margin-top: 30px;}
.content-body .activity .lesson .row:after {content: "";display: table;clear: both;}
.content-body .activity .lesson .row .column {float: left;width: 16.66%;}
.content-body .activity .lesson .row .column .demo:hover,.active {opacity: 1;}
.content-body .activity .lesson .img-lesson img {width: 100%;height: auto;object-fit: cover;}
.content-body .activity .lesson .noi-dung-lesson {display: flex;flex-direction: column;gap: 8px;}
.content-body .activity .lesson .noi-dung-lesson .title-lesson {font-size: 1.2em;font-weight: 700;color: #333;
font-style: italic;}
.content-body .activity .lesson .noi-dung-lesson .ten-tg {color: #555;font-style: italic;}
.content-body .activity .lesson .noi-dung-lesson .ten-tg span {font-weight: 500;color: var(--vang-active);font-style: normal;}
.content-body .activity .lesson .noi-dung-lesson .noi-dung-bg {line-height: 1.4;color: black;text-align: justify;}
.content-body .activity .lesson ul {list-style: none;padding: 0;margin-top: 40px;}
.content-body .activity .tac-pham-list ul {margin: 0;}
.content-body .activity .lesson ul li {position: relative;padding-left: 1em;line-height: 1.3;}
.content-body .activity .lesson ul li::before {content: "";position: absolute;left: 0;top: 0.4em;width: 0.4em;height: 0.5em;
background: black;border-radius: 50%;}
.content-body .activity .slider ul li a  {text-decoration: none;color: #333;font-style: italic;}
.content-body .activity .slider ul li a:hover{color: var(--vang-active);}
.content-body .activity .lesson .list-bg.active {font-weight: 700;color: var(--vang-active);}
.content-body .slider-banner .slick-dots {position: absolute; bottom: 3%;right: 10%;display: flex !important;gap: 15px;}
.content-body .slider-banner .slick-dots li button {display: none;}
.content-body .slider-banner .slick-dots li{font-size: 1.5em;}
.content-body .slider-banner .slick-dots li.slick-active::marker{color: var(--button-do);}
.content-body .slider-banner .slick-dots li::marker{color: white;font-size: 1.5em;}
.content-body .slider-banner .slick-prev,.content-body .slider-banner .slick-next {position: absolute;top: 50%;
transform: translateY(-50%);z-index: 10;width: 40px;height: 40px;border-radius: 50%;;display: flex !important;
align-items: center;justify-content: center; transition: 0.3s;border: none;font-weight: 700;}
.content-body .slider-banner .slick-prev {left: 10px;background: var(--button-slider);}
.content-body .slider-banner .slick-next {right: 10px;background: var(--button-do);}
.content-body .slider-banner .slick-prev i,.content-body .slider-banner .slick-next i {color: #fff;font-size: 0.8em;}
.content-body .activity .lesson .column-baiviet {display: flex;flex-direction: column;gap: 30px;}
.content-body .activity .lesson .column-baiviet .card-bv .content h2{font-size: 1.3em;font-style: italic;}
.content-body .activity .lesson .column-baiviet>img {width: 100%;object-fit: cover;}
.content-body .activity .lesson .column-baiviet .content {display: flex;flex-direction: column;gap: 8px;}
.content-body .activity .lesson .column-baiviet .content .author span {color: var(--vang-active);font-style: italic;}
.content-body .activity .lesson .column-baiviet .content p{text-align: justify;font-size: 0.9em;font-style: italic;}
.content-body .activity .lesson .column-baiviet .content p a{color: var(--vang-active);}
.content-body .activity .lesson .column-baiviet .buttons {display: flex;gap: 8px;justify-content: space-between;
margin-top: 6px;}
.content-body .activity .lesson .column-baiviet .buttons .btn-prev-cd,
.content-body .activity .lesson .column-baiviet .buttons .btn-next-cd {background: transparent;cursor: pointer;border: none;font-weight: 600;font-style: italic;}
.content-body .slider-title-video .slider-clip a iframe{width:360px; height:auto;}
.content-body .slider-title-video .slick-slide {padding: 2px;}
.content-body .slider-title-video .slider-clip .slick-prev,.content-body .slider-title-video .slider-clip .slick-next {
position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;width: 40px;height: 40px;border-radius: 50%;
display: flex !important;align-items: center;justify-content: center;transition: 0.3s;border: none;font-weight: 700;
color: white;}
.content-body .slider-title-video .slider-clip .slick-prev {left: 10px;background: var(--button-slider);} 
.content-body .slider-title-video .slider-clip .slick-next {right: 10px;background: var(--button-do);}
.content-body .slider-title-video .title-video {display: inline-block;width: 100%;font-weight: 700;
color: var(--xanh-duong);font-size: 1em;font-family: 'myriad-pro';padding: 10px;}
.content-body .list-book-all {display: flex;flex-direction: column;gap: 10px;}
.content-body .list-book-all .list-book ul {list-style: none;padding-left: 0; margin: 0;}
.content-body .list-book-all .list-book ul li{position: relative;padding-left: 1em;line-height: 1.3;}
.content-body .list-book-all .list-book ul li::before{content: "";position: absolute;left: 0;top: 0.6em;width: 0.5em;
height: 0.5em;background: black;border-radius: 50%;}
.content-body .list-book-all .list-book ul li a{text-decoration: none;color: black;font-style: italic;}
.content-body .list-book-all .list-book ul li a:hover{color: var(--vang-active);}
.content-body .activity .thong-diep .column-baiviet .card-bv img{width: 100%;aspect-ratio: 2/3;}
.content-body .activity .nhan-vat .column-baiviet .card-bv .anh-nv img {width: 100%;height: auto;display: inline-flex;
align-items: center;justify-content: center;}
.content-body .activity .nhan-vat .nhan-vatpg{margin-bottom: 40px;} 
.content-body .activity .thong-diep .column-baiviet .card-bv .anh-card{display: flex;flex-direction: column;align-items: center;}
.content-body .activity .thong-diep .column-baiviet .card-bv .anh-card img{width: 317px;height: 196px;}


.footer {background: #3c3c3c;color: #f5f5dc;}
.footer h3 {margin-bottom: 10px;font-family: 'myriad-pro';}
.footer .footer-container { display: flex;flex-direction: column;gap: 20px;padding: 20px;}
.footer .footer-container .footer-menu ul {list-style: none;padding: 0;margin: 0;}
.footer .footer-container .footer-menu .ds-menu-footer,.footer .footer-container .footer-contact{margin-top: 40px;}
.footer .footer-container .footer-menu ul .kc-danh-muc{margin-bottom: 30px;}
.footer .footer-container .footer-menu ul li {margin: 5px 0;}
.footer .footer-container .footer-menu ul li {position: relative;padding-left: 1em;line-height: 1.3;}
.footer .footer-container .footer-menu ul li::before {content: "";position: absolute;left: 0;top: 0.6em;width: 0.5em;height: 0.5em;background:#f5f5dc;
border-radius: 50%;}
.footer .footer-container .footer-menu li a{text-decoration: none;color: #f5f5dc;font-size: 0.9em;}
.footer .footer-container .footer-menu .hai-gach {position: relative;height: 2px;background: #f5f5dc;width: 50%;}
.footer .footer-container .footer-menu .hai-gach::after {content: "";position: absolute;top: 6px;left: 0;height: 2px; background:#f5f5dc;;width: 100%;}
.footer .footer-container .footer-contact {text-align: center;background: #313131;padding: 15px;color: #f5f5dc;aspect-ratio: 2 / 3;display: flex;
flex-direction: column;justify-content: center;}
.footer .footer-container .footer-contact p, .footer .footer-container .footer-contact a {font-size: 1.1em;font-weight: 700;margin-top: 5px;font-weight: 400;}
.footer .footer-container .footer-contact a{text-decoration: none;color: #f5f5dc;font-weight: 700;}
.footer .footer-bottom {margin-top: 20px;color:#f5f5dc;;background-color: black;}
.footer .footer-bottom div{padding: 20px;margin: 0 auto;max-width: 1200px;}

@media(min-width:768px){
    .banner .logo-banner img {width: 150px;}

    .menu-bar .sky-bar{top: 14%;}

    .content-body{max-width: 1200px;margin: 0 auto;}
    .content-body .activity .lesson .title-chinh{font-size: 1.1em;}
    .content-body .date-slogan{flex-direction: row;justify-content: space-between;}
    .content-body .date-slogan {border-bottom: 3px double #333232;padding-bottom: 6px;margin-bottom: 12px;margin-top: 30px;}
    .content-body .activity .lesson .img-gird img {width: calc(50% - 10px);}
    .content-body .activity .lesson .column-baiviet .card-bv{display: flex;flex-direction: row;gap: 40px;}
    .content-body .list-book-all {flex-direction: row;max-width: 1500px;margin: 0 auto;}
    .content-body .list-book-all .list-book{width: 33.3%;}
    .content-body .activity .nhan-vat .column-baiviet .card-bv .anh-nv img {width: 350px;}
    .content-body .activity .lesson .slider-custom .customSlide img {height: 260px;}
    .content-body .activity .lesson .row {display: flex;flex-wrap: wrap;gap: 10px;}
    .content-body .activity .lesson .row>div {flex: 0 0 calc(33.333% - 10px);box-sizing: border-box;}
    .content-body .activity .slider-top-activity__main img { height: 270px;}
    .content-body .activity .slider-top-activity__thumbs.slick-initialized {display: block !important;}
    .content-body .activity .slider-top-activity__thumbs {display: grid !important;grid-template-columns: repeat(3, 1fr);gap: 10px;}
    .content-body .activity .slider-top-activity__thumbs img {height: 100px;}

    .footer .footer-container {flex-direction: row;max-width: 1200px;margin: 0 auto;}
    .footer .footer-container .footer-menu {flex: 1;}
    .footer .footer-container .footer-contact {flex: 1;}
    .footer .footer-container .footer-contact a { font-size: 2em;}
}
@media(min-width:996px) {
    .menu-bar .sky-bar {top: 22%;}
    .menu-bar .toogle-search {order: 2;height: 64px;}
    
    .content-body .date-slogan{font-size: 1.2em;}
    .content-body .activity .lesson .img-gird img {width: calc(33.3% - 15px);}
    .content-body .slider-title-video{max-width: 1500px;margin: 0 auto;margin-left: 20px;margin-bottom: 30px;}
    .content-body .slider-title-video .slider-clip img{width: 300px;height: 180px;}
    .content-body .slider-title-video .slider-clip a iframe {width: 280px;}

    .footer .footer-container .footer-contact .phone {font-size: 1.5em;}
}
@media(min-width:1200px) {
    .banner .logo-banner img {width: 200px;}

    .menu-bar { display: flex;flex-direction: row;background-color: var(--bg-menu);}
    .menu-bar .limit-menu{display: flex;max-width: 1200px; margin: 0 auto;}
    .menu-bar .toogle-search i{color: var(--vang-menu);}
    .menu-bar .toogle-search .toggle-menu{display: none;}
    .menu-bar .sky-bar { width: 100%; height: 64px; position: unset; background: none;}
    .menu-bar .sky-bar .list-menu-nav {flex-direction: row;height: 64px;align-items: center;flex-wrap: nowrap;white-space: nowrap;}
    .menu-bar .form-search{width: 30%;margin-left: 70%;}

    .content-body .activity {display: flex;gap: 20px;flex-direction: row;}
    .content-body .activity .lesson{width: 40%;}
    .content-body .activity .slider {width: 20%;}
    .content-body .activity .lesson .img-lesson img{height: 270px;}
    .content-body .activity .thong-diep {width: 80%;}
    .content-body .activity .nhan-vat{ width: 100%;}
    .content-body .activity .lesson .list-bg{font-size: 1.1em;}
    .content-body .list-book-all .list-book ul li a,.content-body .activity .lesson .column-baiviet .content p{font-size: 1.2em;}
    .content-body .activity .lesson .column-baiviet .buttons .btn-prev-cd,.content-body .activity .lesson .column-baiviet .buttons .btn-next-cd {font-size: 1.1em;}
    .content-body .activity .lesson .noi-dung-lesson .title-lesson{font-size: 1.2em;}

    .footer h3{font-size: 1.4em;}
    .footer .footer-container .footer-menu li a{font-size: 1.2em;}
}
@media(min-width:1300px) {
    .banner .logo-banner {left: 20%;}
    .banner .logo-banner img {width: 70%;}

    .menu-bar .toogle-search{display: none;}
    .menu-bar .menu-search{display: flex;align-items: center;}
    .menu-bar .form-search {width: 20%;margin-left: unset;height: 35px;}
}
@media(min-width:1400px) {
    .content-body .activity .lesson .column-baiviet .content h2{font-size: 1.4em;}
    .content-body .activity .lesson .column-baiviet .content p{font-size: 1.2em;}
}
@media(min-width:1500px){
    .content-body .slider-title-video .slider-clip img {width: 350px;height: 200px;}
}
@media(min-width:1600px){
    .banner .logo-banner {left: 25%;}
}
@media(min-width:1900px) {
}