@charset "UTF-8";

/* Khai báo phông chữ AaronScript */
@font-face {
  font-family: 'SVN-AaronScript';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-AaronScript.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-AaronScript.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Khai báo phông chữ Aleo */
@font-face {
  font-family: 'SVN-AleoBold';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-AleoBold.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-AleoBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'CooperBlack';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/CooperBlack.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/CooperBlack.woff') format('woff');
  font-weight: black;
  font-style: normal;
}

/* Khai báo các biến thể của phông chữ Georgia */
@font-face {
  font-family: 'SVN-Georgia';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-Georgia.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-Georgia.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SVN-GeorgiaBold';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-GeorgiaBold.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-GeorgiaBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'SVN-GeorgiaItalic';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-GeorgiaItalic.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-GeorgiaItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'SVN-GeorgiaBoldItalic';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-GeorgiaBoldItalic.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/SVN-GeorgiaBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}
/* Khai báo các biến thể của phông chữ UTM */
@font-face {
  font-family: 'UTM-Avobold';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/UTMAvoBold.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/UTMAvoBold.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'UTM-PacificStandard';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/UTMPacificStandard.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/UTMPacificStandard.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'UTM-Androgyne';
  src: url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/UTM-Androgyne.woff2') format('woff2'),
       url('https://old.bsop.com.vn/wp-content/themes/bsop05/emagazine/3/assets/fonts/UTM-Androgyne.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/*
Template Name: Tourm
Template URL: https://themeholy.com/html/Tourm/
Description: Travel & Tour Booking Agency HTML Template 
Author: themeholy
Author URI: https://themeforest.net/user/themeholy
Version: 1.0.0 
*/
/*=================================
    CSS Index Here
==================================*/
/*

01. Theme Base
    1.1. Mixin
    1.2. Function
    1.3. Variable
    1.4. Typography
    1.5. Extend
    1.7. Wordpress Default
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slider
    2.5. Mobile Menu
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
    
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Pagination
    4.6. Blog
    4.7. Comments
    4.8. Hero Area
    4.9. Error    
    4.00. Popup Search
    4.00. Popup Side Menu
    4.00. Wocommerce
    4.00. Products
    4.00. Cart
    4.00. Checkout
    4.00. Wishlist
    4.00. Contact
    4.00. About
    4.00. Team
    4.00. Testimonial
    4.00. Counter
    4.00. Blog
    4.00. Brand
    4.00. Simple Sections
    4.00. Why
    4.00. Faq
    4.00. Service
    4.00. Process
    4.00. Feature
    4.00. Gallery
    4.00. Category
    4.00. CTA
    4.00. Deal
    4.00. Tab Menu
    4.00. Particle 

05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Mixin -------------------*/
@use "sass:math";
/*------------------- 1.2. Function -------------------*/
/*------------------- 1.3. Variable-------------------*/
:root {
  --theme-color: #1CA8CB;
  --title-color: #191414;
  --body-color: #000000;
  --smoke-color: #EFF2F1;
  --smoke-color2: #F3F4F6;
  --black-color: #000000;
  --black-color2: #191414;
  --gray-color: #E1E4E5;
  --white-color: #ffffff;
  --light-color: #E1E4E5;
  --yellow-color: #FFB539;
  --success-color: #28a745;
  --error-color: #dc3545;
  --th-border-color: #E9EDF5;
  --title-font: "SVN-Georgia";
  --body-font: "SVN-Georgia";
  --style-font: "SVN-Georgia";
  --icon-font: "Font Awesome 6 Pro";
  --main-container: 1320px;
  --container-gutters: 24px;
  --section-space: 40px;
  --section-space-mobile: 20px;
  --section-title-space: 30px;
  --ripple-ani-duration: 2s;
}

/*------------------- 1.5. Typography -------------------*/
html,
body {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--body-color);
  line-height: 26px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

iframe {
  border: none;
  width: 100%;
}

img:not([draggable]),
embed,
object,
video {
  max-width: 100%;
  height: auto;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--th-border-color);
}

th {
  font-weight: 700;
  color: var(--title-color);
}

td,
th {
  border: 1px solid var(--th-border-color);
  padding: 9px 12px;
}

a {
  color: var(--theme-color);
  text-decoration: none;
  outline: 0;
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
}

a:hover {
  color: var(--title-color);
}


a:active,
a.nice-select.open,
.currency-menu a.nice-select.open, a:focus, a:hover, a:visited {
  text-decoration: none;
  outline: 0;
}

button {
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
}

img {
  border: none;
  max-width: 100%;
}

ins {
  text-decoration: none;
}

pre {
  font-family: var(--body-font);
  background: #f5f5f5;
  color: #666;
  font-size: 14px;
  margin: 20px 0;
  overflow: auto;
  padding: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

span.ajax-loader:empty,
p:empty {
  display: none;
}

p {
  font-family: 'SVN-Georgia';
  margin: 0 0 18px 0;
  color: var(--body-color);
  line-height: 1.75;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
p a,
span a {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5,
.h6,
h6 {
  font-family: var(--title-font);
  color: var(--title-color);
  text-transform: none;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 15px 0;
}

.h1,
h1 {
  font-size: 80px;
  line-height: 1.18;
}

.h2,
h2 {
  font-size: 48px;
  line-height: 1.327;
}

.h3,
h3 {
  font-size: 32px;
  line-height: 1.278;
}

.h4,
h4 {
  font-size: 30px;
  line-height: 1.333;
}

.h5,
h5 {
  font-size: 24px;
  line-height: 1.417;
}

.h6,
h6 {
  font-size: 20px;
  line-height: 1.5;
}

.container-gallery {
  max-width: 1840px;
}

/*------------------- 2.2. Grid -------------------*/
.slick-track > [class*=col] {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x)/ 2);
  padding-left: calc(var(--bs-gutter-x)/ 2);
  margin-top: var(--bs-gutter-y);
}

.image-container {
  position: relative;
  top:0;
  bottom:0;
  width: 80%;
  margin-top: -150px;
  z-index: 9;
}
.image-container img {
  width: 100%;
  border: 15px solid #fff;
}

/*------------------- 2.4. nice-select -------------------*/
:root {
  --input-height: 56px;
}

.sec-text {
  font-size: 18px;
  line-height: 26px;
  text-align: justify;
}
.titlenum2 {
  text-align: justify;
  border: 2px solid #fff;
  padding: 40px 50px 700px;
  font-size: 15px;
  line-height: 25px;
}
.titlenum3 {
  font-family: 'SVN-GeorgiaBoldItalic';
  max-width: 530px;
  font-size: 18px;
  float: right;
  padding-top: 35px;
  position: relative; /* Thêm thuộc tính này */
}

.titlenum4 {
  font-family: 'SVN-GeorgiaBoldItalic';
  max-width: 500px;
  font-size: 18px;
  float: left;
  margin-top: -55px;
  margin-left: 60px;
  position: relative; /* Thêm thuộc tính này */
}
.titlenum4::before {
  content: '“';
  font-size: 40px;
  position: absolute;
  font-family: 'CooperBlack';
  opacity: 0.6;
  left: -30px; /* Điều chỉnh vị trí theo nhu cầu */
  top: -10px;  /* Điều chỉnh vị trí theo nhu cầu */
}
.titlenum5 {
  font-family: 'SVN-GeorgiaBoldItalic';
  max-width: 800px;
  font-size: 18px;
  float: left;
  margin-top: -55px;
  margin-left: 170px;
  text-align: justify;
  position: relative; /* Thêm thuộc tính này */
}
.titlenum5::before {
  content: '“';
  font-size: 50px;
  position: absolute;
  font-family: 'CooperBlack';
  opacity: 0.6;
  left: -30px;
  top: -10px;
}
.color_white {
  color: #FFF;
}
.titlenum3::before {
  content: '“';
  font-size: 50px;
  position: absolute;
  font-family: 'CooperBlack';
  opacity: 0.6;
  left: -30px;
}
.quote1 {
  padding: 50px 0 0;
}

.sec-text2 {
  font-size: 18px;
  line-height: 33px;
}
.sec-text2:before {
  content: '“';
  font-size: 50px;
  position: absolute;
  left: 40px;
  font-family: 'CooperBlack';
  opacity: 0.7;
}
.sec-text2:after {
  content: '”';
  font-size: 50px;
  position: absolute;
  font-family: 'CooperBlack';
  margin-top: 15px;
  opacity: 0.7;
}
.sec-text.style2 {
  max-width: 776px;
  /* Medium devices */
}

.like-count {
  font-size: 16px;
  color: #333;
}


.title-area {
  margin-bottom: calc(var(--section-title-space) - 11px);
  position: relative;
  z-index: 2;
}

.title-area .sec-title {
  margin-bottom: 15px;
  font-family: 'SVN-AleoBold';
  letter-spacing: 3px;
  font-size: 35px;
}


.sec-btn {
  text-align: center;
}
.backgroundso1 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom top !important;
}
.sec-btn,
.title-line {
  margin-bottom: var(--section-title-space);
}
.backgroundso10 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img.bg10 {
  width: 100%;
  min-height: 800px;
  object-fit: cover; 
}
.borderleft {
  border-top: 2px solid black;
  border-right: 2px solid black;
  height: 220px;
  margin-top: 24px;
  margin-left: -20px;
  min-width: 700px;
}
.height700{
  min-height:700px;
}
.min-width{
  min-width: 960px;
}
.backgroundso3 {
  margin-top: -400px;
}
.border3 {
  border: 15px solid #fff;
}
.height320 {
  height: 320px !important;
}

/* cursor area start ---------------------------*/
.magic-cursor.relative {
  z-index: 999999;
}

.cursor {
  position: absolute;
  background: transparent;
  cursor: pointer;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 100%;
  z-index: 9999999;
  -webkit-transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}

.cursor:before {
  content: "DRAG" " " "";
  font-family: var(--icon-font);
  width: 100%;
  height: 100%;
  line-height: 100%;
  position: absolute;
  font-size: 2px;
  top: 6.5px;
  left: 5px;
  display: block;
  border-radius: 100%;
  opacity: 0;
  color: var(--white-color);
  letter-spacing: 0.02em;
}

.cursor:after {
  position: absolute;
  content: "\f104";
  font-family: var(--icon-font);
  font-size: 2px;
  color: var(--white-color);
  top: 6.5px;
  left: 3px;
  width: 100%;
  height: 100%;
  line-height: 100%;
  opacity: 0;
}

.cursor.active {
  opacity: 1;
  -webkit-transform: scale(8);
      -ms-transform: scale(8);
          transform: scale(8);
  background: rgba(17, 61, 72, 0.7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  -webkit-transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
}

.cursor.active:before, .cursor.active:after {
  opacity: 1;
}

.cursor-follower {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  z-index: 99999999;
  background-color: var(--theme-color);
  -webkit-transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) background, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) background, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) background;
  transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) background, 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  -webkit-transform: translate(8px, 8px);
      -ms-transform: translate(8px, 8px);
          transform: translate(8px, 8px);
}

.cursor-follower.active {
  opacity: 1;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}


/*------------------- 3.7. Background -------------------*/
.bg-theme {
  background-color: var(--theme-color) !important;
}

.bg-smoke {
  background-color: var(--smoke-color) !important;
}

.bg-smoke2 {
  background-color: var(--smoke-color2) !important;
}

.bg-white {
  background-color: var(--white-color) !important;
}

.bg-black {
  background-color: var(--black-color) !important;
}

.bg-black2 {
  background-color: var(--black-color2) !important;
}

.bg-title {
  background-color: var(--title-color) !important;
}


.background-image,
[data-bg-src] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-fluid {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.bg-auto {
  background-size: auto auto;
}

.bg-top-center {
  background-size: auto;
  background-position: top center;
}

/*------------------- 3.10. Animation -------------------*/

.fadein,
.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-name: var(--animation-name);
          animation-name: var(--animation-name);
}

/*------------------- 4.2. Header  -------------------*/
.th-header {
  position: relative;
  z-index: 41;
}

.th-header .icon-btn {
  border-radius: 99px;
}

.th-header .menu-area {
  position: relative;
  z-index: 2;
}


/* Header 2 end ---------------------------------- */
/* ------------------------------Header 3  Start ---------------------------------- */
.header-layout3 .menu-area {
  position: relative;
  background: #fff;
  padding:5px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  /* Large devices */
}

.bsop-dark {
  display:block;
  max-width: 80% !important;
}

.bsop-white {
  display:none;
  max-width: 80% !important;
}

.dark-logo {
  display: block;
}
.white-logo {
  display: none;
}
.header-layout3 .sticky-wrapper.sticky .menu-area {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
          background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}


.header-layout3 .main-menu > ul > li > a:before {
  content: '';
  position: absolute;
  height: 1px;
  left: 0;
  background: var(--white-color);
  width: 0%;
  margin-top: 30px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.header-layout3 .main-menu > ul > li > a:hover {
  color: var(--white-color);
}

.header-layout3 .main-menu > ul > li > a:hover:before {
  width: 100%;
}

.header-layout3 .main-menu ul li.menu-item-has-children > a:hover:after {
  color: var(--black-color2);
}

.header-layout3 .header-logo {
  display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
}
.header-logo a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-logo img {
  max-height: 50px;
}
.headlogo {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  float: left;
  padding-left: 60px;
}
.backtobsop::before {
  left: 0;
  background: url('https://kenh14cdn.com/web_images/icon-arrow.png') center center #39439C no-repeat;
  width: 50px;
  height: 53px;
  top: -5px;
  display: block;
  position: absolute;
  content: '';
}

.header-layout3 .header-right-button {
  position: absolute;
  top: 35px;
  right: 72px;
  /* Large devices */
}

.header-layout3 .main-menu > ul > li {
  margin: 0px 26px;
  /* Medium Large devices */
}


.header-layout3 .main-menu > ul > li > a {
  color: var(--white-color);
  padding: 38.5px 0px;
}

.header-layout3 .main-menu > ul > li > a:after {
  color: var(--white-color) !important;
}

/* --------------------------------
heding animation start 
------------------------------------ */
.title-area {
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

/* --------------------------------
heding animation  end
------------------------------------ */
/*------------------- 4.3. Footer  -------------------*/
.footer-wrapper {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.widget-area {
  padding-top: 100px;
  padding-bottom: 500px;
}
.imgfooter {
  margin-top: -30px;
  max-height: 150px;
  margin-bottom: 100px;
}

.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.th-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.th-hero-bg img {
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
}


/* hero 3  start ------------------------ */
.hero-3 {
  position: relative;
  z-index: 3;
  overflow: initial;
}

.hero-3 .th-hero-bg {
  width: 100%;
  height: 100%;
}

.hero-3 .th-hero-bg:before {
  content: "";
  position: absolute;
  inset: 0;
}


.hero-slider-3 {
  position: relative;
}

.hero-style3 {
  position: relative;
  padding: 140px 0 600px 0;
  display: block;
  z-index: 4;
  /* Large devices */
  /* Medium devices */
  /* Extra small devices */
}

.hero-style3 .hero-title {
  font-family:'SVN-AleoBold';
  font-size: 60px;
  line-height: 96px;
  text-transform: capitalize;
  color: var(--white-color);
  margin-top: -1.2rem;
  margin-bottom: 7px;
  /* Medium Large devices */
  /* Large devices */
  /* Small devices */
  /* Extra small devices */
  /* Extra small devices */
}
.hero-style3 .hero-title2 {
  font-family:'SVN-AaronScript';
  font-size: 40px;
  line-height: 96px;
  color: var(--white-color);
  margin-top: -1.2rem;
  margin-bottom: 7px;
} 

.hero-style3 .hero-text {
  color: var(--black-color2);
  font-size: 18px;
  margin-bottom: 40px;
  font-family: 'SVN-Georgia';
  /* Medium devices */
}

.hero3Thumbs {
  position: relative;
  right: 0;
  bottom: 110px;
  max-width: 424px;
  height: 186px;
  /* Medium Large devices */
  /* Large devices */
  /* Medium devices */
}

.hero3-card {
  cursor: pointer;
}

.hero3-card_wrapp {
  position: absolute;
  bottom: 0;
  background-color: var(--theme-color);
  border-radius: 24px 24px 0 0;
  max-width: 424px;
  min-height: 296px;
  z-index: 9;
}

.hero3-card .hero-img {
  position: relative;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  z-index: 2;
}

.hero3-card .hero-img:before {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-linear-gradient(bottom, rgba(13, 13, 12, 0.2), rgba(13, 13, 12, 0.2));
  background: linear-gradient(0deg, rgba(13, 13, 12, 0.2), rgba(13, 13, 12, 0.2));
  border-radius: 16px 16px 0px 0px;
  z-index: 1;
}

.hero3-card .hero-img .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.hero3-card .hero-img .play-btn > i {
  background: transparent;
  --icon-size: 40px;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  font-size: 16px;
}

.hero3-swiper-custom {
  position: relative;
  right: 0;
  bottom: -186px;
  min-width: 424px;
  height: 110px;
  background-color: var(--theme-color);
  z-index: 99;
  /* Medium Large devices */
  /* Medium devices */
}

.hero3-swiper-custom .swiper-button-next,
.hero3-swiper-custom .swiper-button-prev {
  /* Large devices */
}

.hero3-swiper-custom .swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 32px);
}

.hero3-swiper-custom .swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 32px);
}

.hero3-swiper-custom .swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 40px);
  z-index: 8;
}

.hero3-swiper-custom .swiper-button-next,
.hero3-swiper-custom .swiper-button-prev {
  padding: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid #FFFFFF;
  background-color: transparent;
  border-radius: 48px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hero3-swiper-custom .swiper-button-next:after,
.hero3-swiper-custom .swiper-button-prev:after {
  display: none !important;
}

.hero3-swiper-custom .swiper-button-next img,
.hero3-swiper-custom .swiper-button-prev img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hero3-swiper-custom .swiper-button-next:hover,
.hero3-swiper-custom .swiper-button-prev:hover {
  background-color: var(--white-color);
}

.hero3-swiper-custom .swiper-button-next:hover img,
.hero3-swiper-custom .swiper-button-prev:hover img {
  -webkit-filter: none;
          filter: none;
}

.hero3-swiper-custom .swiper-pagination {
  color: var(--white-color);
}

.hero3-wrapper {
  position: relative;
  margin-top: -294px;
  /* Medium devices */
}

.img-box1 .img3 img {
  border-radius: 156px 0px 156px 156px;
}



/*------------------- 4.00. Booking -------------------*/
/* booking area  start --------------------*/
.booking-form {
  position: relative;
  background-color:#CFE1EE;
  border: 2px solid var(--theme-color);
  box-shadow: 0px 20px 20px rgba(204, 204, 204, 0.25);
  border-radius: 16px;
  padding: 25px 32px;
  z-index: 3;
  margin-top: -55px;
  /* Large devices */
}


.bannerso2 {
  margin-top: -350px;
}
.booking-form.style2 {
  position: relative;
  left: 0;
  bottom: 0;
  margin-top: 0;
  padding: 40px 80px 40px 80px;
  border-radius: 20px;
  box-shadow: none;
  border: none;
  text-align: justify;
  max-width: 60%;
  /* Medium Large devices */
  /* Large devices */
  /* Medium devices */
  z-index:10;
}


.booking-form.style2 .input-wrap .form-group {
  margin-bottom: 0;
  height: 41px;
  /* Large devices */
}



.booking-form.style2 .input-wrap .form-group .search-input {
  /* Large devices */
}



.booking-form.style2 .input-wrap .form-group:not(:first-child) {
  border-left: 1px solid #E1E4E5;
  padding-left: 25px;
  /* Large devices */
}


.booking-form.style2 .input-wrap .form-group .nice-select:after {
  /* Large devices */
}



.booking-form.style2 .input-wrap .form-btn .th-btn {
  /* Medium Large devices */
  /* Large devices */
}



.form_wrapp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.input-wrap .form-group {
  margin-bottom: 0;
  height: 41px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  /* Medium devices */
  /* Small devices */
  /* Medium devices */
}

/*=================================
    05. Spacing
==================================*/
/*-- Padding Left And Right --*/
.px-5 {
  padding-right: 5px;
  padding-left: 5px;
}

.px-10 {
  padding-right: 10px;
  padding-left: 10px;
}

.px-15 {
  padding-right: 15px;
  padding-left: 15px;
}

.px-20 {
  padding-right: 20px;
  padding-left: 20px;
}

.px-25 {
  padding-right: 25px;
  padding-left: 25px;
}

.px-30 {
  padding-right: 30px;
  padding-left: 30px;
}

.px-35 {
  padding-right: 35px;
  padding-left: 35px;
}

.px-40 {
  padding-right: 40px;
  padding-left: 40px;
}

.px-45 {
  padding-right: 45px;
  padding-left: 45px;
}

.px-50 {
  padding-right: 50px;
  padding-left: 50px;
}

/*-- Padding Top And Bottom --*/
.py-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py-25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.py-35 {
  padding-top: 35px;
  padding-bottom: 35px;
}

.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-45 {
  padding-top: 45px;
  padding-bottom: 45px;
}

.py-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

/*-- Padding Top --*/
.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

/*-- Padding Bottom --*/
.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

/*-- Padding Left --*/
.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-35 {
  padding-left: 35px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-45 {
  padding-left: 45px;
}

.pl-50 {
  padding-left: 50px;
}

/*-- Padding Right --*/
.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-35 {
  padding-right: 35px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-45 {
  padding-right: 45px;
}

.pr-50 {
  padding-right: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-80 {
  padding-top: 80px;
}

/*-- margin Left And Right --*/
.mx-5 {
  margin-right: 5px;
  margin-left: 5px;
}

.mx-10 {
  margin-right: 10px;
  margin-left: 10px;
}

.mx-15 {
  margin-right: 15px;
  margin-left: 15px;
}

.mx-20 {
  margin-right: 20px;
  margin-left: 20px;
}

.mx-25 {
  margin-right: 25px;
  margin-left: 25px;
}

.mx-30 {
  margin-right: 30px;
  margin-left: 30px;
}

.mx-35 {
  margin-right: 35px;
  margin-left: 35px;
}

.mx-40 {
  margin-right: 40px;
  margin-left: 40px;
}

.mx-45 {
  margin-right: 45px;
  margin-left: 45px;
}

.mx-50 {
  margin-right: 50px;
  margin-left: 50px;
}

/*-- margin Top And Bottom --*/
.my-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.my-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.my-35 {
  margin-top: 35px;
  margin-bottom: 35px;
}

.my-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.my-45 {
  margin-top: 45px;
  margin-bottom: 45px;
}

.my-50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

/*-- margin Top --*/
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

/*-- margin Bottom --*/
.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

/*-- margin Left --*/
.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

/*-- margin Right --*/
.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-33 {
  margin-bottom: 33px;
}

.mb-28 {
  margin-bottom: 28px;
}

.mt-n1 {
  margin-top: -.25rem;
}

.mt-n2 {
  margin-top: -.45rem;
}

.mt-n3 {
  margin-top: -0.8rem;
}

.mt-n4 {
  margin-top: -1.5rem;
}

.mt-n5 {
  margin-top: -3rem;
}

.mb-n1 {
  margin-bottom: -.25rem;
}

.mb-n2 {
  margin-bottom: -.45rem;
}

.mb-n3 {
  margin-bottom: -0.8rem;
}

.mb-n4 {
  margin-bottom: -1.5rem;
}

.mb-n5 {
  margin-bottom: -3rem;
}

.mt-24 {
  margin-top: 24px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-55 {
  margin-top: 55px;
}


.fs-48 {
  font-size: 48px;
  /* Small devices */
  /* Extra small devices */
}



.space,
.space-top {
  padding-top: var(--section-space);
}

.space,
.space-bottom {
  padding-bottom: var(--section-space);
}

.space-extra,
.space-extra-top {
  padding-top: calc(var(--section-space) - 30px);
}

.space-extra,
.space-extra-bottom {
  padding-bottom: calc(var(--section-space) - 30px);
}

.space-extra2,
.space-extra2-top {
  padding-top: calc(var(--section-space) - 40px);
}

.space-extra2,
.space-extra2-bottom {
  padding-bottom: calc(var(--section-space) - 40px);
}

/* Medium devices */

.space-extra3 {
  position: relative;
  margin: -35px 0;
  z-index: 8;
}

/*# sourceMappingURL=style.css.map */

.scroll-top.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}


.scroll-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 10000;
  opacity: 1;
  visibility: hidden;
  -webkit-transform: translateY(45px);
      -ms-transform: translateY(45px);
          transform: translateY(45px);
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.scroll-top:after {
  content: "\f062";
  font-family: var(--icon-font);
  position: absolute;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #39439C;
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 1;
  border: 2px solid #39439C;
  box-shadow: none;
  border-radius: 50%;
}

.scroll-top svg {
  color: #39439C !important;
  border-radius: 50%;
  background: var(--white-color);
}

.scroll-top svg path {
  fill: none;
}

.scroll-top .progress-circle path {
  stroke: #39439C ;
  stroke-width: 20px;
  box-sizing: border-box;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}





/* Mooving Animation */
@-webkit-keyframes moving {
    0% {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
    20% {
      -webkit-transform: translate(0px, -30px);
      transform: translate(0px, -30px);
    }
    50% {
      -webkit-transform: translate(-100px, -30px);
      transform: translate(-100px, -30px);
    }
    70% {
      -webkit-transform: translate(-100px, 0px);
      transform: translate(-100px, 0px);
    }
    100% {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
  }
  
  @keyframes moving {
    0% {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
    20% {
      -webkit-transform: translate(0px, -30px);
      transform: translate(0px, -30px);
    }
    50% {
      -webkit-transform: translate(-100px, -30px);
      transform: translate(-100px, -30px);
    }
    70% {
      -webkit-transform: translate(-100px, 0px);
      transform: translate(-100px, 0px);
    }
    100% {
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
    }
  }
  
  @keyframes fadeLeftRight {
    0%,
    100% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    50% {
      -webkit-transform: translateX(100px);
              transform: translateX(100px);
    }
  }
  
  @-webkit-keyframes slideTop {
    49% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    50% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
    51% {
      opacity: 1;
    }
  }
  
  @keyframes slideTop {
    49% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
    50% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }
    51% {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes shine {
    100% {
      left: 125%;
    }
  }
  
  @keyframes shine {
    100% {
      left: 125%;
    }
  }
  
  .fadedown {
    -webkit-animation: fade-down .3s linear;
            animation: fade-down .3s linear;
  }
  
  @-webkit-keyframes fade-down {
    0% {
      opacity: 0;
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
      visibility: hidden;
    }
    100% {
      opacity: 1;
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      visibility: visible;
    }
  }
  
  @keyframes fade-down {
    0% {
      opacity: 0;
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
      visibility: hidden;
    }
    100% {
      opacity: 1;
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      visibility: visible;
    }
  }
  
  @-webkit-keyframes animate-positive {
    0% {
      width: 0;
    }
  }
  
  @keyframes animate-positive {
    0% {
      width: 0;
    }
  }
  
  .fadein,
  .scalein,
  .slidetopleft,
  .slidebottomright,
  .slideinleft,
  .slideinright,
  .slideindown,
  .slideinup,
  .rollinleft,
  .rollinright {
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 1.3s;
            animation-duration: 1.3s;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
    -webkit-animation-name: var(--animation-name);
            animation-name: var(--animation-name);
  }
  
  .swiper-slide-active .fadein {
    --animation-name: fadein;
  }
  
  .swiper-slide-active .scalein {
    --animation-name: scalein;
  }
  
  .swiper-slide-active .slidetopleft {
    --animation-name: slidetopleft;
  }
  
  .swiper-slide-active .slidebottomright {
    --animation-name: slidebottomright;
  }
  
  .swiper-slide-active .slideinleft {
    --animation-name: slideinleft;
  }
  
  .swiper-slide-active .slideinright {
    --animation-name: slideinright;
  }

  .swiper-slide-active .slideinright {
    --animation-name: slideinright;
  }
  
  .swiper-slide-active .slideinup {
    --animation-name: slideinup;
  }
  
  .swiper-slide-active .slideindown {
    --animation-name: slideindown;
  }
  .swiper-slide-active .rollinleft {
    --animation-name: rollinleft;
  }
  
  .swiper-slide-active .rollinright {
    --animation-name: rollinright;
  }
  
  @-webkit-keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes slideinup {
    0% {
      opacity: 0;
      -webkit-transform: translateY(100px);
              transform: translateY(100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @keyframes slideinup {
    0% {
      opacity: 0;
      -webkit-transform: translateY(100px);
              transform: translateY(100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @-webkit-keyframes slideinright {
    0% {
      opacity: 0;
      -webkit-transform: translateX(180px);
              transform: translateX(180px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  
  @keyframes slideinright {
    0% {
      opacity: 0;
      -webkit-transform: translateX(180px);
              transform: translateX(180px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  
  @-webkit-keyframes slideindown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @keyframes slideindown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @-webkit-keyframes slideinleft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  
  @keyframes slideinleft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  
  @-webkit-keyframes slidebottomright {
    0% {
      opacity: 0;
      -webkit-transform: translateX(120px) translateY(120px);
              transform: translateX(120px) translateY(120px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0);
              transform: translateX(0) translateY(0);
    }
  }
  
  @keyframes slidebottomright {
    0% {
      opacity: 0;
      -webkit-transform: translateX(120px) translateY(120px);
              transform: translateX(120px) translateY(120px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0);
              transform: translateX(0) translateY(0);
    }
  }
  
  @-webkit-keyframes slidetopleft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100px) translateY(-100px);
              transform: translateX(-100px) translateY(-100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0);
              transform: translateX(0) translateY(0);
    }
  }
  
  @keyframes slidetopleft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100px) translateY(-100px);
              transform: translateX(-100px) translateY(-100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0);
              transform: translateX(0) translateY(0);
    }
  }
  
  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }
  
  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }
  
  @-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  
  @-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
  }
  
  .zoomIn {
    -webkit-animation-name: zoomIn;
            animation-name: zoomIn;
  }
  
  @-webkit-keyframes zoomIn {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
      opacity: 1;
    }
  }
  
  @keyframes zoomIn {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
      opacity: 1;
    }
  }
  
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }
  
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
  
  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
  }
  
  @-webkit-keyframes cloudAni {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    50% {
      -webkit-transform: translateY(-80px);
      transform: translateY(-80px);
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes cloudAni {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    50% {
      -webkit-transform: translateY(-80px);
      transform: translateY(-80px);
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }


  
.header-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.sticky-wrapper {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

.sticky-wrapper.sticky {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--white-color);
  -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.07));
          filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.07));
  -webkit-animation: stickyAni 0.4s ease-in-out;
          animation: stickyAni 0.4s ease-in-out;
}

@-webkit-keyframes stickyAni {
  0% {
    -webkit-transform: translate3d(0, -40px, 0) scaleY(0.8);
            transform: translate3d(0, -40px, 0) scaleY(0.8);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleY(1);
            transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 1;
  }
}

@keyframes stickyAni {
  0% {
    -webkit-transform: translate3d(0, -40px, 0) scaleY(0.8);
            transform: translate3d(0, -40px, 0) scaleY(0.8);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleY(1);
            transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 1;
  }
}

.fb-like-container {
  display: flex;
  align-items: center;
}

.like-count {
  margin-left: 10px; /* Điều chỉnh khoảng cách giữa nút Like và số lượt Like */
  font-size: 14px; /* Điều chỉnh kích thước chữ nếu cần */
  color: #000; /* Màu chữ */
}

.sub-title {
  display: block;
  color: var(--title-color);
  font-size: 30px;
  font-family: var(--style-font);
  position: relative;
  margin-bottom: -4px;
  /* Extra small devices */
}
.sub-title:before {
  content: '';
  width: 40px;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 60%;
  left:35%;
}
.sub-title:after {
  content: '';
  width: 40px;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 60%;
  right:35%;
}

@media (max-width: 480px) {
  .sub-title {
    font-size: 20px;
    line-height: 30px;
  }
}

@media (max-width: 375px) {
  .sub-title {
    font-size: 20px;
    line-height: 25px;
  }
}
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40px; /* Increased width */
  height: 35px; /* Increased height */
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  outline: none; /* Remove default focus outline */
}

.menu-toggle:focus {
  outline: none; /* Ensure focus outline is removed */
}

.menu-bar {
  width: 100%;
  height: 3px;
  background-color: #333;
  transition: all 0.3s ease-in-out;
}

.menu-bar.open:nth-child(1) {
  transform: translateY(11px) translateX(-8px) rotate(90deg); /* Adjusted translateY for increased size */
}

.menu-bar.open:nth-child(2) {
  transform: rotate(90deg);
}

.menu-bar.open:nth-child(3) {
  transform: translateY(-11px) translateX(8px) rotate(90deg); /* Adjusted translateY for increased size */
}


.nav-menu {
  position: absolute;
  top: 60px;
  left: 0;
  width: 500px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  z-index: 1000;
  padding: 20px;
  transform: translateX(-100%); /* Bắt đầu từ ngoài khung nhìn */
  opacity: 0; /* Bắt đầu từ trong suốt */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.nav-menu.open {
  transform: translateX(0); /* Dịch chuyển vào khung nhìn */
  opacity: 1; /* Hiển thị hoàn toàn */
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu ul li {
  margin: 5px 0;
  padding: 2px;
}

.nav-menu ul ul {
  margin-left: 10px;
  padding-left: 10px;
}

.nav-menu ul ul li {
  position: relative;
  padding-left: 25px; /* Khoảng cách cho icon ">" */
  padding-top: 10px;
}

.nav-menu ul ul li::before {
  content: '\f330';
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  left: 0px;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  top: 16px;
  bottom: 0;
  margin: auto;
}

.nav-menu ul li a {
  color: #fff; /* Màu chữ ban đầu */
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}

.nav-menu ul li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  display: block;
  left: 0;
  bottom: -5px;
  background: white;
  transition: width 0.3s;
}

.nav-menu ul li a:hover {
  color: #1CA8CB; /* Màu chữ khi hover */
}

.nav-menu ul li a:hover::after {
  width: 100%; /* Hiệu ứng gạch dưới khi hover */
}






/* Emagazine 2 */


.headeremagazine2 {
  position: relative;
  overflow: hidden;
}

.headerbanner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1000px; /* Chiều cao cho bản PC */
  position: relative;
}

.top-centered-image {
  position: absolute;
  top: 150px; /* Điều chỉnh khoảng cách từ trên xuống */
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%; /* Điều chỉnh kích thước tối đa của hình ảnh */
  z-index: 2;
}

.hero-style5 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; /* Điều chỉnh chiều rộng của phần quote */
  max-width: 800px; /* Giới hạn chiều rộng tối đa */
}

.quoteemazgine2 {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 30px;
  border-radius: 10px;
  position: relative;
  font-style: italic;
  text-align: center;
  font-size: 20px;
  color: #15518C;
  font-weight: bold;
}

.quoteemazgine2::before {
  content: '“';
  font-size: 100px;
  position: absolute;
  left: -30px;
  top: -40%;
  font-family: 'CooperBlack';
  color: #176DAD;
  font-style: normal;
}

@media (max-width: 768px) {
  .headerbanner {
      height: 700px ; /* Điều chỉnh chiều cao cho mobile */
  }

  .top-centered-image {
      top: 100px; /* Điều chỉnh vị trí cho mobile */
      max-width: 70% !important;
  }

  .hero-style5 {
      width: 80%;
      top: 60%;
  }
  .quoteemazgine2 {
    font-size: 18px;
  }
  .quoteemazgine2::before {
    font-size: 80px;
    left: -10px;
    top: -16%;
  }
}


.emagazine2-body1-section {
  width: 100%;
  overflow: hidden;
}

.body1 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 2353px; /* Chiều cao cho bản PC */
  width: 100%;
  position: relative;
}

.bodytext {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 80%;
  text-align: center;
}

.bodysip {
  font-weight: bold;
  font-style: italic;
  margin-bottom: 20px;
  width: 80%; /* Chiều rộng của đoạn văn */
  text-align: center; /* Căn giữa nội dung đoạn văn */
  margin-left: auto; /* Căn giữa đoạn văn trong parent container */
  margin-right: auto; /* Căn giữa đoạn văn trong parent container */
  font-size: 20px;
}

.bodytext img {
  width: 100%;
  margin-top: 20px;
  display: block;
  margin-left: 50px;
  margin-right: auto;
}

@media (max-width: 768px) {
  .body1 {
      height: 800px; /* Điều chỉnh chiều cao cho mobile */
  }
  .bodysip {
    width: 100%;
    font-size: 14px;
    margin-top: 100px;
}
.bodytext img {
      margin-left: 10px;
}
.sec-text8 {
  font-size: 14px !important;
  line-height: 30px !important;
}
}

.emagazine2-body2-section {
  width: 100%;
  overflow: hidden;
}

.body2 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1696px; /* Chiều cao cho bản PC */
  width: 100%;
  position: relative;
}

.bodytext2 {
  position: absolute;
  top: 18%;
  transform: translateY(-50%);
  width: 60%;
}

.bodysip2 {
  font-weight: bold;
  margin-bottom: 20px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  color: #ffffff;
  font-size: 20px;
}

@media (max-width: 768px) {
  .body2 {
      height: 700px; /* Điều chỉnh chiều cao cho mobile */
  }
  .bodytext2 {
    top: 25%;
    width: 100%;
  }
  .bodysip2{
    font-size: 14px;
  }
}


.emagazine2-body3-section {
  width: 100%;
  overflow: hidden;
}

.body3 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 3139px; /* Chiều cao cho bản PC */
  width: 100%;
  position: relative;
}

.bodytext3 {
  position: absolute;
  top: 43%;
  transform: translateY(-50%);
  width: 60%;
  text-align: center;
}

.bodysip3 {
  font-weight: bold;
  font-style: italic;
  margin-bottom: 20px;
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* CSS cho phiên bản desktop */
.body3 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Sử dụng thuộc tính data-bg-src cho hình nền mặc định */
.body3[data-bg-src] {
  background-image: var(--bg-image, url(attr(data-bg-src url)));
}

/* CSS cho phiên bản điện thoại (màn hình <= 768px) */
@media (max-width: 768px) {
  .body3 {
      background-image: url('http://localhost/bsop/wp-content/themes/twentytwentyfour/emagazine/assets/img/emagazine2/anhso711.png') !important;
  }
}

@media (max-width: 768px) {
  .body3 {
      height: 2100px; /* Điều chỉnh chiều cao cho mobile */
      width: 100%;
  }
  .bodytext3 {
    top: 46%;
    width: 95%;
}
.mt-40 {
  margin-top: 0px;
}
}

.sec-text8 {
  font-size: 18px;
  line-height: 40px;
  text-align: justify;
}

.emagazine2-body4-section {
  width: 100%;
  overflow: hidden;
}

.body4 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 330px; /* Chiều cao cho bản PC */
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .body4 {
    height: 140px;
    width: 110%;
  }
  .body44 {
    height: 140px;
    width: 100%;
  }
}

.emagazine2-body5-section {
  width: 100%;
  overflow: hidden;
}


.body7 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Sử dụng thuộc tính data-bg-src cho hình nền mặc định */
.body7[data-bg-src] {
  background-image: var(--bg-image-body7, url(attr(data-bg-src url)));
}

/* CSS cho phiên bản điện thoại (màn hình <= 768px) */
@media (max-width: 768px) {
  .body7 {
      background-image: url('http://localhost/bsop/wp-content/themes/twentytwentyfour/emagazine/assets/img/emagazine2/anhso111.jpg') !important;
  }
}

.body5 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1912px; /* Chiều cao cho bản PC */
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .body5 {
      height: 500px; /* Điều chỉnh chiều cao cho mobile */
  }
}

.emagazine2-body7-section {
  width: 100%;
  overflow: hidden;
}

.body7 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1369px; /* Chiều cao cho bản PC */
  width: 100%;
  position: relative;
}

.bodytext7 {
  position: absolute;
  top: 22%;
  transform: translateY(-50%);
  width: 33%;
  left: 20%;
}

.bodysip7 {
  font-size: 20px;
  text-align: justify;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  line-height: 2.7;
}

@media (max-width: 768px) {
  .body7 {
      height: 1150px; /* Điều chỉnh chiều cao cho mobile */
      width: 100%;
  }
  .bodytext7 {
    top: 37%;
    width: 36%;
    left: 4%;
  }
  .mt-60 {
    margin-top: 0px;
  }
}

.emagazine2-body8-section {
  width: 100%;
  overflow: hidden;
}

.body8 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1355px; /* Chiều cao cho bản PC */
  width: 100%;
  position: relative;
}

.bodytext8 {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 43%;
  left: 14%;
}

.bodysip8 {
  font-size: 18px;
  text-align: justify;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  line-height: 40px;
}

@media (max-width: 768px) {
  .body8 {
      height: 550px; /* Điều chỉnh chiều cao cho mobile */
  }
  .bodytext8{
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 64%;
    left: 0%;
  }
  .bodysip8 {
    font-size: 13px;
    text-align: justify;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 20px;
}
}


/* Emagazine 3 */

.headeremagazine3 {
  position: relative;
  overflow: hidden;
}

.headerbanner3 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1871px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

.hero-style3 {
  position: absolute;
  top: 100%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 90%; /* Điều chỉnh chiều rộng của phần quote */
  max-width: 800px; /* Giới hạn chiều rộng tối đa */
}

.quoteemagazine3 {
  padding: 40px;
  border-radius: 10px;
  position: relative;
  font-style: italic;
  text-align: justify;
  font-size: 20px;
  color: #282826;
  font-weight: bold;
}
.quoteemagazine3::before {
  content: '“';
  font-size: 100px;
  position: absolute;
  left: -30px;
  top: -15%;
  font-family: 'CooperBlack';
  color: #393A3A;
  font-style: normal;
}

.quoteemagazine3::after {
  content: '”';
  font-size: 100px;
  position: absolute;
  right: 30px;
  bottom: -30%;
  font-family: 'CooperBlack';
  color: #393A3A;
  font-style: normal;
}

@media (max-width: 768px) {
  .headerbanner3 {
      height: 700px; /* Điều chỉnh chiều cao cho mobile */
  }

  .hero-style3 {
      width: 80%;
      top: 60%;
  }
  .quoteemagazine3 {
    font-size: 18px;
  }
  .quoteemagazine3::before {
    font-size: 80px;
    left: -10px;
    top: -16%;
  }
  .quoteemagazine3::after {
    font-size: 80px;
    right: -10px;
    bottom: -16%;
  }
}

.sec-title-green {
  color:#204286;
  font-family: 'SVN-AleoBold';
  font-size: 60px;
}

.sec-title-aleo{
  font-family: 'SVN-AleoBold';
}

.talk1 {
  border: 2px dashed #666;
  border-radius: 10px;
  padding: 10px;
  display: inline-block;
  text-align: justify;
  position: relative; /* Ensure the parent is positioned */
  margin-left: 0px; /* Adjust based on image size */
  text-align: justify;
  margin: 0 0 25px 0;
  min-width: 630px;
}

.talk1::before {
  content: '';
  position: absolute;
  left: -100px; /* Adjust based on image size */
  top: 50%;
  transform: translateY(-50%);
  width: 80px; /* Image width */
  height: 80px; /* Image height */
  background-image: url('http://localhost/bsop/wp-content/themes/twentytwentyfour/emagazine/assets/img/emagazine3/diengia1.png');
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.talk2 {
  background-color: #1E68AF; /* Blue background */
  color: white; /* White text */
  border-radius: 15px 15px 0 15px;
  padding: 20px;
  position: relative;
  margin-right: 0px; /* Adjust based on image size */
  text-align: justify;
  margin: 0 0 25px 0;
}

.talk2::after {
  content: '';
  position: absolute;
  right: -100px; /* Adjust based on image size */
  top: 50%;
  transform: translateY(-50%);
  width: 80px; /* Image width */
  height: 80px; /* Image height */
  background-image: url('http://localhost/bsop/wp-content/themes/twentytwentyfour/emagazine/assets/img/emagazine3/Vicky.png'); /* Replace with actual image path */
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.talk3 {
  background-color: #1E68AF; /* Blue background */
  color: white; /* White text */
  border-radius: 15px 15px 0 15px;
  padding: 20px;
  position: relative;
  margin-right: 0px; /* Adjust based on image size */
  text-align: justify;
  margin: 0 0 25px 0;
}

.talk3::after {
  content: '';
  position: absolute;
  right: -100px; /* Adjust based on image size */
  top: 88%;
  transform: translateY(-50%);
  width: 80px; /* Image width */
  height: 80px; /* Image height */
  background-image: url('http://localhost/bsop/wp-content/themes/twentytwentyfour/emagazine/assets/img/emagazine3/Vicky.png'); /* Replace with actual image path */
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}


.bodyemagazine3 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1288px; /* Adjusted height for emagazine 3 */
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .bodyemagazine3 {
      height: 800px; /* Adjusted height for mobile */
  }
}

.bodyemagazine3b {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 3100px; /* Adjusted height for emagazine 3 */
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .bodyemagazine3b {
      height: 800px; /* Adjusted height for mobile */
  }
}

.bodyemagazine3c {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1000px; /* Adjusted height for emagazine 3 */
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .bodyemagazine3c {
      height: 800px; /* Adjusted height for mobile */
  }
}

.bodyemagazine3d {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1200px; /* Adjusted height for emagazine 3 */
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .bodyemagazine3d {
      height: 800px; /* Adjusted height for mobile */
  }
}

.bodyemagazine3e {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 700px; /* Adjusted height for emagazine 3 */
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .bodyemagazine3e {
      height: 800px; /* Adjusted height for mobile */
  }
}

.bodysipq {
  font-weight: bold;
  font-style: italic;
  margin-bottom: 20px;
  width: 80%; /* Chiều rộng của đoạn văn */
  text-align: justify; /* Căn giữa nội dung đoạn văn */
  margin-left: auto; /* Căn giữa đoạn văn trong parent container */
  margin-right: auto; /* Căn giữa đoạn văn trong parent container */
  font-size: 20px;
}


.bodytext4 {
  position: absolute;
  top: 43%;
  transform: translateY(-50%);
  width: 60%;
  text-align: center;
}
.bodytext4::before {
  content: '“';
  font-size: 100px;
  position: absolute;
  left: 30px;
  font-family: 'CooperBlack';
  color: #070707;
  font-style: normal;
}

.bodytext4::after {
  content: '“';
  font-size: 100px;
  position: absolute;
  left: 330px;
  font-family: 'CooperBlack';
  color: #070707;
  font-style: normal;
  top:96%;
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .bodytext4 {
    top: 46%;
    width: 95%;
}
}


.bodyemagazine3f {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 700px; /* Adjusted height for emagazine 3 */
  width: 100%;
  position: relative;
  margin-top: -470px;
}

@media (max-width: 768px) {
  .bodyemagazine3f {
      height: 800px; /* Adjusted height for mobile */
  }
}

/* Emagazine 4 */

.headeremagazine4 {
  position: relative;
  overflow: hidden;
}

.headerbanner4 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1280px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}


@media (max-width: 768px) {
  .headerbanner4 {
      height: 450px; /* Điều chỉnh chiều cao cho mobile */
      margin-top: 40px;
  }
  .quoteemagazine4 {
    width: 50% !important;
    left: 29% !important;
  }
  .bodyhung {
    font-size: 12px !important;
  }
}

.headerbanner4-1 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1100px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

@media (max-width: 768px) {
  .headerbanner4-1 {
      height: 650px; /* Điều chỉnh chiều cao cho mobile */
  }
}

.quoteemagazine4 {
  position: absolute;
  top: 51%;
  left: 35%;
  transform: translate(-50%, -50%);
  width: 35%;
  max-width: 800px;
}

.bodyhung {
  font-weight: bold;
  font-style: italic;
  margin-bottom: 20px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
}

.sec-title-avo {
  font-family: 'UTM-Avobold';
}
.sec-title-pacific {
  font-family: 'UTM-PacificStandard';
}

.color_org {
  color: #AE8313;
}

.circle-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #b8860b;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto 20px;
}

.circle-icon::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 8px solid white;
}

.circle-icon span {
  color: white;
  font-size: 40px;
  font-weight: bold;
  font-family: 'UTM-PacificStandard';
}


.horizontal-lineemagazine4 {
  width: 100%;
  max-width: 300px; /* Có thể điều chỉnh để phù hợp với thiết kế của bạn */
  height: 3px; /* Độ dày của đường kẻ */
  background-color: #AE8313;
  margin: 20px auto; /* Căn giữa và tạo khoảng cách trên dưới */
}

.question-container {
  display: flex;
  align-items: center;
  max-width: 800px;
  margin: 20px auto;
  font-family: 'UTM-Androgyne', sans-serif;
  color: #AE8313;
}
.leaf-icon {
  width: 30px;
  height: auto;
  margin-right: 10px;
}

.question-text {
  font-size: 24px;
  margin: 0;
  font-family: 'UTM-Androgyne', sans-serif;
  color: #AE8313;
  line-height: 1.25;
}

@media (max-width: 600px) {
  .question-container {
      align-items: flex-start;
  }
  .talk44 {
    padding: 0px !important;
    font-size:14px !important;
  }

  .leaf-icon {
      margin-bottom: 10px;
  }

  .question-text {
      font-size: 16px;
  }
}

.talk44{
  padding: 0 120px;
  position: relative;
  margin-right: 0px; /* Adjust based on image size */
  text-align: justify;
  margin: 0 0 25px 0;
  font-size:20px;
}

.headerbanner4-2 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1800px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

@media (max-width: 768px) {
  .headerbanner4-2 {
      height: 650px; /* Điều chỉnh chiều cao cho mobile */
  }
}

.hero-style44 {
  position: absolute;
  top: 10%;
  left: 41%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 410px;
}

.quoteemagazine44 {
  padding: 0px;
  position: relative;
  text-align: center;
  font-size: 24px;
  color: #282826;
  font-weight: bold;
}
.quoteemagazine44::before {
  content: '“';
  font-size: 130px;
  position: absolute;
  left: 170px;
  top: -115%;
  font-family: 'CooperBlack';
  color: #AE8313;
  font-style: normal;
}



@media (max-width: 768px) {
  .hero-style44 {
    width: 80%;
    top: 15%;
  }
  .quoteemagazine44 {
    font-size: 14px;
  }
  .quoteemagazine44::before {
    font-size: 80px;
    left: 140px;
    top: -110%;
  }
}

.framed-paragraph {
  max-width: 720px;
  margin: 20px auto;
  padding: 20px 50px 0 0;
  font-size: 20px;
  line-height: 1.75;
  text-align: justify;
  position: relative;
  font-style: italic;
}

.framed-paragraph::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: black;
}

.framed-paragraph::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  border-right: 2px solid black;
}

@media (max-width: 600px) {
  .framed-paragraph {
      font-size: 14px;
      padding: 15px;
  }
}

.headerbanner4-3 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1750px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

@media (max-width: 768px) {
  .headerbanner4-3 {
      height: 700px; /* Điều chỉnh chiều cao cho mobile */
  }
}

.headerbanner4-8{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1100px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

@media (max-width: 768px) {
  .headerbanner4-8 {
      height: 500px; /* Điều chỉnh chiều cao cho mobile */
  }
  .framed-paragraph {
    max-width: 400px;
  }
}

.headerbanner4-7{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 11  00px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

@media (max-width: 768px) {
  .headerbanner4-7 {
      height: 500px; /* Điều chỉnh chiều cao cho mobile */
  }
}

/* Emagazine 5 */

.headeremagazine5 {
  position: relative;
  overflow: hidden;
}

.headerbanner5 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 2480px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}


.quoteemagazine5 {
  position: absolute;
  top: 78%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 890px;
}

.bodyhung2 {
  font-weight: bold;
  font-style: italic;
  margin-bottom: 20px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
}

.headerbanner5-1 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1000px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

.headerbanner5-2 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1000px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

.headerbanner5-3 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 2200px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

.headerbanner5-4 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1200px; /* Chiều cao cho headerbanner emagazine số 3 */
  position: relative;
}

.color_blue {
  color:#1368A0;
}

.quote-container2 {
  position: relative;
  padding-left: 40px; /* Adjust based on leaf icon size */
  margin-bottom: 20px;
}

.leaf-icon2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px; /* Adjust as needed */
  height: auto;
}

@media (max-width: 768px) {
  .headerbanner5 {
    height: 1260px;
    margin-top: 40px;
    margin-left: -40px;
  }
  .quoteemagazine5 {
    width: 84% !important;
    left: 52% !important;
    top: 79% !important;
  }
  .bodyhung2 {
    font-size: 12px !important;
  }
  .headerbanner5-1 {
    height: 430px;
  }
  .headerbanner5-2 {
    height: 300px;
  }
  .headerbanner5-3 {
    height: 550px;
  }
  .headerbanner5-4 {
    height: 500px;
  }
}