/* ============================================================================
   "Hành trình trải nghiệm" (1:1 port from sendesign.vn/vi/dich-vu).
   The source markup relies on Bootstrap grid + display utilities and Bootstrap
   font CSS variables, which the Nectar site doesn't provide. This shim supplies
   them SCOPED to .sec-model so nothing else on the site is affected, then the
   original section CSS follows verbatim.
   ============================================================================ */
.sec-model{
  --bs-body-font-family:"SVN-CoFo Gothic",sans-serif;
  --bs-heading-font-family:"SVN-Albra Grotesk",serif;
  /* Break out of the WP content column to the FULL viewport width — the source
     theme's container is full-width (2.5rem padding), and the scene SVG + the
     fixed-width dashed connector lines are positioned against that full width. */
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
/* match the md_sendesign theme container: FULL-WIDTH with responsive side
   padding (NOT a centred 1320px box) — the scene + dashed lines are positioned
   against this, so getting it wrong throws the whole layout out of alignment. */
.sec-model .container{width:100%;max-width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;box-sizing:border-box}
@media(min-width:768px){.sec-model .container{padding-left:1.25rem;padding-right:1.25rem}}
@media(min-width:768px) and (max-width:1199.98px){.sec-model .container{width:80vw}}
@media(min-width:1200px){
	/* desktop: inset the whole section 2.5rem from BOTH viewport edges (the scene
	   used to bleed to the right edge). Same content width as before, so the
	   scene/text/line positions don't shift; the bleed is just clipped at 2.5rem. */
	.sec-model{
		width:auto !important;
		max-width:none !important;
		margin-left:calc(50% - 50vw + 2.5rem) !important;
		margin-right:calc(50% - 50vw + 2.5rem) !important;
		overflow-x:clip;
	}
	.sec-model .container{padding-left:0;padding-right:0}
}
.sec-model .row{display:flex;flex-wrap:wrap;margin-left:-0.75rem;margin-right:-0.75rem}
.sec-model [class*="col-"]{padding-left:0.75rem;padding-right:0.75rem;box-sizing:border-box;position:relative;width:100%}
.sec-model .col-4{flex:0 0 33.3333%;max-width:33.3333%}
.sec-model .col-8{flex:0 0 66.6667%;max-width:66.6667%}
.sec-model .d-none{display:none!important}
.sec-model .d-block{display:block!important}
@media(min-width:1200px){
  .sec-model .col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}
  .sec-model .col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}
  .sec-model .d-xl-block{display:block!important}
  .sec-model .d-xl-none{display:none!important}
}
/* ---------------------------- original section CSS ---------------------------- */
.sec-model-mb__inner{z-index:3;}
.sec-model-mb__inner .sec-model-mb__tl{font-weight:500;color:#572b12;}
.sec-model-mb__inner .sec-model-mb__ct{list-style:none;margin-top:0.8125rem;display:flex;flex-direction:column;gap:0.875rem;color:#572b12;}
.sec-model-mb__inner .sec-model-mb__ct .sec-model-mb__item{display:flex;align-items:flex-start;padding-bottom:0.5625rem;border-bottom:1px solid #b19c7e;opacity:0.4;}
.sec-model-mb__inner .sec-model-mb__ct .sec-model-mb__item:last-of-type{border:none;}
.sec-model-mb__inner .sec-model-mb__ct strong{margin-right:0.5rem;}
.sec-model-mb__inner .sec-model-mb__ct p{padding:0;margin:0;}
.sec-model{width:100%;padding-top:2.5rem;}
.sec-model .sec-model-mb{overflow:hidden;}
.sec-model .sec-model__wrap--mobile{padding-bottom:0;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__wrap{padding-bottom:68px;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__wrap{height:100%;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__wrap .sec-model-mb__model-wrap{width:100%;aspect-ratio:375/479;overflow:hidden;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__wrap .sec-model-mb__model-wrap .sec-model-mb__model{height:100%;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__title{padding:0 1rem;display:flex;flex-direction:column;gap:0.4375rem;padding-bottom:1.9375rem;z-index:3;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__title .description-read{color:#572b12;font-family:var(--bs-heading-font-family);font-size:0.875rem;list-style:1.28571;letter-spacing:0.0525rem;text-transform:uppercase;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__title .title-read{text-transform:uppercase;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__model{width:100%;aspect-ratio:359/410;overflow:hidden;z-index:1;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__model svg{width:100%;height:100%;transform:translate(2%,0%);}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des{padding-top:3.5rem;color:#150a04;font-family:var(--bs-heading-font-family);font-size:1rem;font-weight:400;line-height:1.375;display:flex;flex-direction:column;gap:1.8125rem;position:relative;top:0;bottom:0;z-index:3;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__des-tl{font-weight:600;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .line{margin-top:1.9375rem;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__des-box{z-index:3;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__inner{z-index:3;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__inner .sec-model-mb__tl{font-weight:500;color:#572b12;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__inner .sec-model-mb__ct{list-style:none;margin-top:0.8125rem;display:flex;flex-direction:column;gap:0.875rem;color:#572b12;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__inner .sec-model-mb__ct .sec-model-mb__item{display:flex;align-items:flex-start;padding-bottom:0.5625rem;border-bottom:1px solid #b19c7e;opacity:0.4;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__inner .sec-model-mb__ct .sec-model-mb__item:last-of-type{border:none;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__inner .sec-model-mb__ct strong{margin-right:0.5rem;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__inner .sec-model-mb__ct p{padding:0;margin:0;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__des-overlay{position:absolute;top:-73%;left:0;z-index:1;height:300%;width:100%;background:linear-gradient(180deg,rgba(247,241,232,0) 0%,#f7f1e8 27.92%);}
.sec-model .sec-model__wrap--mobile xo-carousel-pagination{position:absolute;z-index:10;top:51%;left:50%;transform:translate(-50%,-50%);margin-top:0.75rem;justify-content:center;gap:0.25rem;}
.sec-model .sec-model__wrap--mobile xo-carousel-pagination xo-carousel-bullet .carousel-bullet{width:0.375rem;height:0.375rem;background-color:var(--bs-body-color);opacity:0.2;border-radius:50%;transition:all 0.3s ease;}
.sec-model .sec-model__wrap--mobile xo-carousel-pagination xo-carousel-bullet[xo-active] .carousel-bullet{opacity:1;}
.sec-model .sec-model__wrap--mobile .pagination-slider{display:none;justify-content:center;width:100%;gap:0.234375rem;position:absolute;top:78dvh;z-index:1000;}
.sec-model .sec-model__wrap--mobile .pagination-slider .pagination__prev{width:1.8125rem;height:1.8125rem;padding:0 0.783125rem;background-color:transparent;}
.sec-model .sec-model__wrap--mobile .pagination-slider svg{width:0.625rem;height:0.625rem;}
.sec-model .sec-model__wrap--mobile .pagination-slider xo-carousel-prev[xo-disabled],.sec-model .sec-model__wrap--mobile .pagination-slider xo-carousel-next[xo-disabled]{opacity:0.4;pointer-events:none;}
.sec-model .sec-model__wrap--mobile #model-slide2{overflow:visible;}
.sec-model .sec-model__wrap--mobile #model-slide2 svg{width:100%;height:100%;transform:translate(0%,0%);}
.sec-model .sec-model__wrap--mobile #model-slide2 .sec-model-mb__model{width:100%;height:100%;transform:translate(0%,0%);}
.sec-model .sec-model__wrap--mobile #model-slide2 .sec-model-mb__model img{width:100%;height:100%;}
.sec-model .sec-model__wrap--mobile #model-slide3 svg{width:100%;height:100%;transform:translate(0%,0%);}
.sec-model .sec-model__wrap--mobile #model-slide3 .sec-model-mb__model{width:100%;height:100%;transform:translate(0%,0%);}
.sec-model .sec-model__wrap--mobile #model-slide3 .sec-model-mb__model img{width:100%;height:100%;}
@media (min-width:768px){
.sec-model .sec-model__wrap--mobile{padding-bottom:0;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__wrap{padding-bottom:68px;width:100%;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__wrap .sec-model-mb__model-wrap{width:100%;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__title{padding:0 1.25rem;display:flex;flex-direction:column;gap:0.4375rem;padding-bottom:1.9375rem;z-index:3;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__title .description-read{color:#572b12;font-family:var(--bs-heading-font-family);font-size:0.875rem;list-style:1.28571;letter-spacing:0.0525rem;text-transform:uppercase;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__title .title-read{text-transform:uppercase;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__model{width:100%;overflow:hidden;z-index:1;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__model svg{width:100%;height:100%;transform:translate(2%,0%);}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des{padding:0 1.25rem;padding-top:3.75rem;color:#150a04;font-family:var(--bs-heading-font-family);font-size:1.25rem;font-weight:400;line-height:1.375;display:flex;flex-direction:column;gap:1.8125rem;position:relative;top:0;bottom:0;z-index:3;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__des-tl{font-weight:600;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .line{margin-top:1.9375rem;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__des-box{z-index:3;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__des-box .sec-model-mb__des-des{width:80%;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__des .sec-model-mb__des-overlay{position:absolute;top:-73%;left:0;z-index:1;height:300%;width:100%;background:linear-gradient(180deg,rgba(247,241,232,0) 0%,#f7f1e8 27.92%);}
.sec-model .sec-model__wrap--mobile xo-carousel-pagination{display:none;}
.sec-model .sec-model__wrap--mobile .pagination-slider{display:flex;justify-content:center;width:100%;gap:0.546875rem;position:absolute;top:58dvh;z-index:1000;}
.sec-model .sec-model__wrap--mobile .pagination-slider .pagination__prev{width:1.25rem;padding:1.1875rem 1.25rem;background-color:transparent;aspect-ratio:1/1;}
.sec-model .sec-model__wrap--mobile .pagination-slider svg{width:1.25rem;height:1.25rem;}
.sec-model .sec-model__wrap--mobile #model-slide2{overflow:visible;}
.sec-model .sec-model__wrap--mobile #model-slide2 svg{width:100%;height:100%;transform:translate(0%,0%);}
.sec-model .sec-model__wrap--mobile #model-slide3 svg{width:100%;height:100%;transform:translate(0%,0%);}
.sec-model .sec-model__main #chua circle,.sec-model .sec-model__main #text-file circle,.sec-model .sec-model__main #noithat circle,.sec-model .sec-model__main #home-not-done circle{fill:#f7f1e8;}
}
@media (min-width:992px){
.sec-model .pagination-slider{display:flex;}
}
@media (min-width:1200px){
.sec-model{padding-top:11.375rem;padding-bottom:10.3125rem;}
.sec-model .container{height:100dvh;}
.sec-model .row{height:100%;margin-left:-0.625rem;margin-right:-0.625rem;}
.sec-model .row [class*=col-]{padding-left:0.625rem;padding-right:0.625rem;height:100%;}
.sec-model .sec-model__wrap{height:100%;}
.sec-model .sec-model__ct{height:100%;width:100%;display:flex;flex-direction:column;gap:1.25rem;}
.sec-model .sec-model__ct p{margin:0;}
.sec-model .sec-model-ct-top{display:flex;align-items:center;width:100%;height:29%;}
.sec-model .sec-model-ct-mid{display:flex;align-items:center;width:100%;height:29%;}
.sec-model .sec-model-ct-bot{display:flex;align-items:center;width:100%;height:38%;}
.sec-model .sec-model__tl{display:flex;justify-content:center;align-items:center;width:4%;top:0;height:100%;}
.sec-model .sec-model__title{text-align:center;font-family:var(--bs-heading-font-family);font-size:1rem;font-weight:600;line-height:2.375;letter-spacing:-0.01rem;text-transform:uppercase;transform:rotateZ(270deg);white-space:nowrap;width:fit-content;}
.sec-model .sec-model__text{padding-left:0.625rem;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;}
.sec-model .sec-model__text-wrap{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;}
.sec-model .sec-model__text-wrap > * + *{margin-top:3.8181%;}
.sec-model .sec-model__text-tl{display:flex;flex-direction:column;}
.sec-model .sec-model__text-tl .line{margin-top:3.8181%;}
.sec-model .sec-model__text-tl li::marker{padding-left:0;}
.sec-model .sec-model__text-tl ul::marker{padding-left:0;}
.sec-model .sec-model__text-tl ul{padding-left:1.375rem;padding-bottom:0;margin-bottom:0;display:flex;flex-direction:column;gap:0.4375rem;}
.sec-model .sec-model__text-tl li{font-family:var(--bs-heading-font-family);font-size:1.0625rem;font-weight:600;list-style:1;letter-spacing:-0.02125rem;}
.sec-model .sec-model__wrap-icon{width:fit-content;height:100%;min-width:1.9375rem;position:relative;display:flex;}
.sec-model .sec-model__wrap-icon svg{height:100%;}
.sec-model .sec-model__wrap-icon .sec-model__line-s{position:absolute;height:100%;left:2.5625rem;display:flex;flex-direction:column;justify-content:space-between;}
.sec-model .sec-model__wrap-icon .sec-model__frame{height:100%;}
.sec-model .sec-model__wrap-icon .sec-model__frame svg{height:100%;width:100%;}
.sec-model .sec-model__wrap-icon .line-dash{height:2px;}
.sec-model .sec-model__wrap-icon .line-dash svg{vertical-align:top;}
.sec-model .sec-model__main{overflow:visible;height:100%;width:100%;}
.sec-model .sec-model__main svg{overflow:visible;width:100%;height:100%;}
}
@media (min-width:840px) and (max-width:1199px){
.sec-model .sec-model__wrap--mobile .sec-model-mb__wrap .sec-model-mb__model-wrap{width:100%;}
.sec-model .sec-model__wrap--mobile .sec-model-mb__wrap .sec-model-mb__des{width:100%;}
}
.sec-model--title{overflow:visible;}
.sec-model--title .container{height:fit-content;}
.sec-model--title .sec-model__header{padding-bottom:2.0625rem;}
.sec-model--title .sec-model__header .sec-model__header-btn{padding-top:2rem;}
.sec-model--title .sec-model__wrap{padding-top:4.0625rem;}
@media (min-width:1200px){
.sec-model--title{padding-top:0;margin-top:8rem;padding-bottom:9.75rem;}
.sec-model--title .sec-model__header{padding-bottom:2rem;}
.sec-model--title .sec-model__header .col-12{height:100%;}
.sec-model--title .sec-model__header .title__title{font-family:var(--bs-body-font-family);}
.sec-model--title .sec-model__header .row{align-items:flex-end;}
.sec-model--title .sec-model__header .sec-model__header-btn{padding-top:0;display:flex;justify-content:flex-end;align-items:flex-end;height:100%;}
.sec-model--title .sec-model__wrap{padding-top:0;margin-top:11.375rem;}
}
#services-model .sec-model__wrap{margin-top:0;}
#services-model .sec-model__wrap--mobile{padding-top:0;}
#services-model xo-carousel-pagination{top:52%;}
@media (min-width:1200px){
#services-model .sec-model-top{margin:0 0 5.5625rem;color:var(--SEN-Design-Primary,#572b12);font-family:"SVN-CoFo Gothic";font-size:4rem;font-style:normal;font-weight:400;line-height:106.25%;text-transform:uppercase;}
}
/* ============================================================================
   Mobile / tablet slider (rebuilt with Swiper to match the source).
   <1200px: show ONLY the slider (.sd-jmb) and hide the desktop scene + the
   source's own broken mobile block. ≥1200px: hide the slider, show the scene.
   Structural offsets use fixed px so the absolutely-placed controls land in the
   gap between the scene and the phase text regardless of the fluid rem root.
   ============================================================================ */
@media (max-width:1199.98px){ .sec-model{ display:none !important; } }
@media (min-width:1200px){ .sd-jmb{ display:none !important; } }
.sec-model__wrap--mobile{ display:none !important; }

.sd-jmb{ position:relative; padding:32px 0 48px;
	/* break out of the WP content column to the full viewport, leaving a 1rem
	   gutter each side (so the slider is as wide as the reference, not boxed in) */
	width:auto; max-width:none;
	margin-left:calc(50% - 50vw + 1rem);
	margin-right:calc(50% - 50vw + 1rem);
	--swiper-theme-color:#572b12; --swiper-pagination-color:#572b12; }
.sd-jmb__swiper{ overflow:hidden; }
.sd-jmb__slide{ box-sizing:border-box; padding:0 1rem; }
.sd-jmb__head{ height:74px; overflow:hidden; }
.sd-jmb__label{ display:block; font-family:"SVN-Albra Grotesk",serif; text-transform:uppercase;
	letter-spacing:.12em; font-size:.95rem; color:#8a7a5e; margin-bottom:.45rem; }
.sd-jmb__phase{ font-family:"SVN-Albra Grotesk",serif; text-transform:uppercase; color:#572b12;
	font-size:2.6rem; line-height:1; margin:0; letter-spacing:.02em; }
.sd-jmb__scene{ height:380px; margin-top:8px; }
.sd-jmb__scene img{ width:100% !important; height:100% !important; object-fit:contain; display:block; max-width:100%; }
.sd-jmb__body{ padding-top:64px; }
.sd-jmb__title{ font-family:"SVN-Albra Grotesk",serif; font-weight:500; color:#572b12;
	font-size:1.45rem; margin:0 0 1.1rem; }
.sd-jmb__list{ list-style:none; margin:0; padding:0; }
.sd-jmb__list li{ display:flex; gap:.7rem; align-items:flex-start; color:#572b12; opacity:.55;
	padding:.9rem 0; border-bottom:1px solid rgba(177,156,126,.55); font-size:1.2rem; line-height:1.35; }
.sd-jmb__list li:last-child{ border-bottom:0; }
.sd-jmb__num{ font-weight:500; flex:0 0 auto; }

/* controls sit in the gap between scene and phase text */
.sd-jmb__ctrl{ position:absolute; left:0; right:0; top:calc(32px + 74px + 8px + 380px + 20px);
	display:flex; align-items:center; justify-content:center; gap:1.2rem; z-index:5; pointer-events:none; }
.sd-jmb__ctrl>*{ pointer-events:auto; }
.sd-jmb__dots{ display:flex; align-items:center; justify-content:center; gap:.55rem; background:none; }
.sd-jmb__dots .sd-jmb__dot{ width:8px; height:8px; border-radius:50%; margin:0; display:block;
	background:#b19c7e; opacity:.4; transition:opacity .3s,background .3s; cursor:pointer; }
.sd-jmb__dots .sd-jmb__dot--on{ opacity:1; background:#572b12; }
/* an toàn: chặn mọi kiểu pagination "thanh" (progressbar) / scrollbar của swiper */
.sd-jmb .swiper-pagination-progressbar,
.sd-jmb .swiper-pagination-progressbar-fill,
.sd-jmb .swiper-scrollbar{ display:none !important; }
.sd-jmb__prev,.sd-jmb__next{ display:none; width:44px; height:44px; border-radius:50%;
	border:1px solid #b19c7e; background:transparent; color:#572b12; cursor:pointer;
	align-items:center; justify-content:center; transition:background .25s,color .25s; padding:0; }
.sd-jmb__prev svg,.sd-jmb__next svg{ width:20px; height:20px; }
.sd-jmb__prev{ transform:scaleX(-1); }
.sd-jmb__prev:hover,.sd-jmb__next:hover{ background:#572b12; color:#faf0dd; }
.sd-jmb__prev.swiper-button-disabled,.sd-jmb__next.swiper-button-disabled{ opacity:.3; cursor:default; }

/* tablet: 2 phases per view, arrows shown, dots hidden */
@media (min-width:768px){
	.sd-jmb__head{ height:92px; }
	.sd-jmb__phase{ font-size:3rem; }
	.sd-jmb__scene{ height:400px; }
	/* more breathing room between the scene/controls and the phase text below */
	.sd-jmb__body{ padding-top:120px; }
	.sd-jmb__ctrl{ top:calc(32px + 86px + 8px + 400px + 40px); gap:1rem; }
	.sd-jmb__prev,.sd-jmb__next{ display:inline-flex; }
	.sd-jmb__dots{ display:none; }
}