:root {
     --ink:#fff8f4;
     --muted:#aaa09b;
     --purple:#d3202f;
     --pink:#ff3347;
     --yellow:#ffc928;
     --panel:rgba(25,13,14,.76);
     --red: #ef3a47 
}
 * {
     box-sizing:border-box;
}
 html {
     scroll-behavior:smooth;
}
 body {
     margin:0;
     background:#08070b;
     color:var(--ink);
     font-family:'SF UI Display';
}
 button, input {
     font:inherit;
}
 button, a {
     -webkit-tap-highlight-color:transparent;
}
 .radio-app {
     min-height:100vh;
     overflow:hidden;
     position:relative;
     background:radial-gradient(circle at 19% 33%,rgba(203,25,42,.20),transparent 34%),linear-gradient(145deg,#0b0707 0%,#190a0c 50%,#0d0908 100%);
}
 .radio-app:before {
     content:"";
     position:absolute;
     inset:0;
     opacity:.16;
     pointer-events:none;
     background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
     background-size:54px 54px;
     mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
 .ambient {
     position:absolute;
     border-radius:50%;
     filter:blur(100px);
     pointer-events:none;
}
 .ambient-one {
     width:360px;
     height:360px;
     background:#b80f21;
     left:-180px;
     top:36%;
     opacity:.34;
}
 .ambient-two {
     width:300px;
     height:300px;
     background:#ffb100;
     right:-170px;
     top:18%;
     opacity:.10;
}
 .logo-watermark {
     position:absolute;
     width:clamp(620px,69vw,980px);
     aspect-ratio:548/530;
     left:50%;
     top:92px;
     transform:translateX(-50%) rotate(0deg);
     pointer-events:none;
     z-index:1;
     user-select:none;
}
 .logo-watermark img {
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit:contain;
}
 .watermark-shadow {
     filter:brightness(0) blur(20px);
     transform:translate(52px,64px) scale(1.02);
     opacity:.28;
}
 .watermark-outline {
     filter:brightness(0) saturate(100%) invert(79%) sepia(91%) saturate(1265%) hue-rotate(340deg) brightness(103%) contrast(105%) drop-shadow(0 0 25px rgba(255,190,28,.10));
     transform:scale(1.018);
     opacity:.055;
}
 .watermark-core {
     filter:saturate(.9) contrast(1.08);
     opacity:.042;
}
 .topbar {
     height:92px;
     max-width:1440px;
     margin:auto;
     padding:0 5vw;
     align-items:center;
     justify-content:space-between;
     border-bottom:1px solid rgba(255,255,255,.08);
     position:relative;
     z-index:10;
}
 .brand {
     color:white;
     text-decoration:none;
     display:flex;
     align-items:center;
     gap:12px;
}
 .brand-mark {
     width:46px;
     height:46px;
     display:grid;
     place-items:center;
     font-size:34px;
     font-weight:900;
     font-style:italic;
     background:linear-gradient(145deg,#ff3a45,#a60012 72%);
     box-shadow:0 0 28px rgba(255,36,55,.25);
     clip-path:polygon(14% 0,100% 0,85% 100%,0 100%);
}
 .brand b {
     display:block;
     font-size:21px;
     letter-spacing:.08em;
     line-height:1;
}
 .brand small {
     display:block;
     font-size:7px;
     letter-spacing:.24em;
     color:#c5bfca;
     margin-top:5px;
}
 .logo-top {
     position:absolute;
     left:50%;
     transform:translateX(-50%);
    z-index: 5;
     width:120px;
     padding-top: 15px 
}
 .top-actions {
     display:flex;
     align-items:center;
     gap:18px;
}
 .live-pill {
    /*padding:7px 12px;
     border:1px solid rgba(255,255,255,.12);
     border-radius:999px;
    */
     font-size:10px;
     letter-spacing:.12em;
    /*background:rgba(255,255,255,.035);
    */
     width: fit-content;
}
 .live-pill i {
     width:6px;
     height:6px;
     display:inline-block;
     background:var(--yellow);
     border-radius:50%;
     margin-right:7px;
     box-shadow:0 0 12px var(--yellow);
     animation:pulse 1.4s infinite;
}
 .player-shell {
     max-width:1260px;
     margin:auto;
     padding:30px 5vw 72px;
     position:relative;
     z-index:2;
}
 .eyebrow {
     text-align:center;
     color:#b5afbb;
     font-size:9px;
     font-weight:200;
     letter-spacing:.29em;
     margin-bottom:45px;
}
 .eyebrow strong {
     font-weight: 600 
}
 .eyebrow .red {
     color:var(--pink);
}
 .player-grid {
     display:grid;
     grid-template-columns:minmax(360px,1fr) minmax(420px,.9fr);
     align-items:center;
     gap:clamp(50px,8vw,120px);
}
 .art-stage {
     width:min(42vw,480px);
     aspect-ratio:1;
     position:relative;
     margin:auto;
}
 .art-stage:before {
     content:"";
     position:absolute;
     inset:-9%;
     border:1px solid rgba(255,255,255,.06);
     border-radius:50%;
}
 .album-art {
     width:82%;
     height:82%;
     position:absolute;
     left:0;
     top:9%;
     overflow:hidden;
     border-radius:8px;
     z-index:2;
     background: url('../images/coverxfm.png');
     background-size: cover;
     box-shadow:0 35px 80px rgba(0,0,0,.55),0 0 60px rgba(213,33,45,.18);
     isolation: isolate;
	 background-color: #171012;
}
 .album-art:before {
     content:"";
     position:absolute;
     inset:-30% -20% 30% 25%;
     background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
     transform:rotate(-25deg);
     filter:blur(16px);
}

.album-cover-layer {
  position: absolute;
  inset: 0;
  z-index: 1;

  opacity: 0;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  transform: scale(1.025);

  transition:
    opacity 0.8s ease,
    transform 1.2s ease;

  will-change:
    opacity,
    transform;
}

/*
 * ภาพที่กำลังแสดง
 */
.album-cover-layer.is-active {
  opacity: 1;
  transform: scale(1);
}

/*
 * ให้แสงตกแต่งเดิมอยู่เหนือรูป
 */
.album-art::before {
  z-index: 2;
  pointer-events: none;
}


.album-copy {
  position: absolute;
  inset: 0;
  z-index: 3;

  padding: 12%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
 .album-copy small {
     font-size:8px;
     letter-spacing:.35em;
     margin-bottom:10px;
}
 .album-copy strong {
     max-width:100%;
     font-size:clamp(34px,4.6vw,64px);
     line-height:.88;
     letter-spacing:-.08em;
     font-weight:900;
     overflow-wrap:anywhere;
     text-shadow:0 5px 25px rgba(0,0,0,.35);
}
 .album-copy span {
     margin-top:15px;
     font-size:10px;
     letter-spacing:.4em;
}
 .vinyl {
     position:absolute;
     width:68%;
     height:68%;
     top:16%;
     right:-11%;
     overflow:hidden;
     border:2px solid rgba(220,220,220,.26);
     border-radius:50%;
     background:radial-gradient(circle,transparent 0 34%,rgba(255,255,255,.09) 34.5%,transparent 36%),repeating-radial-gradient(circle,#101012 0 2px,#363638 2.8px 3.4px,#171719 4px 6px);
     box-shadow:15px 20px 50px #000,inset 5px 5px 12px rgba(255,255,255,.18),inset -8px -9px 16px rgba(0,0,0,.78),0 0 0 2px rgba(255,255,255,.04);
     transition:.5s;
}
 .vinyl:before {
     content:"";
     position:absolute;
     inset:2.5%;
     border-radius:50%;
     background:conic-gradient(from -17deg,transparent 0deg,rgba(255,255,255,.06) 5deg,rgba(255,255,255,.42) 13deg,rgba(255,255,255,.12) 24deg,transparent 38deg,transparent 82deg,rgba(255,255,255,.05) 88deg,rgba(255,255,255,.34) 101deg,rgba(255,255,255,.08) 113deg,transparent 128deg,transparent 174deg,rgba(255,255,255,.05) 180deg,rgba(255,255,255,.38) 193deg,rgba(255,255,255,.09) 205deg,transparent 220deg,transparent 264deg,rgba(255,255,255,.04) 270deg,rgba(255,255,255,.32) 283deg,rgba(255,255,255,.08) 296deg,transparent 312deg);
     -webkit-mask:radial-gradient(circle,transparent 0 36%,#000 39% 94%,transparent 97%);
     mask:radial-gradient(circle,transparent 0 36%,#000 39% 94%,transparent 97%);
     filter:blur(1.3px);
     mix-blend-mode:screen;
     opacity:.88;
}
 .vinyl-label {
     position:absolute;
     inset:34%;
     z-index:2;
     border-radius:50%;
     color:#170b04;
     background:linear-gradient(145deg,#ffd94f,#efae09);
     display:grid;
     place-content:center;
     text-align:center;
     font-weight:900;
     font-size:11px;
     line-height:1;
     box-shadow:-8px -5px 18px rgba(255,238,180,.12),9px 10px 22px rgba(0,0,0,.32);
}
 .vinyl-label small {
     font-size:7px;
     letter-spacing:.1em;
}
 .vinyl.spinning {
     animation:spin 4.6s linear infinite;
     box-shadow:15px 20px 50px #000,inset 5px 5px 12px rgba(255,255,255,.20),inset -8px -9px 16px rgba(0,0,0,.78),0 0 28px rgba(255,255,255,.08);
}
 .frequency {
     position:absolute;
     z-index:4;
     bottom:-6%;
     left:5%;
     font-size:14px;
     letter-spacing:.25em;
     transform:rotate(-90deg);
     transform-origin:left;
     color:#8d8693;
}
 .track-panel {
     max-width:510px;
}
 .now-label {
     color:#c2bbc8;
     font-size:9px;
     font-weight:700;
     letter-spacing:.28em;
     display:flex;
     align-items:center;
     gap:12px;
}
 .bars {
     width:23px;
     height:18px;
     display:flex;
     gap:2px;
     align-items:center;
}
 .bars i {
     display:block;
     width:3px;
     height:30%;
     background:linear-gradient(to top,var(--purple),var(--pink));
     border-radius:3px;
}
 .bars.active i {
     animation:eq .7s ease-in-out infinite alternate;
}
.bars.active i:nth-child(2){
    animation-delay:-.3s
}
.bars.active i:nth-child(3){
    animation-delay:-.5s
}
.bars.active i:nth-child(4){
    animation-delay:-.15s
}
.track-panel .song-title {
     font-size:clamp(48px,6vw,88px);
     line-height:.95;
     margin:25px 0 8px;
     letter-spacing:-.055em;
     font-weight:740;
     font-family: 'SF UI Display' 
}
 .track-panel h2 {
     margin:0;
     color:#ef3a47;
     font-size:clamp(24px,2.5vw,34px);
     font-weight:200;
    font-family: 'SF UI Display'
}
 .show-name {
     margin:20px 0 30px;
     font-size:9px;
     color:#7d7685;
     letter-spacing:.18em;
}
.show-name span{
    color:var(--pink);
    margin:0 7px
}
.show-name span:first-child {
     margin-left: 0px
}
 .wave {
     height:62px;
     display:flex;
     align-items:center;
     gap:3px;
     overflow:hidden;
     mask-image:linear-gradient(to right,#000 70%,transparent);
}
 .wave i {
     width:3px;
     min-height:3px;
     background:linear-gradient(to top,#bd1528,#ff3e4e 72%,#ffc928);
     border-radius:4px;
     opacity:.9;
}
 .time-row {
     display:flex;
     justify-content:space-between;
     padding-top:7px;
     border-top:1px solid rgba(255,255,255,.08);
     color:#68616e;
     letter-spacing:.1em;
}
.time-row span { font-size: 8px }
 .controls {
     display:flex;
     align-items:center;
     gap:18px;
     margin-top:35px;
}
 .controls button {
     cursor:pointer;
}
 .round {
     width:43px;
     height:43px;
     border-radius:50%;
     border:1px solid rgba(255,255,255,.12);
     background:rgba(255,255,255,.03);
     color:#c8c2cd;
     font-size:20px;
}
 .play-button {
     width:74px;
     height:74px;
     border:0;
     border-radius:50%;
     color:#1b0d04;
     font-size:22px;
     padding-left:5px;
     background:linear-gradient(145deg,#ffe05b,#f3b211);
     box-shadow:0 0 0 8px rgba(255,199,32,.08),0 12px 35px rgba(224,39,52,.34);
     transition:.2s;
}
 .play-button:hover {
     transform:scale(1.05);
}
 .volume-control {
     display:flex;
     align-items:center;
     gap:10px;
     flex:1;
     max-width:150px;
     color:#8f8795;
}
 .volume-control input {
     width:100%;
     height:3px;
     appearance:none;
     border-radius:10px;
     background:linear-gradient(to right,var(--purple) var(--volume),#302b35 var(--volume));
}
 .volume-control input::-webkit-slider-thumb {
     appearance:none;
     width:11px;
     height:11px;
     border-radius:999px;
     background:white;
     cursor: pointer
}
 .hint {
     margin:0px;
     color:#5f5865;
     font-size:9px;
     letter-spacing:.08em;
}
 .recent-section {
     max-width:1160px;
     margin:auto;
     padding:55px 5vw 70px;
     border-top:1px solid rgba(255,255,255,.08);
     position:relative;
     z-index:2;
}
 .section-heading {
     display:flex;
     align-items:end;
     justify-content:space-between;
     margin-bottom:28px;
}
.section-heading p{
    color:#e23a45;
    font-size:8px;
    letter-spacing:.3em;
    margin:0 0 8px
}
.section-heading h3{
    font-size:28px;
    margin:0
}
.section-heading button{
    border:0;
    background:none;
    color:#7d7684;
    font-size:9px;
    letter-spacing:.16em
}
.section-heading button span{
    color:var(--yellow);
    margin-left:7px
}
 .recent-list {
     display:grid;
     grid-template-columns:repeat(3,1fr);
     border:1px solid rgba(255,255,255,.08);
     border-radius:14px;
     overflow:hidden;
     background:rgba(255,255,255,.025);
}
 .recent-list article {
     min-width:0;
     display:grid;
     grid-template-columns:54px 1fr auto auto;
     align-items:center;
     gap:13px;
     padding:16px 18px;
     border-right:1px solid rgba(255,255,255,.07);
}
.recent-list article:last-child{
    border:0
}
 .track-no {
     font:9px var(--font-geist-mono);
    color:#5e5863
}
.mini-cover{
    width:54px;
    height:54px;
    border-radius:5px;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:22px;
     background: url('../images/coverx.png');
     background-size: cover;
}
.cover-coral{
    background:linear-gradient(145deg,#fd7e71,#5c1527)
}
.cover-blue{
    background:linear-gradient(145deg,#45a4ff,#27154f)
}
.cover-gold{
    background:linear-gradient(145deg,#f4ca6b,#51341e)
}
 .recent-copy {
     min-width:0;
}
.recent-copy h4{
    font-size:15px;
    margin:0 0 5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.recent-copy p{
    font-size:12px;
    color:#817a86;
    margin:0;
    white-space:nowrap
}
.recent-list time{
    font:8px var(--font-geist-mono);
    color:#625b68
}
.recent-list button{
    border:0;
    background:none;
    color:#8b8390;
    font-size:10px
}
 footer {
     min-height:88px;
     padding:24px 5vw;
     border-top:1px solid rgba(255,255,255,.06);
     display:flex;
     justify-content:space-between;
     align-items:center;
     color:#55505a;
     font-size:8px;
     letter-spacing:.2em;
     position:relative;
     z-index:2;
}
footer p{
    margin:0
}

.seo-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.station-about {
    max-width: 780px;
    margin: 48px auto 20px;
    padding: 24px;
    color: rgba(255, 255, 255, 0.01);
    line-height: 1.1;
}

.station-about h2 {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.01);
    font-size: 0.2rem;
}

 @keyframes spin {
     to {
         transform:rotate(360deg);
    }
}
 @keyframes pulse {
     50%{
        opacity:.35;
        transform:scale(.8)
    }
}
 @keyframes eq {
     to{
        height:100%
    }
}
 @media (max-width:900px){
    .logo-watermark{
        width:760px;
        top:180px;
        transform:translateX(-50 %) rotate(0deg);
        opacity:.82
    }
    .player-grid{
        grid-template-columns:1fr;
        gap:50px
    }
    .art-stage{
        width:min(78vw,440px)
    }
    .track-panel{
        margin:auto;
        width:min(90vw,520px);
        text-align:center
    }
    .now-label{
        justify-content:center
    }
    .controls{
        justify-content:center
    }
    .hint{
        margin:0px
    }
    .recent-list{
        grid-template-columns:1fr
    }
    .recent-list article{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.07)
    }
    .recent-list article:last-child{
        border:0
    }
}
 @media (max-width:560px){
    .topbar{
        height:76px;
        padding:0 20px
    }
    .brand-mark{
        width:40px;
        height:40px
    }
    .brand small{
        display:none
    }
    .station-title{
        font-size:12px;
        letter-spacing:.18em
    }
    .station-title:after{
        margin-top:7px;
        width:24px
    }
    .player-shell{
        padding:20px 20px 55px
    }
    .eyebrow{
        margin-bottom:28px
    }
    .track-panel .song-title{
        font-size:48px
    }
    .track-panel h2{
        font-size:25px
    }
    .controls{
        gap:11px
    }
    .play-button{
        width:66px;
        height:66px
    }
    .round{
        width:40px;
        height:40px
    }
    .volume-control{
        max-width:105px
    }
    .recent-section{
        padding:42px 20px 55px
    }
    .recent-list article{
        grid-template-columns:48px 1fr auto
    }
    .mini-cover{
        width:48px;
        height:48px
    }
    .recent-list time{
        display:none
    }
    footer{
        justify-content:center;
        text-align:center
    }
    footer p,footer span:last-child{
        display:none
    }
    .logo-top {
         width:90px;
         padding-top: 15px 
    }
}