/* ZEEDA ENERGY — Thailand · video page (播放.psd)
   Standalone stylesheet: the home page carries a lot of scroll-scene CSS that
   this page has no use for, so only the shared shell (type scale, header,
   footer, gold gradient) is repeated here. */

:root{
  --ink:#051745;              /* page navy, sampled from the PSD            */
  --ink-2:#0a2050;
  --gold:#e3be7c;
  --gold-lite:#f0d7a4;
  --gold-deep:#c3903a;
  --line:#1f3264;
  --wrap:77.1vw;              /* 1480 @1920  = the PSD card width           */
  --pad:24px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.4,0,.2,1);

  --fs-h1:clamp(20px,1.875vw,44px);   /* 36 @1920 */
  --fs-h2:clamp(16px,1.25vw,30px);    /* 24 */
  --fs-18:clamp(13px,.94vw,22px);     /* 18 */
  --fs-16:clamp(12px,.833vw,20px);    /* 16 */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  /* one sheet for the whole page: the gold fronds run from the headline
     right down to the footer instead of stopping at the hero's edge */
  position:relative;isolation:isolate;
  /* the PSD’s own base: a navy that lifts towards the foot of the page */
  background:linear-gradient(180deg,#0d1226 0%,#09132e 11.5%,#182752 27%,#1a2c5e 42%,#102254 57%,#18285c 73%,#212e63 84%,#1a2550 93%,#101a38 100%);
  color:#fff;
  font-family:"Noto Sans Thai","IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-16);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--gold);color:#10131c}

.wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}

/* one gold sweep, identical to the home page headings */
.gold{
  background-image:linear-gradient(135deg,#ffffff 0%,#fffbe6 15%,#f8e389 45%,
    #ecc465 68%,#d8a94e 88%,#c3903a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ── header ───────────────────────────────────────────────────────────────
   The same bar as the home page: logo, the three section links, the TH pill
   with the round flag, and the hamburger sheet on phones. Only the colour
   states differ — this page is dark the whole way down, so the bar simply
   picks up a frosted navy once you leave the first screen. */
.head{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),-webkit-backdrop-filter .5s,backdrop-filter .5s,border-color .5s}
.head.is-solid{background:rgba(11,23,65,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-color:rgba(255,255,255,.08)}
.head__in{height:92px;display:flex;align-items:center;gap:clamp(16px,2vw,32px);pointer-events:auto}
.head__logo{display:block;flex:0 0 auto}
.head__logo img{width:112px;height:auto}
.head__nav{margin-left:auto;display:flex;gap:clamp(16px,2.4vw,44px);
  font-size:var(--fs-18);color:rgba(255,255,255,.76)}
.head__nav a{position:relative;padding:6px 0;transition:color .3s}
.head__nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease)}
.head__nav a:hover{color:#fff}
.head__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.head__lang{display:inline-flex;align-items:center;gap:8px;height:34px;
  padding:0 14px 0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  font-size:var(--fs-16);letter-spacing:.1em;color:#fff;
  transition:border-color .3s,background .3s}
.head__lang .head__flag{width:18px;height:18px;flex:0 0 18px;border-radius:50%;display:block}
.head__lang i{width:6px;height:6px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;opacity:.8;transform:rotate(45deg) translateY(-1px)}
.head__lang:hover{border-color:rgba(227,190,124,.7);background:rgba(227,190,124,.08)}
/* campaign pill in the bar — the launch key visual cut into a 92×36 capsule */
.head__ad{flex:0 0 auto;display:block;width:92px;height:36px;border-radius:999px;overflow:hidden;
  border:1px solid rgba(227,190,124,.45);transition:border-color .3s,transform .3s,box-shadow .3s}
.head__ad img{width:100%;height:100%;object-fit:cover;display:block}
.head__ad:hover{border-color:rgba(227,190,124,.95);transform:translateY(-1px);
  box-shadow:0 10px 22px -16px rgba(0,0,0,.9)}
.head__burger{display:none}
.mnav{display:none}

/* ── hero + player ────────────────────────────────────────────────────── */
.phero{position:relative;min-height:0;padding-top:15.5vh;
  /* the section ends where the design ends it: 121px below the player at
     1920×1080 (11.2vh), instead of a full screen. Keeping min-height at
     100svh pushed the film list far below the player on wide/short
     windows, which is what the PSD does not do. */
  padding-bottom:11.2vh;
  isolation:isolate;overflow:hidden}
.phero__art{display:none}
/* the art's own bottom edge melts into the flat navy of the rest of the page */


.phero__title{font-family:"Kanit",sans-serif;font-weight:500;letter-spacing:0;
  font-size:var(--fs-h1);line-height:1.62;
  text-align:center;margin:0 auto;max-width:92vw}
/* the headline is authored as two lines (the break sits inside แบบ / ฝังตัว),
   so it reads exactly like the PSD at every desktop width; on a narrow screen
   each line simply wraps inside its own block */
.phero__title .ln{display:block}

.player{position:relative;z-index:2;width:min(56.35vw,1082px);margin:4.9vh auto 0;
  aspect-ratio:1082/609;border-radius:1.25vw;overflow:hidden;
  background:#020a1e;
  box-shadow:0 30px 80px -50px rgba(0,0,0,.9)}
.player video{width:100%;height:100%;object-fit:cover;background:#020a1e}
.player__btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(48px,2.5vw,76px);aspect-ratio:1;border-radius:50%;
  background:#fff;display:grid;place-items:center;
  transition:transform .45s var(--ease),background .35s,box-shadow .45s}
.player__btn svg{width:38%;height:38%;margin-left:8%}
.player__btn svg path{fill:rgba(5,23,69,.62);transition:fill .35s}
.player__btn:hover{transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0 0 10px rgba(255,255,255,.14)}
.player__btn:hover svg path{fill:var(--ink)}
/* playing: the button steps aside so the controls get the frame */
.player.is-playing .player__btn{opacity:0;pointer-events:none}
.player__btn{opacity:1;transition:opacity .35s,transform .45s var(--ease),background .35s,box-shadow .45s}

.player__note{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  padding:8px 16px;border-radius:999px;background:rgba(3,12,32,.78);
  border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:var(--fs-16);color:rgba(255,255,255,.9);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.player__note.is-on{opacity:1}

/* ── film list ────────────────────────────────────────────────────────── */
.plist{padding-top:0;padding-bottom:1px}
.plist__in{display:flex;flex-direction:column;gap:2.4vw}

.pitem{position:relative;display:block;aspect-ratio:1483/323;
  border-radius:1vw;overflow:hidden;isolation:isolate;
  background:#081c46}
.pitem img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.pitem::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,14,38,.72) 0%,rgba(3,14,38,.34) 34%,rgba(3,14,38,0) 62%);
  transition:opacity .5s}
.pitem:hover img{transform:scale(1.035)}
.pitem__t{position:absolute;left:3.7%;bottom:12%;z-index:2;
  font-family:"Kanit",sans-serif;font-weight:500;font-size:var(--fs-h2);
  line-height:1.5;letter-spacing:0;max-width:46%}
.pitem__arrow{position:absolute;right:1.7%;top:50%;transform:translateY(-50%);z-index:2;
  width:clamp(28px,2.2vw,44px);height:clamp(28px,2.2vw,44px);
  display:grid;place-items:center;color:rgba(255,255,255,.9);
  transition:transform .5s var(--ease),color .35s}
.pitem__arrow svg{width:60%;height:60%}
.pitem:hover .pitem__arrow{transform:translateY(-50%) translateX(6px);color:#fff}
.pitem:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ── footer (same shell as the home page) ─────────────────────────────── */
.foot{margin-top:9.7vw;padding-bottom:.73vw;position:relative;z-index:2}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot__in img{width:6.46vw;min-width:92px;height:auto}
.foot__in nav{display:flex;gap:7.45vw;font-size:var(--fs-18);color:#b9bbc3}
.foot__in nav a:hover{color:#fff}
.foot__base{display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:1.2vw;padding-top:.68vw;border-top:1px solid var(--line);
  font-size:var(--fs-16);color:#b9bbc5}
.foot__base p{display:inline-flex;gap:0;white-space:nowrap}
.foot__base p span+span{margin-left:2.48vw}
.foot__base p span+span+span{margin-left:.52vw}
.foot__base a:hover{color:#fff}

/* the bar keeps its 1920 arrangement (links → capsule → TH, all pushed right)
   all the way down to the phone breakpoint; it only tightens. Dropping the
   links at 1180 left a logo-and-pill cluster marooned on the left, which is
   not the composition the design asks for. */
@media (max-width:1180px){
  .head__in{gap:clamp(12px,1.5vw,22px)}
  .head__nav{gap:clamp(12px,1.7vw,26px)}
}
@media (max-width:880px){
  .head__in{gap:12px}
  .head__nav{gap:13px}
  .head__ad{width:76px;height:30px}
  .head__lang{height:32px;padding:0 12px 0 9px}
}

/* ── phones ───────────────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{--wrap:100%;--pad:18px;--fs-h1:21px;--fs-h2:17px;--fs-18:14px;--fs-16:13px}
  .head__in{height:64px;gap:10px}
  .head__logo img{width:92px}
  .head__nav{display:none}
  .head__ad{display:none}
  .head__lang{flex:0 0 auto;padding:0 12px 0 9px;margin-left:auto}
  .head__burger{display:flex;flex:0 0 44px;margin-left:6px;flex-direction:column;
    justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;
    background:none;color:currentColor;cursor:pointer}
  .head__burger span{display:block;height:1.5px;width:100%;border-radius:2px;
    background:currentColor;transition:transform .35s var(--ease),opacity .3s var(--ease)}
  .head__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .head__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .head__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .mnav{display:block;position:fixed;inset:0;z-index:49;
    background:rgba(5,15,42,.972);-webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%);
    opacity:0;pointer-events:none;transition:opacity .38s var(--ease)}
  .mnav.is-open{opacity:1;pointer-events:auto}
  .mnav__in{display:flex;flex-direction:column;justify-content:center;height:100%;
    padding:calc(76px + env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-left))
            calc(32px + env(safe-area-inset-bottom))}
  .mnav a{display:flex;align-items:center;min-height:56px;font-size:17px;line-height:1.35;
    color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.12);
    transform:translateY(10px);opacity:0;
    transition:transform .5s var(--ease),opacity .5s var(--ease)}
  .mnav.is-open a{transform:none;opacity:1}
  .mnav.is-open a:nth-child(1){transition-delay:.06s}
  .mnav.is-open a:nth-child(2){transition-delay:.12s}
  .mnav.is-open a:nth-child(3){transition-delay:.18s}
  .mnav.is-open a:nth-child(4){transition-delay:.24s}
  .mnav a:active{color:#fff;background:rgba(255,255,255,.06)}
  .phero{height:auto;min-height:0;padding-top:104px;padding-bottom:8px}
  .phero__title{max-width:100%;line-height:1.6;
    /* the skyline glow sits right behind the headline on a phone */
    text-shadow:0 2px 22px rgba(5,23,69,.9),0 0 6px rgba(5,23,69,.6)}
  .player{width:100%;margin-top:26px;border-radius:12px}
  .player__btn{width:54px}
  .plist{padding-top:44px}
  .plist__in{gap:14px}
  .pitem{aspect-ratio:16/10;border-radius:12px}
  .pitem::after{background:linear-gradient(180deg,rgba(3,14,38,.1) 30%,rgba(3,14,38,.82) 100%)}
  .pitem__t{left:16px;right:58px;bottom:16px;max-width:none;font-size:16px;line-height:1.45}
  .pitem__arrow{right:10px}
  .foot{margin-top:64px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .foot__in{gap:14px}
  .foot__in nav{flex-wrap:wrap;gap:4px 18px;font-size:14px}
  .foot__in nav a{display:inline-flex;align-items:center;min-height:44px}
  .foot__base{flex-direction:column;align-items:flex-start;gap:6px}
  .foot__base p{flex-wrap:wrap;white-space:normal;gap:2px 14px;font-size:13px}
  .foot__base p span+span,.foot__base p span+span+span{margin-left:0}
  .foot__base a{display:inline-flex;align-items:center;min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── the eight leaf layers of 底部背景1.psd ──────────────────────────────
   Exported one by one at their native pixels instead of flattening the page
   into a single 1920-wide sheet: each frond is now sharp at any window size,
   because it is only ever scaled DOWN (width caps at its design size) and its
   position tracks the page edges rather than a fixed bitmap. */
.play-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* max-width:none is load-bearing: the page-wide img{max-width:100%} rule was
   clamping the bottom sweep to the viewport, and the .97 décor scale then ate
   ~59px off its right end — the line stopped short of the frame while the left
   end still bled off-screen. */
.play-deco img{position:absolute;height:auto;max-width:none;user-select:none;-webkit-user-drag:none}

/* ── 首屏花纹 ─────────────────────────────────────────────────────────────
   xx1.psd (1920×1080) exported layer by layer and placed exactly as drawn.
   Positions are the PSD coordinates in vw; widths are capped at 150% of the
   design size, so 1920 renders at 1:1 and 2560 at 1.33 without ever leaving
   the bitmap's native pixels. The whole layer sits at z-index:-1: headline,
   player and copy always paint above it. The bottom sweep is placed first in
   the DOM, so the fronds cover it rather than the other way round. */
.play-deco .dl{transform:translateY(-2.6042vw) scale(.97);transform-origin:50% 50%}
.play-deco .d1{left:-0.4167vw;top:10.6771vw;width:min(333px,15.0521vw)}
.play-deco .d2{left:-0.4167vw;top:51.0938vw;width:min(307px,13.9062vw)}
/* mirrored copy on the right: the PSD only supplies the left-hand one, but the
   list needs the frame to close on both sides */
.play-deco .d2r{left:86.5104vw;top:51.0938vw;width:min(307px,13.9062vw);
  transform:translateY(-2.6042vw) scale(-0.97,0.97)}
.play-deco .d3{left:96.3542vw;top:22.8646vw;width:min(158px,7.1354vw)}
.play-deco .d4{left:94.2708vw;top:12.8125vw;width:min(144px,6.5104vw)}
.play-deco .d5{left:83.5938vw;top:28.125vw;width:min(246px,11.1458vw)}
.play-deco .d6{left:89.8438vw;top:8.4896vw;width:min(247px,11.1979vw)}
.play-deco .d7{left:8.2292vw;top:25.7292vw;width:min(186px,8.3854vw)}
.play-deco .d8{left:-1.5625vw;top:30.7812vw;width:min(163px,7.3958vw)}
/* the sweep is the frame's lower edge and must bracket the viewport, so it is
   the one layer that keeps a pure-vw width (the fronds are capped at their
   native pixels). left offset is tuned so the .97 scale bleeds the same ~20px
   past both edges instead of hugging the left one and stopping inside the
   right one. */
.play-deco .d9{left:-2.54vw;top:29.7396vw;width:105.1562vw}
/* the sweep is the frame's lower edge: it travels less, so it still sits
   under the player */
.play-deco .d9{transform:translateY(-0.5208vw) scale(.97)}

.play-deco .f4{left:-2.2vw;bottom:-1vw;width:min(186px,9.7vw)}
.play-deco .f1{right:-3.23vw;bottom:0;width:min(228px,11.88vw)}

@media (max-width:760px){
  /* the phone screen is fully booked by headline + player, so only the two
     bottom corners keep a frond — anything at the top lands on the logo or
     the first line of type */
  /* the artboard is a 16:9 composition: on a phone it would only be a sliver
     at the very top, so the first screen stays clean */
  .play-deco .dl{display:none}
  /* phones have no room for the filigree: the player owns the width */
}

/* ── social rail ──────────────────────────────────────────────────────────
   Same build as the home page: five 42px glass buttons pinned to the right,
   the LINE one opening an 80×80 QR card on hover, the last one returning to
   the top. The page is dark the whole way down, so there is no is-light state. */
.side-rail{position:fixed;right:60px;top:50%;transform:translateY(-50%);z-index:45;
  display:flex;flex-direction:column;gap:8px;transition:opacity .4s var(--ease)}
.side-rail a{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);background:rgba(11,23,65,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:rgba(255,255,255,.9);transition:background .3s,color .3s,border-color .3s,transform .3s}
.side-rail a:hover{background:rgba(227,190,124,.9);color:#0a1024;border-color:rgba(227,190,124,.9);transform:translateX(-2px)}
.side-rail .rico{display:block;width:17px;height:17px;background:currentColor;
  filter:drop-shadow(0 1px 2px rgba(4,10,28,.55));
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:url(../img/icons/rail-mail.png);mask-image:url(../img/icons/rail-mail.png)}
.side-rail .rico--line{width:20px;height:20px;
  -webkit-mask-image:url(../img/icons/rail-line.png);mask-image:url(../img/icons/rail-line.png)}
.side-rail .rico--in{-webkit-mask-image:url(../img/icons/rail-linkedin.png);mask-image:url(../img/icons/rail-linkedin.png)}
.side-rail .rico--fb{-webkit-mask-image:url(../img/icons/rail-facebook.png);mask-image:url(../img/icons/rail-facebook.png)}
.side-rail .rico--top{-webkit-mask-image:url(../img/icons/rail-top.png);mask-image:url(../img/icons/rail-top.png)}
.side-rail .rail-qr{position:absolute;right:calc(100% + 14px);top:50%;
  box-sizing:border-box;width:220px;height:92px;padding:6px;border-radius:6px;
  background:#fff;display:flex;align-items:center;gap:13px;
  box-shadow:0 16px 34px -22px rgba(6,14,38,.5);
  opacity:0;pointer-events:none;
  transform:translate(10px,-50%) scale(.98);
  transition:opacity .55s var(--ease), transform .55s var(--ease)}
.side-rail .rail-qr__code{display:block;width:80px;height:80px;flex:0 0 80px}
.side-rail .rail-qr__id{font-size:15px;line-height:1;color:#4a4a4a;white-space:nowrap;
  letter-spacing:.005em;padding-right:8px}
.side-rail .rail-line:hover .rail-qr,
.side-rail .rail-line:focus-visible .rail-qr{opacity:1;transform:translate(0,-50%) scale(1)}
@media (max-width:760px){ .side-rail{display:none} }

/* ── presentation build ────────────────────────────────────────────────────
   every anchor is inert but two: the campaign capsule and the logo, which is
   the way back to index.html */
a:not(.head__ad):not(.head__logo),a:not(.head__ad):not(.head__logo) *{cursor:default}
.head__nav a::after{display:none}
.head__logo,.head__logo *{cursor:pointer}

/* ── WebKit / Safari ───────────────────────────────────────────────────────
   same treatment as the home page: prefixed blur, an opaque fallback, and
   momentum scrolling for the phone sheet */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .head.is-solid{background:rgba(8,18,50,.97)}
  .mnav{background:rgba(5,15,42,.995)}
  .side-rail a{background:rgba(11,23,65,.9)}
  .player__note{background:rgba(3,12,32,.94)}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{-webkit-appearance:none;appearance:none}
.mnav{-webkit-overflow-scrolling:touch;overflow-y:auto}