@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html { scroll-behavior: auto; overflow-x: hidden; }

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
	background-color: #068676 !important;
	font-family: "Prompt", sans-serif;
}
#content{
	position: relative;
	width: 100vw;
	height: 100vh;
	text-align: center;
	clear: both;
	float: left;
	overflow: hidden;
	scroll-snap-align: start;
  	scroll-snap-stop: always;
}
#content img{
	max-width: 100%;
	height: auto;
}
.content_middle{
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 99999;
    width: 100%;
    /*aspect-ratio: 16 / 9;*/
}
#banner{
	position: absolute;
	width: 100%;
    aspect-ratio: 16 / 9;
}
#banner img{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9
}
#line{
	width: 100%;
	height: auto;
}
#line img{
	width: 100%;
	height: auto;
}
.video-foreground {
  	position: absolute;
    width: auto;
    height: 100vh;
    pointer-events: none;
    aspect-ratio: 16 / 9;
    top: 0px;
    right: 0px;
}

.video-foreground iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.overlay-content {
	position: absolute;
	z-index: 1;
	color: white;
	text-align: center;
	top: 50%;
    left: 2%;
    transform: translate(0, -50%);
	width: 28vw;
}
.overlay-bg{
	position: absolute;
	width: 100vw;
	height: 100vh;
	background: #020024;
	background: linear-gradient(90deg, rgb(6 134 118) 10%, rgba(0, 212, 255, 0) 60%);
}
.powerful {
    padding: 0px 0px;
}
.creating {
    padding: 0px 0px;
}
.delivering {
    padding: 0px 0px;
}
.spread_eyes {
    padding: 0px 0px;
	background-color: #068676;
}
.engage_minds {
    padding: 0px 0px;
	background-color: #068676;
}
.inspire_action {
    padding: 0px 0px;
	background-color: #068676;
}
.client {
    padding: 0px 0px;
}
.media_partners {
    padding: 0px 0px;
}
.footer{
	background-color: #132e30;
	padding: 100px 0px;
    color: #ffffff;
}
li {
    text-align: left;
    font-size: large;
}
a:link {
    color: #ffffff;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #ffffff;
}
a:hover {
    text-decoration: none;
    color: #FFDC00;
}
a:active {
    text-decoration: none;
    color: #ffffff;
}
.dot-nav-menu{
	display: none;
}





:root { --dot-size: 4px; --dot-gap: 10px; }

  /* Progress (ถ้าไม่ใช้ ลบ div.page-progress กับโค้ด updateProgress ได้) */
  .page-progress {
    position: fixed;
    left: 0;
    height: 3px;
    width: 0%;
    background: #ffe46f;
    z-index: 1001;
    transition: width .15s linear;
    bottom: 0px;
  }
  
/* Dot nav (ขวาจอ) */
  .dot-nav {
    position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
    z-index: 99999; display: flex; flex-direction: column; gap: var(--dot-gap);
  }
  .dot-btn {
    position: relative; width: calc(var(--dot-size) + 15px); height: calc(var(--dot-size) + 15px);
    border-radius: 999px; background: transparent; border: 1px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06); cursor: pointer; display: grid; place-items: center;
  }
  .dot-btn::before {
    content: ""; width: var(--dot-size); height: var(--dot-size);
    border-radius: 999px; background: transparent; transition: transform 0s ease, background 0s ease;
	margin-left: -2px;
  }
  .dot-btn:hover::before { transform: scale(1.5); }
  .dot-btn[aria-current="true"]::before { background: #fe5916; transform: scale(3); margin-left: 0px; }

  /* Tooltip ชื่อ section */
  .dot-label {
    position: absolute; right: 150%; top: 50%; transform: translateY(-50%) translateX(6px);
    background: #fbfe67;
	background: linear-gradient(90deg, rgb(254 196 0) 0%, rgba(251, 254, 103, 1) 100%);
    color: #054901;
	font-size: larger;
	border-radius: 100px;
	padding: 8px 20px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
  }
  .dot-btn:hover .dot-label, .dot-btn:focus-visible .dot-label { opacity: 1; transform: translateY(-50%) translateX(0); }
  .dot-label::after{ content:""; position:absolute; left:100%; top:50%; transform: translateY(-50%);
    border:6px solid transparent; border-left-color:#fbfe67; margin-left: -1px;}


.wrapper { width: 100%; }

.carousel { position: relative; }
.track {
  display: flex;
  overflow-x: auto;
  gap: var(0px);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding: 0 50%;
  -webkit-overflow-scrolling: touch;
  cursor: grab;                   /* เมาส์ลากได้ */
  touch-action: pan-x;            /* รองรับลากแนวนอนบนจอสัมผัสด้วย */
}
.track::-webkit-scrollbar { display: none; }
.track { scrollbar-width: none; }
.track.dragging { cursor: grabbing; scroll-behavior: auto !important; }
.track.dragging * { user-select: none; }
.track::-webkit-scrollbar { display: none; }
.track { scrollbar-width: none; }

.slide {
  flex: 0 0 auto;
  width: var(--w, 85%);
  min-height: 260px;
  display: grid; place-items: center;
  font-size: clamp(24px, 3.5vw, 48px);
  user-select: none;
  scroll-snap-align: center;
}
/* ปิดการลากรูปภาพโดยเบราว์เซอร์ + ไม่ให้เลือก/ลาก */
.slide img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  padding: 20px;
}
.slide .tag { font-size: 14px; opacity: .75; margin-top: 8px; }

.nav_slide {
  position: absolute; bottom: -15%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  color: #fff; cursor: pointer; display: grid; place-items: center;
}
.nav_slide:hover { background: rgba(255,255,255,.2); }
.prev { left: 50%; margin-left: -30px; } .next { left: 50%; margin-left: 30px; }

[data-aos="fade-right"] {
  transform: translate3d(-20vw, 0, 0) !important;
}

[data-aos="fade-right"].aos-animate {
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-left"] {
  transform: translate3d(30vw, 0, 0) !important;
}

[data-aos="fade-left"].aos-animate {
  transform: translate3d(0, 0, 0) !important;
}

.banner-mobile{ display: none;}
.dot-nav-mobile-logo {
	position: fixed;
	z-index: 999999;
	top: 0px;
	left: 0px;
	width: 80px;
	height: auto;
	padding: 5px 10px;
}

.title_img{
	max-width: 30vw !important;
	width: 100%;
}
.title_img2{
	max-width: 40vw !important;
	width: 100%;
}
.title_img3{
	max-width: 30vw !important;
	width: 100%;
}
.textbox_img{
	padding: 1vw;
	max-width: 14vw !important;;
	width: 100%;
}
.textbox_img2{
	padding: 1vw;
	max-width: 12vw !important;;
	width: 100%;
}
.delivering_i1{
	position: absolute;
    width: 15vw;
    left: 50vw;
    bottom: 50vh;
    margin-bottom: 21.5vh;
    margin-left: -34vw;
}
.delivering_i2{
    position: absolute;
    width: 22vw;
    left: 50vw;
    bottom: 50vh;
    margin-bottom: 16vh;
    margin-left: 20vw;
}
.delivering_i3{
    position: absolute;
    width: 19vw;
    left: 50vw;
    top: 50vh;
    margin-top: 12vh;
    margin-left: -40vw;
}
.delivering_i4{
    position: absolute;
    width: 23vw;
    left: 50vw;
    top: 50vh;
    margin-top: 11vh;
    margin-left: 17vw;
}
.reel_title{
	max-width: 25vw;
	width: 100%;
	padding-bottom: 20px;
}
.reel_sub{
	font-size: 1.4vw;
    line-height: 1.6vw;
	text-align: left;
}
.reel_text{
	font-size: 1.4vw;
    line-height: 1.6vw;
    padding-bottom: 8px;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

/* ชั้น background */
.bg-bubbles {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
	width: 100vw;
    height: 100vh;
}

/* bubble ฟุ้ง ๆ (Desktop default) */
.bubble {
    position: absolute;
    top: var(--top, 50%);
    left: 50%;
    width: var(--size, 100px);
    height: var(--size, 100px);
    background: rgb(0 255 36 / 35%);
    border-radius: 50%;
    filter: blur(150px);
    transform: translate3d(-50%, -50%, 0);
    mix-blend-mode: screen;
    animation-name: float-x;
    animation-duration: var(--duration, 45s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--delay, 0s);
}

/* bubble ที่วิ่งแนวตั้ง */
.bubble.vertical {
    top: 50%;
    left: var(--left, 50%);
    animation-name: float-y;
}

/* วิ่งแนวนอน */
@keyframes float-x {
    0% {
        transform: translate3d(-150vw, -50%, 0) scale(1);
    }
    50% {
        transform: translate3d(0vw, -50%, 0) scale(1.25);
    }
    100% {
        transform: translate3d(150vw, -50%, 0) scale(1);
    }
}

/* วิ่งแนวตั้ง */
@keyframes float-y {
    0% {
        transform: translate3d(-50%, 150vh, 0) scale(1);
    }
    50% {
        transform: translate3d(-50%, 0vh, 0) scale(1.25);
    }
    100% {
        transform: translate3d(-50%, -150vh, 0) scale(1);
    }
}
.delivering_info_img{
	max-height: 80vh !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

.delivering_bg{
		margin: 0px !important;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) !important;
		
		max-width: 75vw !important;
    	max-height: 75vh;
		width: 100%;
		height: auto;
	}
















/*Mobile Portrait Overrides*/
@media (max-width: 640px) and (orientation: portrait) {

  html {
	scroll-behavior: auto;
	scroll-snap-type: y mandatory;
  	overscroll-behavior: contain;
}
  #content{
    min-height: 100dvh;   /* กันแถบ address bar */
    float: none;          /* ไม่ต้อง float บนจอเล็ก */
    overflow: hidden;
  }
  /* คอนเทนต์กลางจอ */
  .content_middle{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 100vw;
    z-index: 99999;
  }

  .banner-mobile{ display: block !important;}
	.banner-desktop{ display: none; }
	.parallax-section {
	  overflow: hidden;
	}

	.parallax-layer {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  pointer-events: none;
	}

	.parallax-layer img {
	  width: 100%;
	  height: auto;
	}
	#banner, #banner img { aspect-ratio: 9 / 16; }
	#content img, #line img { max-width: 100%; height: auto; }
	
  .powerful_img { 
	  max-width: 80% !important;
	  height: auto;
  }

  /* ข้อความทับวิดีโอ (overlay) จัดกลาง + กว้างพอดีมือถือ */
  .overlay-content {
    width: 88vw;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 8px;
    text-align: center;
  }

  /* Dot navigation: ย้ายลงล่าง ขยายพื้นที่แตะ ซ่อน tooltip */
  .dot-nav {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    top: auto;
    transform: none;
    flex-direction: row;
    gap: 10px;
    z-index: 99999;
  }
  .dot-btn {
		width: auto;
        height: auto;
        margin: 10px 10px;
        padding: 2px 30px;
        background-color: #ffffff;
        border: 1px solid #037c6c;
  }
  .dot-label {
        opacity: 1;
        left: 40px;
        right: auto;
        background: transparent;
        padding: 0px;
        border-radius: 0px;
        box-shadow: none;
		display: contents;
    }
	.dot-label::after{
		display: none;
	}

  /* Carousel: ระยะมองเห็น, ปุ่มนำทาง, slide width */
  .track { scroll-padding: 0 12%; width: 100vw; }
  .slide { --w: 88%; min-height: 220px; margin-left: -16px; }
  .nav_slide {
    bottom: 6px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40px; height: 40px;
    margin-left: 0;  /* รีเซ็ตที่ตั้งเดิม */
  }
  .prev { left: calc(50% - 52px); bottom: -40px; }
  .next { left: calc(50% + 12px); bottom: -40px; }

  /* AOS: ลดระยะเลื่อนให้พอดีจอเล็ก */
  [data-aos="fade-right"] { transform: translate3d(-16vw, 0, 0) !important; }
  [data-aos="fade-right"].aos-animate { transform: translate3d(0,0,0) !important; }

  [data-aos="fade-left"]  { transform: translate3d(16vw, 0, 0) !important; }
  [data-aos="fade-left"].aos-animate  { transform: translate3d(0,0,0) !important; }

  /* สีพื้นของแต่ละ section (คงไว้ตามเดิม) */
  .spread_eyes, .engage_minds, .inspire_action { background-color: #068676; }
	
	.dot-nav{ display: none; }
	.dot-nav-mobile{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: auto;
        background-color: #01423aed;
        z-index: 99999;
        color: #000000;
		padding: 60px 5vw 5vw 5vw;
	}
	
	.dot-btn[aria-current="true"]::before {
		transform: scale(4);
		position: absolute;
		left: 14px;
	}
	.dot-btn::before {
    	position: absolute;
		left: 14px;
	}
	.dot-nav-menu{
		display: block;
		position: fixed;
        top: 0px;
        right: 0px;
        z-index: 9999999;
        width:60px;
        height: 60px;
	}
	.delivering_bg{
		margin: 0px !important;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) !important;
		
		max-width: 90vw !important;
		max-height: 80vh;
		width: 100%;
		height: auto;
	}
	.delivering_i0{
		width: 32vw !important;
	}
	.delivering_i1{
		width: 23vw;
        margin-bottom: 7vh;
        margin-left: -39vw;
	}
	.delivering_i2{
		width: 33vw;
        margin-bottom: 4vh;
        margin-left: 15vw;
	}
	.delivering_i3{
		width: 31vw;
        margin-top: 2vh;
        margin-left: -46vw;
	}
	.delivering_i4{
		width: 36vw;
        margin-top: 1vh;
        margin-left: 13vw;
	}
	.delivering_i5{
		font-size: 9.8vw !important;
        margin-top: -32.5vh !important;
        left: 20vw !important;
	}
	.delivering_i6{
		font-size: 9.8vw !important;
        margin-top: 21.5vh !important;
        right: 10vw !important;
	}
	.client_img {
		width: auto !important;
		height: 85vw !important;
	}
	.dot-nav-mobile-logo {
        padding: 0px 10px !important;
	}
	.video-3reels{
		width: 150vw !important;
        height: auto !important;
        bottom: 0px;
        top: auto !important;
	}
	.content-3reels{
		top: 30vh;
	}
	
	.title_img{
		max-width: 80vw !important;
		width: 100%;
	}
	.title_img2{
		max-width: 80vw !important;
		width: 100%;
	}
	.title_img3{
		max-width: 80vw !important;
		width: 100%;
	}
	.textbox_img{
		padding: 1vw;
		max-width: 30vw !important;;
		width: 100%;
	}
	.textbox_img2{
		padding: 1vw;
		max-width: 24vw !important;;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 40px;
	}
	.reel_title{
		max-width: 25vw;
		width: 100%;
		padding-bottom: 20px;
	}
	.reel_sub{
		font-size: 4vw;
		line-height: 4.2vw;
	}
	.reel_text{
		font-size: 4vw;
		line-height: 4.2vw;
		padding-bottom: 8px;
	}
	.overlay-bg{
		display: none;
	}
	
	.bubble {
        /* ลดขนาดโดยรวมสำหรับมือถือ */
        width: calc(var(--size, 100px) * 0.5);
        height: calc(var(--size, 100px) * 0.5);

        /* ลด blur ให้ไม่กินพื้นที่มาก */
        filter: blur(80px);

        /* Animation เร็วขึ้นเล็กน้อยเพื่อดูเคลื่อนไหว */
        animation-duration: calc(var(--duration, 45s) * 0.7);
    }

    /* ลดช่วงการเคลื่อน เพื่อไม่ให้ไหลยาวเกินจอมือถือ */
    @keyframes float-x {
        0% {
            transform: translate3d(-120vw, -50%, 0) scale(1);
        }
        50% {
            transform: translate3d(0vw, -50%, 0) scale(1.2);
        }
        100% {
            transform: translate3d(120vw, -50%, 0) scale(1);
        }
    }

    @keyframes float-y {
        0% {
            transform: translate3d(-50%, 120vh, 0) scale(1);
        }
        50% {
            transform: translate3d(-50%, 0vh, 0) scale(1.2);
        }
        100% {
            transform: translate3d(-50%, -120vh, 0) scale(1);
        }
    }
	
	#box_partners{
		height: 200px;
	}
}