:root{
    --bg-body:#FFF0CC;
    --mau-chu-nav:#793710;
    --mau-tieude-button:#F0764C;
    --mau-gia:#F9933B;
    --mau-chu-ft:#80440E;
    --bg-options:#FFEFE1;
    --box:#F2BD8D;
}
@font-face {
    font-family: 'afacad';
    src: url(../fonts/afacad-regular.ttf);
    font-weight: 400;
}
@font-face {
    font-family: 'afacad';
    src: url(../fonts/afacad-italic.ttf);
    font-style: italic;
}
@font-face {
    font-family: 'afacad';
    src: url(../fonts/afacad-bold.ttf);
    font-weight: 700;
}
@font-face {
    font-family: 'asul';
    src: url(../fonts/asul-bold.ttf);
    font-weight: 700;
}
@font-face {
    font-family: 'asul';
    src: url(../fonts/asul-regular.ttf);
    font-weight: 400;
}

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

body{font-size: 16px;background: var(--bg-body);font-weight: 400;font-family: 'asul';margin: 0;padding: 0;}

.home-page .view-web{width: 100%;}

.bg-right-ayako{display: none;}

.header-menu {width: 100%;position: fixed;top: 0;left: 0;z-index: 1000;background: transparent;transition: background 0.3s ease, box-shadow 0.3s ease;}
.header-menu.scrolled {background: var(--bg-body);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.header-menu .sky-bar .container-nav {display: flex;justify-content: center;align-items: center;position: relative;padding: 15px 10px;height: 80px;}
.header-menu .sky-bar .container-nav .decor-nav {display: flex;align-items: center;}
.header-menu .sky-bar .container-nav .decor-nav .nam-css {margin-top: 5%;}
.header-menu .sky-bar .container-nav .logo-nav {position: absolute;left: 50%;transform: translateX(-50%);}
.hamburger-button {margin-left: auto;cursor: pointer;}
.header-menu .sky-bar .container-nav .logo-nav img {height: 70px;}
.header-menu .sky-bar .container-nav .hamburger-button {display: flex;flex-direction: column;align-items: center;gap: 6px;cursor: pointer;z-index: 1002;}
.header-menu .sky-bar .container-nav .hamburger-button .menu-toogle {width: 30px;height: 20px;display: flex;flex-direction: column;justify-content: space-between;}
.header-menu .sky-bar .container-nav .hamburger-button .menu-toogle .line {height: 2px;background: black;}
.header-menu .sky-bar .container-menu {position: fixed;top: -100%;left: 0;width: 100%;height: 100%;background: var(--bg-body);transition: top 0.5s ease;
z-index: 2000;display: flex;flex-direction: column;}
.header-menu .sky-bar .container-menu.active {top: 0;}
.header-menu .sky-bar .container-menu .btn-close {position: absolute;top: 20px;right: 25px;font-size: 1.5em;cursor: pointer;z-index: 2001;}
.header-menu .sky-bar .container-menu .list-menu {list-style: none;display: flex;flex-direction: column;gap: 30px;margin-top: 30px;padding: 20px;}
.header-menu .sky-bar .container-menu .list-menu li a {text-decoration: none;font-weight: 700;color: var(--mau-chu-nav);transition: color 0.3s;}
.header-menu .sky-bar .container-menu .list-menu li a:hover {color: black;}

.banner {margin-top: 0;padding-top: 80px;}
.banner .slider-banner {border-radius: 10px;padding: 10px;}
.banner .slider-banner img {object-fit: cover;width: 100%;height: 100%;}
.banner .decor-banner-left ,.banner .decor-banner-right{display: none;}

.title-chinh {text-align: center;font-size: 1.5em;font-weight: 700;margin-bottom: 10px;display: inline-block;color: var(--mau-tieude-button);}

.about-ayako {box-sizing: border-box;width: 100%;padding: 16px;display: flex;align-items: center;flex-direction: column;}
.about-ayako .decor-about{margin-top: -3%;}
.about-ayako .decor-about .decor{display: none;}
.about-ayako .content-about-ayako {line-height: 1.6;color: var(--mau-chu-nav);text-align: justify;font-family: 'afacad';font-weight: 400;}

.options{padding: 20px;}
.options .options-product{display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px;background: var(--bg-options);
border-radius: 20px;box-shadow: 10px 10px 0 0 var(--box);}
.options .options-product .all-product {display: flex;flex-wrap: wrap;gap: 16px;}
.options .options-product .all-product .card-product {flex: 0 0 calc(50% - 16px);overflow: hidden;text-align: center;text-decoration: none;color: black;}
.options .options-product .all-product .card-product .img-card-product img {width: 100%;height: auto;display: block;}
.options .options-product .all-product .card-product .price-product,.options-product .all-product .card-product .detail-product{font-family: 'afacad';}
.options .options-product .all-product .card-product .name-product,.options-product .all-product .card-product .price-product{font-weight: 700;}
.options .options-product .all-product .card-product .name-product{font-size: 0.8em;display: flex;flex-direction: column;margin-top: 10px;}
.options .options-product .all-product .card-product .price-product{color: var(--mau-gia);}
.options .options-product .all-product .card-product .detail-product{font-size: 0.5em;}
.options .options-product .button-qr {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;margin-top: 40px;}
.options .options-product .button-qr .btn-click {display: inline-block;padding: 12px 24px;background: var(--mau-tieude-button);color: #fff;text-decoration: none;
border-radius: 15px;margin-bottom: 20px;transition: 0.3s;}
.options .options-product .button-qr .qr-img img {max-width: 200px;height: auto;}
.options .options-product .logo-options {align-self: flex-end;}
.options .options-product .logo-options img {height: 70px;}
.options .options-product .decor-options .hoa-van,.options .options-product .decor-options .logo-hoa .hoa-decor,.options .khung-chua .decor-right-options,
.options .khung-chua .decor-left-options,.options .khung-chua .la-trai-options{
display: none;}

.customer-gallery {display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 40px;}
.decor-customer .bong-bong{display: none;}
.customer-gallery .content-customer {line-height: 1.6;padding: 16px;text-align: center;color: var(--mau-chu-nav);background: white;padding: 10px;font-family:'afacad';
font-weight: 400;}
.customer-gallery .slider {position: relative;width: 100%;height: 220px;max-width: 100%;margin: 0 auto;overflow: hidden;margin-top: 30px;}
.customer-gallery .slider .slide {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;transform: scale(0.9);transition: all 0.6s ease;}
.customer-gallery .slider .slide img {width: 100%;height: auto;}
.customer-gallery .slider .slide.active {opacity: 1;transform: scale(1);z-index: 2;}
.customer-gallery .slider .arrow {position: absolute;top: 50%;transform: translateY(-50%);font-size: 8em;color: var(--mau-chu-nav);border: none;cursor: pointer;
z-index: 5;display: flex;align-items: center;justify-content: center;background: none;}
.customer-gallery .slider .arrow.left {left: 8px;}
.customer-gallery .slider .arrow.right {right: 8px;}

.contact-access-infor{margin-top: 40px;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 10px;}
.contact-access-infor .container-map .la-hoa{display: none;}
.contact-access-infor .container-map .map {display: flex;flex-direction: column;gap: 15px;margin: 0 auto;box-sizing: border-box;}
.contact-access-infor .container-map .map .iframe-map img {width: 100%;height: auto;display: block;}
.contact-access-infor .container-map .map .adress-sdt {display: flex;flex-direction: column;gap: 8px;color: var(--mau-chu-nav);font-family: 'afacad';}
.contact-access-infor .container-map .map .sdt a {text-decoration: none;color: var(--mau-chu-nav);font-family: 'afacad';font-weight: 700;}
.contact-access-infor .container-map .map .address,.contact-access-infor .container-map .map .sdt a,.contact-access-infor .map .time {display: flex;gap: 8px;}

footer {color: var(--mau-chu-ft);background-color: #FFEFE1;margin-top: 40px;}
footer .footer-container .limited-ft{display: flex;flex-direction: column;align-items: center;text-align: left;gap: 20px;padding: 20px 15px;}
footer .footer-container .logo-ft {display: flex;align-items: center;justify-content: center;}
footer .footer-container .logo-ft img {max-width: 150px;}
footer .footer-container .footer-center {display: flex;flex-direction: column;gap: 20px;}
footer .footer-container .footer-center .adress-sdt{display: flex;flex-direction: column;gap: 15px;}
footer .footer-container .footer-center .adress-sdt .sdt a{color: var(--mau-chu-ft);text-decoration: none;font-weight: 700;display: flex;gap: 8px;font-family: 'afacad';}
footer .footer-container .adress-sdt span ,footer .footer-container .options-ft span {font-weight: 700;margin-bottom: 8px;display: block;}
footer .footer-container .adress-sdt span{font-size: 2em;}
footer .footer-container .options-ft span{font-size: 1.4em;}
footer .footer-container .adress-sdt .address,footer .footer-container .adress-sdt .sdt,footer .footer-container .adress-sdt .time {margin: 5px 0;display: flex;gap: 8px;
font-family: 'afacad';}
footer .footer-container .social {display: flex;gap: 15px;}
footer .footer-container .social a {font-size: 2em;color: var(--mau-chu-ft);text-decoration: none;}
footer .footer-container .options-ft {text-align: left;}
footer .footer-container .options-ft ul {list-style: none;padding: 0;margin: 0;}
footer .footer-container .options-ft ul li {margin: 6px 0;}
footer .footer-container .options-ft ul li a {color: var(--mau-chu-ft);text-decoration: none;font-family: 'afacad';}
footer .footer-bottom {padding-top: 15px;background: var(--mau-chu-ft);color: white;}
footer .footer-bottom .content-ft {display: flex;flex-direction: column;text-align: center;gap: 5px;padding: 20px 15px;font-family: 'afacad';}

#backToTop {position: fixed;bottom: 30px;right: 20px;width: 45px;height: 45px;display: none;justify-content: center;align-items: center;background: var(--mau-chu-ft);
color: #fff;border: none;border-radius: 50%;font-size: 2em;cursor: pointer;z-index: 999;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);}

@media(min-width:768px){
    .options .options-product .all-product { padding: 20px;}
    .options .options-product .all-product .card-product{margin-top: 30px;}
    .options .options-product .all-product .card-product .name-product {font-size: 1em;}
    .options .options-product .all-product .card-product .detail-product {font-size: 0.8em;}
    .options .options-product .decor-options .hoa-van{display: block;}
    .options .options-product .decor-options .hoa-van {position: absolute;left: 14px;bottom: -3264px;}
    .options .options-product .decor-options .hoa-van img {width: 50%;}
    .options .options-product .decor-options {display: flex;flex-direction: row;align-items: center;}
    .options .options-product .button-qr{position: relative;left: 25%;}
    .options .options-product .logo-options {align-self:unset ; position: relative;left: 100%;}

    .customer-gallery .slider {height: 500px;}

    .contact-access-infor .map {display: flex;flex-direction: row;align-items: flex-start;gap: 30px;position: relative;max-width: 900px;margin: 0 auto;}
    .contact-access-infor .map .iframe-map {flex: 2;position: relative;}
    .contact-access-infor .map .adress-sdt {flex: 1;position: absolute;bottom: 13%;right: 34px;display: flex;flex-direction: column;gap: 5px;font-size: 0.9em;}

    footer .footer-container .limited-ft{flex-direction: row;max-width: 1200px;margin: 0 auto;justify-content: space-between;align-items: unset;}
    footer .footer-bottom .content-ft {flex-direction: row;justify-content: space-between;}
    footer .footer-container .logo-ft img {max-width: 200px;margin-top: -90%;}
}
@media(min-width:996px) {
    .header-menu .sky-bar {display: flex;flex-direction: row;gap: 30px;align-items: center;}
    .header-menu .sky-bar .container-nav{padding: unset;}
    .header-menu .sky-bar .container-nav .logo-nav {position: relative;left: 0;transform: none;}
    .header-menu .sky-bar .container-nav .hamburger-button {display: none;}
    .header-menu .sky-bar .container-menu {position: relative;top: unset;left: unset;background: none;display: flex;align-items: center;justify-content: flex-end;}
    .header-menu .sky-bar .container-menu .list-menu {flex-direction: row;margin: unset;padding: unset;}
    .header-menu .sky-bar .container-menu .btn-close {display: none;}

    .banner {margin-top: 0;padding-top: 150px;max-width: 900px;margin: 0 auto;}

    .title-chinh{font-size: 2.5em;}

    .options .khung-chua {max-width: 1200px;margin: 0 auto;}
    .options .options-product{max-width: 1000px;margin: 0 auto;}
    .options .options-product .all-product .card-product {flex: 0 0 calc(25% - 16px);}
    .options .options-product .decor-options .hoa-van{bottom: -1578px;}

    .customer-gallery{max-width: 1200px;margin: 0 auto;margin-top: 100px;}
    .customer-gallery .content-customer , .about-ayako .content-about-ayako{font-size: 1.1em;line-height: 1.8;max-width: 900px;margin: 0 auto;border-radius: 15px}
    .customer-gallery .slider {height: 300px;}
    .customer-gallery .slider .slide {width: 33%;margin-top: 30px;}  
    .customer-gallery .slider .slide.prev {left: 0;opacity: 0.7;transform: perspective(800px) rotateY(25deg) scale(0.9);}
    .customer-gallery .slider .slide.active {left: 33%;}
    .customer-gallery .slider .slide.next {left: 66%;opacity: 0.7;transform: perspective(800px) rotateY(-25deg) scale(0.9);}

    .contact-access-infor .map .adress-sdt {bottom: 11%;right: 5%;font-size: 1em;}
}
@media(min-width:1200px) {
    .bg-right-ayako {display: block;position: absolute;top: -32%;right: 0;bottom: 0;z-index: -1;overflow: hidden;}
    .bg-right-ayako img { max-width: 100%; height: auto; display: block;}

    .header-menu .sky-bar{max-width: 1200px;margin: 0 auto;justify-content: space-between;}
    .header-menu .sky-bar .container-menu .list-menu{gap: 40px;}
    .header-menu .sky-bar .container-menu .list-menu li a, .options-product .all-product .card-product .price-product{font-size: 1.3em;}

    .banner .decor-banner {position: relative;width: 100%;}
    .banner .decor-banner .decor-banner-left,.banner .decor-banner .decor-banner-right {position: absolute;top: 50%;transform: translateY(-50%);}
    .banner .decor-banner .decor-banner-left {left: -20%;top:66% ;z-index: 1500;}
    .banner .decor-banner .decor-banner-left img, .banner .decor-banner .decor-banner-right img {height: 5%;display: block;}
    .banner .decor-banner .decor-banner-left{display: block;}

    .about-ayako{margin-top: 200px;}
    .about-ayako .decor-about {max-width: 1200px;margin: 0 auto;display: flex;align-items: center;justify-content: center;gap: 20px;margin-top: -1%;}
    .about-ayako .decor-about .decor,.about-ayako .decor-about .decor img{display: block;}
    .about-ayako .decor-about .decor {position: relative;}
    .about-ayako .decor-about .la-about {margin-right: 110%;margin-top: -11%;}
    .about-ayako .decor-about .la-about {margin-right: 110%;margin-top: -11%;}
    .about-ayako .decor-about .trai-about{transform: translateY(-120px);}
    .about-ayako .decor-about .decor img {max-height: 300px;width: auto;}
    .about-ayako .decor-about .content-about-ayako {position: absolute;}

    .options .options-product .decor-options .logo-hoa .hoa-decor {display: block;}
    .options .options-product .decor-options .hoa-van img {width: 70%;}
    .options .options-product .button-qr .btn-click {font-size: 1.5em;}
    .options .options-product {position: relative;padding-bottom: 320px;overflow: hidden;}
    .options .options-product .decor-options .hoa-van {position: absolute;left: -15px;bottom:-40px;}
    .options .options-product .decor-options .logo-hoa .hoa-decor img{width: 80%;}
    .options .options-product .button-qr {position: absolute;left: 50%;transform: translate(-50%, 100%);margin-top: -40px;}
    .options .options-product .decor-options .logo-hoa {position: absolute;right: 0;bottom: 0;display: flex;flex-direction: column;align-items: flex-end;}
    .options .options-product .logo-options img{height: 150px;}

    .decor-customer {position: relative;display: inline-block;}
    .decor-customer .bong-bong {display: block;position: absolute;top: -60px;right: -8%;}
    .decor-customer .bong-bong img {width: 130px;height: auto;display: block;}

    .contact-access-infor{margin-top: 180px;}
    .contact-access-infor .container-map{display: flex;}
    .contact-access-infor .container-map .la-hoa {display: block;}
    .contact-access-infor .container-map .la-left {position: absolute;z-index: 10;}
    .contact-access-infor .container-map .map{position: relative;display: inline-block;left: 2%;}
    .contact-access-infor .container-map .hoa-right{margin-top: -20%;}

    footer{background-color: transparent;}
    footer .footer-container{background-image: url("../img/bg-footer.png");background-size: cover;background-repeat: no-repeat;background-position: center top;
    width: 100%;min-height: 100vh;display: flex;justify-content: flex-start;align-items: center;padding-top: 210px;box-sizing: border-box;}
    footer .footer-container .limited-ft{gap: 50px;}
    footer .footer-container .footer-center{font-size: 1em;}
    footer .footer-container .options-ft ul li a{font-size: 1.2em;}
}
@media(min-width:1300px) {
    .contact-access-infor .map .adress-sdt{bottom: 15%;}
}
@media(min-width:1400px){
    .banner .decor-banner .decor-banner-right{right: -50%;top: 82%;display: block;}
    .banner .decor-banner .decor-banner-right img {height: 5%;}

    .options .khung-chua {position: relative;}
    .options .khung-chua .decor-right-options,.options .khung-chua .decor-left-options,.options .khung-chua .la-trai-options{display: block;}
    .options .khung-chua .decor-left-options{position: absolute;left: -2%;top: 24%;}
    .options .khung-chua .decor-left-options img{width: 70%;}
    .options .khung-chua .decor-right-options {position: absolute;right: -8%;bottom: -80px;}
    .options .khung-chua .la-trai-options img{width: 50%;margin-left: 18%;}
}
@media(min-width:1800px){
    footer .footer-container{padding-top: 200px;}
}