*{ margin:0; padding:0; box-sizing:border-box; } 
html{ scroll-behavior:smooth; } 
:root{--e-global-color-primary: #006837; --e-global-color-secondary: #2A7258; --e-global-color-text: #000000; --e-global-color-accent: #92298F; --e-global-color-c9e335e: #F0EEE4; --e-global-color-01f1ac7: #E5E3D5; --e-global-typography-primary-font-family: "Phudu"; --e-global-typography-primary-font-size: 65px; --e-global-typography-primary-font-weight: 500; --e-global-typography-primary-text-transform: none; --e-global-typography-primary-font-style: normal; --e-global-typography-primary-text-decoration: none; --e-global-typography-primary-line-height: 1.3em; --e-global-typography-secondary-font-family: "Phudu"; --e-global-typography-secondary-font-size: 45px; --e-global-typography-secondary-font-weight: 500; --e-global-typography-secondary-text-transform: none; --e-global-typography-secondary-font-style: normal; --e-global-typography-secondary-text-decoration: none; --e-global-typography-secondary-line-height: 1.4em; --e-global-typography-text-font-family: "Montserrat"; --e-global-typography-text-font-size: 16px; --e-global-typography-text-font-weight: 400; --e-global-typography-text-text-transform: none; --e-global-typography-text-font-style: normal; --e-global-typography-text-text-decoration: none; --e-global-typography-text-line-height: 1.8em; --e-global-typography-accent-font-family: "Montserrat"; --e-global-typography-accent-font-size: 14px; --e-global-typography-accent-font-weight: 600; --e-global-typography-accent-text-transform: none; --e-global-typography-accent-font-style: normal; --e-global-typography-accent-text-decoration: none; --e-global-typography-7881878-font-family: "Phudu"; --e-global-typography-7881878-font-size: 32px; --e-global-typography-7881878-font-weight: 500; --e-global-typography-7881878-text-transform: none; --e-global-typography-7881878-font-style: normal; --e-global-typography-7881878-text-decoration: none; --e-global-typography-7881878-line-height: 1.5em; --e-global-typography-bea5c50-font-family: "Phudu"; --e-global-typography-bea5c50-font-size: 25px; --e-global-typography-bea5c50-font-weight: 500; --e-global-typography-bea5c50-text-transform: none; --e-global-typography-bea5c50-font-style: normal; --e-global-typography-bea5c50-text-decoration: none; --e-global-typography-bea5c50-line-height: 1.5em; --e-global-typography-7c41325-font-family: "Phudu"; --e-global-typography-7c41325-font-size: 21px; --e-global-typography-7c41325-font-weight: 500; --e-global-typography-7c41325-text-transform: none; --e-global-typography-7c41325-font-style: normal; --e-global-typography-7c41325-text-decoration: none; --e-global-typography-7c41325-line-height: 1.6em; --e-global-typography-4375853-font-family: "Phudu"; --e-global-typography-4375853-font-size: 18px; --e-global-typography-4375853-font-weight: 500; --e-global-typography-4375853-text-transform: none; --e-global-typography-4375853-font-style: normal; --e-global-typography-4375853-text-decoration: none; --e-global-typography-4375853-line-height: 1.6em; --e-global-typography-447d026-font-family: "Montserrat"; --e-global-typography-447d026-font-size: 15px; --e-global-typography-447d026-font-weight: 600; --e-global-typography-447d026-text-transform: uppercase; --e-global-typography-447d026-font-style: normal; --e-global-typography-447d026-text-decoration: none; --e-global-typography-447d026-letter-spacing: 5px; --e-global-typography-3d6b271-font-family: "Montserrat"; --e-global-typography-3d6b271-font-size: 12px; --e-global-typography-3d6b271-font-weight: 600; --e-global-typography-3d6b271-text-transform: uppercase; --e-global-typography-3d6b271-line-height: 1.6em; --e-global-typography-3d6b271-letter-spacing: 0.5px; --e-global-typography-9ebfb62-font-family: "Montserrat"; --e-global-typography-9ebfb62-font-size: 13px; --e-global-typography-9ebfb62-font-weight: 500;}
body{ font-family: "Phudu", sans-serif; background:#efeee7; overflow-x:hidden; color:#111; } 
img{ width:100%; display:block; } 
*{padding:0; margin:0}
row li*, :after, :before, html { box-sizing: border-box; }
a, a:hover{text-decoration:none;}
.fl{float:left}
.fr{float:right}
.cp{cursor:pointer}
.tr{text-align:right}
img {max-width: 100%; width: auto; height:auto}
p, h1, h2, h3, h4, h5, h6, ul {margin: 0;}
p, h1, h2, h3, h4, h5, h6, ul,div{line-height:150%}
.tj{text-align:justify}
.td{text-decoration:underline}
.bold {font-weight: 600}
.red {color: red}
.upper {text-transform: uppercase}
.an{display:none !important}
.hien{display:block !important}
.w100{width:100%}
.pr{position:relative}
.pa{position:absolute}
.italic {font-style: italic}
.tu{text-transform:uppercase}
.df{display:flex}
.aic{align-items:center}
.jcc{justify-content:center}
.tc{text-align:center}
/* =============================== HEADER =============================== */ 
.main-header{width:100%; z-index:999; background:#006b2f; transition:.4s; } 
.main-header.scrolled{ background:rgba(0,107,47,.94); backdrop-filter:blur(12px); box-shadow:0 10px 30px rgba(0,0,0,.15); } 
header img{max-width: inherit; height: 80px; object-fit: fill; display: inline-block; vertical-align: middle; border: none; border-radius: 0; box-shadow: none;}
.navbar{ min-height:78px; } 
.navbar-brand{ color:#fff; font-size:32px; letter-spacing:3px; } 
.navbar-brand:hover{ color:#fff; } 
.nav-link{ color:var(--e-global-color-01f1ac7); text-transform:uppercase; font-size:21px; letter-spacing:1px; margin:0 10px; position:relative; font-weight:500; transition-duration: 0.2s; } 
.nav-link::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--e-global-color-01f1ac7); transition:.3s; } 
.nav-link:hover::after{ width:100%; } 
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{color:var(--e-global-color-01f1ac7); text-decoration:none}
.navbar-nav .nav-link:hover{color:var(--e-global-color-01f1ac7);}
.book-btn{ background:#fff; color:#006b2f; border-radius:100px; padding:12px 24px; font-weight:500; transition:.3s; display:inline-block; font-size:21px } 
.book-btn:hover{ transform:translateY(-2px); color:#006b2f; } 
.nav-link:hover::after, .nav-link.active::after { width: 100%; } 
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; background: #fff; transition: .3s; }
/* =============================== BANNER SLIDER =============================== */ 
.hero-slider{ position:relative; height:100vh; overflow:hidden;} 
.carousel-item{ position:relative; } 
.carousel-item img{ width:100%; height:100%; object-fit:cover;} 
.carousel-overlay{ position:absolute; inset:0; background: linear-gradient( to bottom, rgba(0,0,0,.2), rgba(0,0,0,.55) ); } 
.hero-content{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5; width:100%; text-align:center; padding:20px; } 
.hero-title{ font-size:120px; line-height:1; color:#fff; text-transform:uppercase; letter-spacing:4px; margin-bottom:25px; animation:fadeUp 1s ease; } 
.hero-desc{ color:#fff; max-width:850px; margin:auto; font-size:18px; line-height:2; animation:fadeUp 1.2s ease; } 
.carousel-indicators [data-bs-target]{ width:12px; height:12px; border-radius:50%; border:none; } 
/* =============================== REVEAL EFFECT =============================== */ 
.reveal{ opacity:0; transform:translateY(100px); transition:1s cubic-bezier(.2,.65,.2,1); } 
.reveal.active{ opacity:1; transform:translateY(0); } 
.reveal-left{ opacity:0; transform:translateX(-120px); transition:1s cubic-bezier(.2,.65,.2,1); } 
.reveal-left.active{ opacity:1; transform:translateX(0); } 
.reveal-right{ opacity:0; transform:translateX(120px); transition:1s cubic-bezier(.2,.65,.2,1); } 
.reveal-right.active{ opacity:1; transform:translateX(0); } 
/* =============================== FEATURES =============================== */ 
.features{ padding:120px 0; } 
.feature-card{ background:#f7f5ee; border:1px solid #ddd; padding:50px 35px; text-align:center; transition:.4s; height:100%; } 
.feature-card:hover{ transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.08); } 
.feature-number{ color:#006b2f; font-size:72px; line-height:1; margin-bottom:20px; } 
.feature-title{ color:#006b2f; font-weight:500; margin-bottom:15px; font-size:25px; text-transform:uppercase; } 
.feature-card p{ color:#555; line-height:1.9; } 
.box-feature img{width:38%; opacity:0.5}
/* =============================== ABOUT =============================== */ 
.about{ padding:70px 0; } 
.about-image{ position:relative; } 
.about-image-main{ border-radius:0; overflow:hidden; } 
.about-image-sub{ position:absolute; width:290px; bottom:40px; right:-40px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.15); } 
.section-tag{ color:#8d2cb8; font-size:13px; letter-spacing:3px; font-weight:700; text-transform:uppercase; margin-bottom:20px; display:block; } 
.section-title{ color:#006b2f; font-size:45px; line-height:1.4em; margin-bottom:25px; text-transform:uppercase; letter-spacing:2px; } 
.about-content p{ line-height:2; color:#444; margin-bottom:15px; font-family: var(--e-global-typography-text-font-family), Sans-serif; text-align:justify} 
.about-content{padding-left:40px}
.book-about{background:var( --e-global-color-accent ); color: #fff; border-radius: 100px; padding: 8px 20px; font-weight: 500; transition: .3s; display: inline-block; font-size: 14px; font-family: var(--e-global-typography-text-font-family), Sans-serif;}
/* =============================== STATS =============================== */ 
.stats{ padding-bottom:100px; } 
.stat-box{ background:#f7f5ee; border:1px solid #ddd; padding:45px 20px; text-align:center; height:100%; } 
.stat-number{ color:#006b2f; font-size:45px; line-height:1; } 
.stat-box p{ margin-top:15px; color:#444; } 
/* =============================== PARALLAX =============================== */ 
.parallax{ position:relative; height:90vh; overflow:hidden; background-attachment:fixed; background-image: url('https://images.unsplash.com/photo-1559339352-11d035aa65de?q=80&w=1600&auto=format&fit=crop'); background-size:cover; background-position:center; } 
.parallax::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); } 
.parallax-content{ position:relative; z-index:5; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; color:#fff; } 
.parallax-title{ font-size:100px; line-height:1; margin-bottom:20px; text-transform:uppercase; letter-spacing:4px; } 
.parallax-content p{ max-width:800px; line-height:2; font-size:18px; } 
/* =============================== MENU =============================== */ 
.menu-section{ padding:70px 0; } 
.menu-card{ position:relative; overflow:hidden; border-radius:0; cursor:pointer; } 
.menu-card img{ height:500px; object-fit:cover; transition:1.2s; } 
.menu-card:hover img{ transform:scale(1.12); } 
.menu-overlay{ position:absolute; inset:0; background: linear-gradient( to top, rgba(0,0,0,.8), transparent ); display:flex; align-items:flex-end; padding:40px; } 
.menu-title{color:#fff; font-size:42px; letter-spacing:2px; margin-bottom:10px; text-transform:uppercase; font-family: var(--e-global-typography-7881878-font-family), Sans-serif; font-size: var(--e-global-typography-7881878-font-size); font-weight: var(--e-global-typography-7881878-font-weight); text-transform: var(--e-global-typography-7881878-text-transform); font-style: var(--e-global-typography-7881878-font-style); text-decoration: var(--e-global-typography-7881878-text-decoration); line-height: var(--e-global-typography-7881878-line-height); letter-spacing: var(--e-global-typography-7881878-letter-spacing); word-spacing: var(--e-global-typography-7881878-word-spacing); } 
.menu-title a{color:#fff}
.icon-menu-button-of-three-horizontal-lines{fill: var(--e-global-color-accent); color: var(--e-global-color-accent); font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform);}
.menu-overlay p{ color:#eee; line-height:1.8;     font-family: var(--e-global-typography-accent-font-family), Sans-serif; transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, transform var(--e-transform-transition-duration, .4s);} 
/* =============================== ANIMATION =============================== */ 
@keyframes fadeUp{ from{ opacity:0; transform:translateY(80px); } to{ opacity:1; transform:translateY(0); } } 

/* ========================= STATS COUNTER ========================= */ 
.stats-section{ padding:70px 0; } 
.stats-wrapper{ border:1px solid #d8d4ca; background:#efeee7; } 
.stat-item{ padding:70px 40px; text-align:center; position:relative; height:100%; } 
.stat-item::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:180px; background:#d7d2c8; } 
.stat-last::after{ display:none; } 
.stat-number{color:#006b2f; font-family: var(--e-global-typography-secondary-font-family), Sans-serif; font-size:45px; line-height:1; letter-spacing:2px; margin-bottom:18px;      font-weight: var(--e-global-typography-secondary-font-weight);} 
.stat-number sup{ font-size:28px; top:-1em; position:relative; color:#f5a623; font-weight:700; } 
.k-text{ margin-left:5px; } 
.stat-text{ font-size:16px; font-family: var(--e-global-typography-text-font-family), Sans-serif; line-height:1.7; color:#222; max-width:300px; margin:auto; } 
/* ========================= PRODUCT ========================= */
.product{padding:70px 0;}
.title-pro h2{color:#006b2f; font-size:45px; line-height:1.4em; margin-bottom:25px; text-transform:uppercase; letter-spacing:2px;}
.box-product{ width:100%;   background-color: var(--e-global-color-01f1ac7); margin-bottom:30px; float:left; padding-bottom:20px}
.box-product figure{margin-bottom:30px}
.box-product figure img{width:100%;}
.text-pro h2{font-family: var(--e-global-typography-3d6b271-font-family), Sans-serif; font-size: var(--e-global-typography-3d6b271-font-size); font-weight: var(--e-global-typography-3d6b271-font-weight); text-transform: var(--e-global-typography-3d6b271-text-transform); line-height: var(--e-global-typography-3d6b271-line-height); letter-spacing: var(--e-global-typography-3d6b271-letter-spacing); color: var(--e-global-color-accent); margin-bottom:10px}
.text-pro h3{font-family: var(--e-global-typography-bea5c50-font-family), Sans-serif; font-size: var(--e-global-typography-bea5c50-font-size); font-weight: var(--e-global-typography-bea5c50-font-weight); text-transform: uppercase; font-style: var(--e-global-typography-bea5c50-font-style); text-decoration: var(--e-global-typography-bea5c50-text-decoration); line-height: var(--e-global-typography-bea5c50-line-height);     color: var(--e-global-color-primary); margin-bottom:20px}
.text-pro h3 a{color: var(--e-global-color-primary); }
.view-pro span, .view-pro a{background-color: var(--e-global-color-accent); font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); font-style: var(--e-global-typography-accent-font-style); text-decoration: var(--e-global-typography-accent-text-decoration); fill: var(--e-global-color-c9e335e); color: var(--e-global-color-c9e335e); border-style: solid; border-width: 0px 0px 0px 0px; border-color: var(--e-global-color-accent); border-radius: 30px 30px 30px 30px; padding: 10px 28px 11px 28px;}
.view-pro{margin-bottom:20px; padding:0 20px}
.sum-pro{font-family: var(--e-global-typography-text-font-family), Sans-serif;}
.ds-news .menu-card img{width:100%; height:auto}
.ds-news .menu-overlay{opacity:1}
.ds-news .menu-card{}

/*Nhận xét*/ /* ========================= REVIEW SECTION ========================= */ 
.review-section{ padding:70px 0; } 
.google-review{ margin-bottom:60px; } 
.google-review .carousel-item{height:35vh} 
.google-review-info{ text-align:center; } 
.google-review-info h3{ font-size:25px; margin-bottom:10px; font-family: "Montserrat", sans-serif; } 
.google-stars{width:100%; font-size:54px; color:#f4b400; letter-spacing:4px; line-height:1; margin-bottom:18px; display: flex; justify-content: center; } 
.google-stars img{width:30px; height:30px; float:left; margin:0 5px} 
.google-review-info p{ font-size:20px; margin-bottom:20px; } 
.google-logo{ width:110px; margin:auto; } 
.review-card{ background:#fff; border-radius:24px; padding:28px; height:100%; box-shadow:0 10px 30px rgba(0,0,0,.05); transition:.4s; } 
.review-card:hover{ transform:translateY(-8px); } 
.review-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; } .review-user{ display:flex; gap:14px; align-items:center; } 
.review-user img{ width:58px; height:58px; border-radius:50%; object-fit:cover; } 
.review-user h5{ margin-bottom:4px; font-size:15px; font-family: var(--e-global-typography-accent-font-family), Sans-serif; } 
.review-user span{ font-size:14px; color:#777; } 
.review-google{ width:24px !important; } 
.review-stars{ width:100%; color:#f4b400; font-size:22px; margin-bottom:16px; float:left} 
.review-stars img{width:17px; height:17px; margin:0 3px; float:left}
.review-card p{ line-height:1.8; font-size:15px; color:#444; font-family: var(--e-global-typography-accent-font-family), Sans-serif; } 
.ti-footer-filter-text{font-family: var(--e-global-typography-accent-font-family), Sans-serif;}


/* ========================= GOOGLE REVIEW ========================= */ 
/* ========================= SLIDER ========================= */ 
.review-slider-wrapper{ position:relative; } 
.review-slider{ display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding:10px 5px 25px; } 
.review-slider::-webkit-scrollbar{ display:none; } 
/* ========================= CARD ========================= */ 
/* ========================= REVIEW CARD ========================= */ 
.review-card{ min-width:300px; max-width:300px; background:#fff; border-radius:32px; padding:32px; flex-shrink:0; transition:.35s ease; display:flex; flex-direction:column; height:fit-content; /* QUAN TRỌNG */ } 
/* ========================= REVIEW TEXT ========================= */ 
.review-content{ margin-top:10px; } 
.review-text{ font-size:16px; line-height:1.75; color:#444; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; /* MẶC ĐỊNH 2 DÒNG */ transition:.3s ease; } 
/* ACTIVE */ 
.review-card.active .review-text{ -webkit-line-clamp:unset; overflow:visible; } 
/* ========================= READ MORE ========================= */ 
.review-toggle{ margin-top:12px; display:inline-flex; align-items:center; font-size:15px; color:#9d9d9d; cursor:pointer; transition:.3s; font-family: var(--e-global-typography-accent-font-family), Sans-serif;} 
.review-toggle:hover{ color:#222; } 
/* ========================= RESPONSIVE ========================= */ 
@media(max-width:991px){ 
  .view-pro{text-align:center}
  .box-pro-right{margin-top:30px}
  .box-pro-right h2{text-align:center}
  .review-card{ min-width:320px; max-width:320px; } 
  .review-text{ font-size:17px; } 
  .menu-funcition ul li{padding: 16px 20px !important;}
  #menu1{margin-top:0 !important}
} 
@media(max-width:768px){ 
  header img{height:55px; width:auto}
  .about-image{width:90%}
  .hero-slider{height:auto}
  .review-card{ min-width:280px; max-width:280px; padding:24px; } .review-text{ font-size:15px; line-height:1.7; } }
.review-top{height:60px; display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:30px; } .review-user{ display:flex; align-items:center; gap:40px; } 
.review-user img{ width:45px; height:45px; border-radius:50%; object-fit:cover; } 
.review-user h5{ font-size:16px; margin-bottom:0; font-weight:600; } 
.sum-review{font-family: var(--e-global-typography-accent-font-family), Sans-serif;}
.review-user span{ font-size:16px; color:#777; font-family: var(--e-global-typography-accent-font-family), Sans-serif;} 
.google-icon{ width:32px; } 
.review-stars-small{ color:#f4b400; font-size:34px; margin-bottom:20px; } 
.review-card p{ font-size:16px; line-height:1.8; color:#444; } 
/* ========================= BUTTON ========================= */ 
.review-btn{ position:absolute; top:45%; transform:translateY(-50%); width:40px; height:40px; border:none; border-radius:50%; background:#fff; z-index:5; box-shadow:0 10px 30px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s; } 
.review-btn:hover{ transform:translateY(-50%) scale(1.08); } 
.prev-btn{ left:-20px; } .next-btn{ right:-20px; } 
.review-btn svg{ width:28px; height:28px; } 
/* ========================= NOTE ========================= */ 
.review-note{ margin-top:20px; font-size:18px; text-transform:uppercase; } 
/* ========================= TESTIMONIAL SECTION ========================= */ 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); 
.testimonial-section{ padding:120px 0; } 
.testimonial-section .carousel-item{height:55vh} 
.testimonial-wrapper{ border:1px solid #d7d5ca; padding:0 40px; position:relative; } 
/* ========================= IMAGE ========================= */ 
.testimonial-images{ position:relative; min-height:400px; } 
.img-big{ width:58%; position:absolute; top:-70px; left:0; z-index:2; overflow:hidden; } 
.img-big img{width:272px; height:auto} .img-small img{width:272px; height:auto} 
.img-small{ width:52%; position:absolute; bottom:-70px; right:0; z-index:3; overflow:hidden; } 
.img-big img, .img-small img{ transition:1.2s ease; } 
.img-big:hover img, .img-small:hover img{ transform:scale(1.08); } 
/* ========================= SLIDER ========================= */ 
.testimonial-slider{ height:100%; } 
.testimonial-content{ padding-left:0; font-family: var(--e-global-typography-accent-font-family), Sans-serif;} 
.quote-svg{ margin:20px 0; } 
.testimonial-content p{ font-size:16px; line-height:2; color:#2f2f2f; font-weight:400; margin-bottom:45px; } 
.testimonial-content .line{ width:85px; height:1px; background:#cfcab9; margin-bottom:35px; } 
.testimonial-content h4{ color:#006b2f; font-size:18px; margin-bottom:12px; font-weight:700; text-transform:uppercase; } 
.testimonial-content span{ font-size:14px; color:#222; font-weight:600; } 
/* ========================= SLIDE ANIMATION ========================= */ 
.carousel-item{ transition:transform .9s ease-in-out; } 
.carousel-item .testimonial-content{ opacity:0; transform:translateY(40px); transition:1s; } 
.carousel-item.active .testimonial-content{ opacity:1; transform:translateY(0); } 
/* =============================== FOOTER =============================== */ 
footer{width:100%; background:#006837; color:#fff; padding:50px 0 50px; text-align:center; font-family: var(--e-global-typography-accent-font-family), Sans-serif; float:left} 
.footer-logo{width:100%; text-align:center; font-size:70px; letter-spacing:4px; margin-bottom:25px; display: flex; justify-content: center;} 
.footer-logo img{width:208px; height:auto}
.text-ft p{ max-width:70%; margin:auto; line-height:2; text-align:justify; color:#d7e7db; } 
.footer-menu{ margin-top:40px; } 
.footer-menu a{ color:#fff; margin:0 15px; font-size:14px; letter-spacing:1px; } 
.copyright{ margin-top:50px; opacity:.7; font-size:14px; } 
.text-pro{padding:0 20px; margin-bottom:20px}
#load_menu_ft li{list-style:none;}
#load_menu_ft li a{padding:0}
#load_menu_ft li a:hover{color:#eee}
.lienhe-ft{margin-top:40px; text-align:center}
.lienhe-ft h2{text-transform:uppercase; font-family: var(--e-global-typography-7881878-font-family), Sans-serif; margin-bottom:30px}
.lienhe-ft p{margin-bottom:5px}
.ft-bottom{padding:50px 0; margin-top:50px; border-top:1px solid #FFFFFF30; text-align:left}
#load_lienhe_ft .book-btn{font-size:17px; font-family: var(--e-global-typography-accent-font-family), Sans-serif;}
.box-ft-bottom h3{text-transform:uppercase; font-family: var(--e-global-typography-7881878-font-family), Sans-serif; margin-bottom:30px}
.box-ft-bottom p{color:#DBDBDB; margin-bottom:15px;}
.mxh-ft ul{padding-left:0}
.mxh-ft li{list-style:none; margin-right:15px; float:left}
.mxh-ft a{width:45px; height:45px; line-height:45px; text-align:center; background:#fff; border-radius:100%; color:var(--e-global-color-primary); float:left}
/* ========================= HERO ========================= */ 
.page-hero{ height:420px; background:#7d847d; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; margin-top:0; } 
.page-hero::before{ content:""; position:absolute; width:800px; height:800px; background:rgba(255,255,255,.08); border-radius:50%; top:-350px; right:-100px; } 
.page-hero::after{ content:""; position:absolute; width:500px; height:500px; background:rgba(255,255,255,.08); border-radius:50%; bottom:-260px; left:-120px; } 
.hero-dot{ position:absolute; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.1); top:90px; left:25%; } 
.page-hero .hero-content{ position:relative; z-index:5; padding-bottom:120px} 
.hero-title{ color:#fff; font-size:58px; text-transform:uppercase; margin-bottom:15px; animation:fadeUp 1s ease; } 
.breadcrumb-text{ color:#fff; font-size:13px; text-transform:uppercase; opacity:.9; animation:fadeUp 1.2s ease; font-family: var(--e-global-typography-accent-font-family), Sans-serif;}
.page-hero img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);}
/* ========================= GLOBAL ========================= */ 
.section-space{ padding:80px 0; } 
.section-space .section-tag{ color: var(--e-global-color-accent); text-transform:uppercase; letter-spacing:4px; font-size:16px; margin-bottom:18px; display:block; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-weight:600} 
.section-title{ color:#006b2f; font-size:45px; line-height:1.2; text-transform:uppercase; margin-bottom:30px; } 
.section-desc{ line-height:2; color:#333; font-size:16px; font-family: var(--e-global-typography-accent-font-family), Sans-serif;} 

/* ========================= ADDRESS ========================= */ 
.address-box{ text-align:center; max-width:700px; margin:auto; } 
.address-title{ color:#006b2f; font-size:45px; margin-bottom:50px; text-transform:uppercase; } 
.city-name{ color: var(--e-global-color-accent); letter-spacing:5px; margin-bottom:35px; display:block; text-transform:uppercase; font-size:16px; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-weight:600} 
.branch-item{ margin-bottom:35px; font-family: var(--e-global-typography-accent-font-family), Sans-serif;} 
.branch-item h4{ font-size:18px; color:#111; margin-bottom:12px; font-weight:600 } 
.branch-item p{ line-height:2; font-size:16px; color:#444; } 
/* ========================= STORY SECTION ========================= */ 
.story-image{ position:relative; } 
.story-image-main{ overflow:hidden; } 
.story-image-main img{ transition:1s; } 
.story-image:hover .story-image-main img{ transform:scale(1.08); } 
.story-image-sub{ position:absolute; width:290px; right:-40px; bottom:40px; border:none; overflow:hidden; } 
/* ========================= HISTORY SECTION ========================= */ 
.history-section{ padding:120px 0 140px; position:relative; overflow:hidden; } 
/* ========================= TITLE ========================= */ 
.history-title{ margin-bottom:90px; } 
.history-title h2{ font-family:"Phudu",sans-serif; font-size:45px; font-weight:700; line-height:1; color:#006b2f; text-transform:uppercase; margin:0; } 
/* ========================= TIMELINE ========================= */ 
.history-timeline{ position:relative; max-width:1400px; margin:auto; } 
/* CENTER LINE */ 
.timeline-line{ position:absolute; top:0; left:50%; width:1px; height:100%; background:#007135; transform:translateX(-50%); } 
/* ========================= ITEM ========================= */ 
.timeline-item{ position:relative; width:50%; margin-bottom:40px; } 
.timeline-item:last-child{ margin-bottom:0; } 
/* LEFT */ 
.timeline-item.left{ padding-right:70px; } 
/* RIGHT */ 
.timeline-item.right{ margin-left:auto; padding-left:70px; } 
/* ========================= DOT ========================= */ 
.timeline-dot{ position:absolute; top:45px; width:34px; height:34px; background:#006b2f; border-radius:50%; z-index:3; } 
/* LEFT DOT */ 
.timeline-item.left .timeline-dot{ right:-18px; } 
/* RIGHT DOT */ 
.timeline-item.right .timeline-dot{ left:-18px; } /* ========================= CARD ========================= */ 
.timeline-card{ position:relative; background:#f8f8f8; border:1px solid #007135; border-radius:8px; padding:15px 15px 15px 30px; min-height:150px; display:flex; align-items:center; transition:.45s ease; } 
.timeline-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.08); } 
/* ========================= BEFORE / AFTER ========================= */ 
/* RIGHT */ 
.timeline-item.right .timeline-card::before{ content:""; position:absolute; top:42px; left:-20px; width:38px; height:38px; background:#f8f8f8; border-left:1px solid #007135; border-bottom:1px solid #007135; transform:rotate(45deg); } /* LEFT */ 
.timeline-item.left .timeline-card::before{ content:""; position:absolute; top:42px; right:-20px; width:38px; height:38px; background:#f8f8f8; border-right:1px solid #007135; border-top:1px solid #007135; transform:rotate(45deg); } 
/* ========================= IMAGE CARD ========================= */ .image-card{ gap:34px; } .timeline-thumb{ width:170px; height:170px; border-radius:22px; overflow:hidden; flex-shrink:0; } .timeline-thumb img{ width:100%; height:100%; object-fit:cover; transition:1s ease; } .timeline-card:hover .timeline-thumb img{ transform:scale(1.08); } 
/* ========================= CONTENT ========================= */ 
.timeline-content h3{ font-family:"Phudu",sans-serif; font-size:21px; line-height:1.3; color:#006b2f; margin-bottom:18px; text-transform:uppercase; } .timeline-content p{ font-family:"Montserrat",sans-serif; font-size:16px; line-height:1.8; color:#444; margin:0; } 
/* ========================= MENU TABS ========================= */ 
.menu-section{ padding:80px 0 50px; } 
.menu-tabs{ border:none; margin-bottom:25px; } 
.menu-tabs .nav-link{ border:none; background:#f1f2f3; color:#006b2f !important; border-radius:100px; padding:16px 30px; font-size:21px; text-transform:uppercase; transition:.4s; width:100%; margin:0; font-family:"Phudu",sans-serif; } 
.menu-tabs .nav-link.active{ background:#92298F; color:#fff !important; } 
.menu-tabs .nav-link::after{ display:none; } 
/* ========================= MENU GRID ========================= */ 
.tab-pane{background:#fff; padding:15px; }
.menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } 
.menu-card{ position:relative; overflow:hidden; background:#fff; transition:.5s; cursor:pointer; } 
.menu-card:hover{ transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.1); } 
.tab-content .menu-card img{ width:100%; height:auto; transition:1s; } 
.menu-card:hover img{ transform:scale(1.05); } 
.menu-overlay{ position:absolute; inset:0; background:linear-gradient( to top, rgba(0,0,0,.75), transparent ); opacity:0; transition:.5s; display:flex; align-items:flex-end; padding:25px; } 
.menu-card:hover .menu-overlay{ opacity:1; } 
.menu-overlay h4{ color:#fff; font-size:26px; text-transform:uppercase; margin-bottom:10px; } 
.menu-overlay p{ color:#eee; font-size:14px; line-height:1.8; }
.tomtat{margin-bottom:30px; text-align:justify; font-family:"Montserrat",sans-serif;}
.noidung{text-align:justify; font-family:"Montserrat",sans-serif;}
.tomtat h2, .noidung h2{color: var(--e-global-color-accent); font-family:"Phudu",sans-serif; font-size:21px; margin-bottom:10px; margin-top:20px}
.tomtat h3, .noidung h3{font-family:"Phudu",sans-serif; font-size:17px; margin-bottom:10px; margin-top:20px; color:rgb(0, 104, 55);}
.tomtat-trienlam{margin-top:50px}
.content-trienlam{padding-bottom:50px}
.chayanh{position:relative}
.chayanh, .carousel{width:100%}
.xzoom-thumbs img{width:80px; height:auto}
.xzoom{border-radius:10px}
.box-pro-right h1{font-size:25px; font-weight:bold; margin-bottom:15px}
.td-sub{margin-bottom:30px}
.gia-sp{width:100%; margin-bottom:30px; float:left}
.gia-ban { color: #ad020d; font-size: 22px; font-weight: 500; /* margin-right: 15px; */ float: left; height: 30px; line-height: 30px; position:relative; text-decoration: none;}
.gia-ban span, .gia-tt span{position:absolute; top:-0.7em; right:-0.5em; font-size:11px}
.gia-tt { font-size: 18px; /* margin-top: 6px; */ text-decoration: line-through; width: auto; float: left; margin-right: 30px; height: 30px; line-height: 30px; position:relative}
.tomtat-sp ul li{margin-bottom:8px;}
.menu-funcition{width:100%; padding:10px 0; float:left; margin-top:50px}
.menu-funcition  ul li{list-style:none; border: none; background: none; color: #92298F !important;  padding: 16px 80px; font-size: 21px; text-transform: uppercase; transition: .4s; margin: 0; font-family: "Phudu", sans-serif; margin-right:30px; border-bottom:1px solid #92298F}
.menu-funcition  ul li a{color: #92298F ;}
.menu-funcition  ul li:hover a{color:#92298F; text-decoration:none}
.menu-funcition  ul{width:100%; margin-bottom:0; display:flex;}
.thongso table{width:100%; border:1px solid #ccc}
.thongso table td{border:1px solid #ccc; padding:5px}
.thongso h2{width:100%; font-weight:bold; font-size:22px; margin-bottom:10px}
.tongquansanpham #menu1 .row{display:flex; align-items: center; justify-content: center;}
.tongquansanpham img{border-radius:10px}
#menu4, #menu5, #menu6, #menu1{margin-top:50px; width:100%; float:left}
#menu4 h2, #menu5 h2, #menu6 h2{font-size:30px; font-weight:bold; margin-bottom:50px; text-align:center}
.td-danhmuc{margin-bottom:30px; color:var(--e-global-color-accent); text-align:center}
.danhgiasp{margin-bottom:50px}
/* ======================= */ /* LIGHTBOX */ /* ======================= */ 

/* ======================= */ /* MENU IMAGE */ /* ======================= */ 
.menu-gallery img, .menu-image, .menu-item img{ cursor: zoom-in; } 
/* MOBILE */ 
@media(max-width:768px){ 
  .lb-nav{ width: 42px; height: 42px; font-size: 20px; } 
  .lb-close{ width: 42px; height: 42px; font-size: 28px; } 
}


/* ========================= RESPONSIVE ========================= */ 
@media(max-width:1199px){ 
  .history-title h2{ font-size:70px; } .timeline-content h3{ font-size:28px; } .timeline-content p{ font-size:15px; } } @media(max-width:991px){ .history-section{ padding:90px 0; } .history-title{ margin-bottom:70px; } 
    .history-title h2{ font-size:52px; } 
    .timeline-line{ left:24px; } 
    .timeline-item{ width:100%; padding-left:80px !important; padding-right:0 !important; margin-bottom:60px; } 
    .timeline-item.left, .timeline-item.right{ margin-left:0; } 
    .timeline-dot{ left:3px !important; right:auto !important; width:34px; height:34px; } 
    .timeline-item.left .timeline-card::before, .timeline-item.right .timeline-card::before{ left:-16px; right:auto; width:30px; height:30px; border-left:1px solid #007135; border-bottom:1px solid #007135; border-top:none; border-right:none; } 
    .image-card{ flex-direction:column; align-items:flex-start; } } 
@media(max-width:767px){ 
  .history-title h2{ font-size:36px; } .timeline-card{ padding:28px; } .timeline-thumb{ width:100%; height:142px; } .timeline-content h3{ font-size:19px; font-weight:500} .timeline-content p{ font-size:15px; line-height:1.7; } }
/* ========================= RESPONSIVE ========================= */ 
@media(max-width:991px){ 
  #load_menu_ft{width:100%; float:left}
  #load_menu_ft ul{width:100%; padding:0; display:inherit; text-align: center;}
  #load_menu_ft li{padding:0; margin-bottom:20px; display: inline-block;}
  #load_menu_ft li a{padding: 8px 12px; margin:0; border-radius: 15px; background: #f1f2f3; color: #006b2f !important;}
  #load_menu_ft li a.active{background: #92298F; color: #fff !important;}
  #load_menu_ft li a:nth-child(1), #load_menu_ft li a:nth-child(3){margin-left:0; margin-right:10px}
  .menu-tabs .nav-link{padding:16px 20px; font-size:16px}
  .hero-title{ font-size:32px; } 
  .section-title, .address-title, .timeline-title{ font-size:40px; } 
  .story-image-sub { position: absolute; width: 180px; right: -20px; bottom: 20px; margin-top: 20px; }
  .timeline::before{ left:20px; } 
  .timeline-item{ width:100%; left:0 !important; padding-left:70px; padding-right:0; text-align:left; } 
  .timeline-item::before{ left:12px !important; right:auto !important; } .footer-bottom{ text-align:center; } 
} 
@media(max-width:768px){ 
  .page-hero{ height:320px; } 
  .hero-title{ font-size:32px; } 
  .section-title, .address-title, .timeline-title{ font-size:32px; } 
  .lightbox-nav{ width: 45px; height: 45px; font-size: 22px; } 
  .lightbox-prev{ left: 10px; } 
  .lightbox-next{ right: 10px; } 
  .lightbox-close{ width: 42px; height: 42px; font-size: 28px; top: 10px; right: 10px; } 
}
@media(max-width:1199px){ 
  .testimonial-content{ padding-left:30px; } 
  .testimonial-content p{ font-size:16px; } 
} 
@media(max-width:991px){ 
  .navbar{padding:0}
  .book-btn{padding:10px 24px; font-size:15px}
  .text-ft p{max-width:100%}
  .testimonial-content .line{margin-bottom:20px}
  .img-big img{width:70%;}
  .testimonial-wrapper{ padding:40px 25px; } 
  .testimonial-images{ min-height:auto; margin-bottom:60px; } 
  .img-big{ position:relative; width:100%; top:auto; left:auto; right:auto; bottom:auto; } 
  .img-small{ margin-top:25px; position:absolute; right:0} 
  .testimonial-content{ padding-left:0; } 
} 
@media(max-width:768px){ 
  .testimonial-section{ padding:30px 0; } 
  .testimonial-content p{ font-size:16px; line-height:1.9; } 
  .testimonial-content h4{ font-size:18px; } 
  .testimonial-content span{ font-size:16px; } 
  .quote-svg svg{ width:40px; height:40px; } 
}
/* ========================= RESPONSIVE ========================= */ 
@media(max-width:991px){ 
  .google-review-info{ margin-bottom:20px; } 
  .review-card{ min-width:320px; max-width:320px; } 
  .review-card p{ font-size:17px; } 
} 
@media(max-width:768px){ 
  .review-card{ min-width:280px; max-width:280px; padding:20px; } 
  .review-user img{ width:60px; height:60px; } 
  .review-user h5{ font-size:18px; } 
  .review-card p{ font-size:15px; } 
  .review-btn{ display:none; } }

/* =============================== MOBILE =============================== */ 
@media(max-width:991px){ 
  .product{padding:50px 0}
  .nav-link{font-size:18px;}
  .about-content p{text-align:center}
  .hero-title{ font-size:42px; } 
  .section-title{ font-size:52px; } 
  .parallax-title{ font-size:60px; } 
  .about-image-sub{ position: absolute; width: 180px; bottom: 40px; right: -20px; margin-top: 20px; }
  .about-content{padding-left:0; padding:0 10px}
  .menu-card img{ height:380px; } 
  .stat-item{ padding:50px 20px; } 
  .stat-item::after{ display:none; } 
  .stat-number{ font-size:58px; } 
  .stat-text{ font-size:18px; } 
  .hero-content{padding:0; padding-bottom:120px}
} 
@media(max-width:768px){ 
  .tomtat h2, .noidung h2{font-size:18px;}
  .mxh-ft ul{text-align:center; display:inherit}
  .mxh-ft li{float:none; display:inline-block}
  .td-news{font-size:25px !important; line-height:140%}
  .ds-news .menu-overlay{padding:10px}
  .menu-title{font-size:18px}
  .features{padding:50px 0}
  .review-user span{font-size:14px}
  .menu-tabs li{margin-bottom:10px}
  #navbarNavDropdown li{margin-bottom:10px}
  .story-image{width:90%}
  .section-space .section-tag{text-align:center}
  .google-review-info p{margin-bottom:10px}
  .ti-footer-filter-text{font-size:13px}
  .menu-overlay{opacity:1}
  .book-about{width:70%; text-align:center; margin-left:15%}
  .hero-title{ font-size:32px; } 
  .hero-desc{ font-size:15px; line-height:1.8; } 
  .section-title, .title-pro h2{ font-size:24px; text-align:center; line-height:160%} 
  .parallax-title{ font-size:25px; } 
  .footer-logo{ font-size:50px; } 
  .review-section{ padding:30px 0; } 
  .google-review-info h3{ font-size:42px; } 
  .google-stars{ font-size:38px; } 
  .testimonial-box{ padding:25px; } 
  .testimonial-content p{ font-size:16px; } 
  .quote-icon{ font-size:80px; } 
}

@media(max-width:576px){ 
  .stats-section{ padding:50px 0; } 
  .stat-number{ font-size:48px; } 
  .stat-text{ font-size:16px; } 
}