#cityMap{ height:600px; border-radius:12px; }

/*Map*/
/* 🔍 search box */
.map-search{
  position:absolute;
  top:10px;
  left:50px;
  z-index:1000;
  background:#fff;
  padding:10px;
  border-radius:10px;
  width:260px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.map-search input{
  width:100%;
  padding:6px;
  border-radius:6px;
  border:1px solid #ddd;
}
.map-wrapper{
  position: relative;   /* 🔥 ตัวสำคัญ */
}

.search-result{
  max-height:200px;
  overflow-y:auto;
  margin-top:6px;
}

.search-item{
  padding:6px;
  cursor:pointer;
  border-radius:6px;
}

.search-item:hover{
  background:#f0f0f0;
}
/* ===== POPUP ANIMATION ===== */
.leaflet-popup-content-wrapper {
    border-radius: 12px;
    overflow: hidden;
   
}
.leaflet-popup-content {
    will-change: transform, opacity;
}


.leaflet-popup {
    will-change: transform, opacity;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== POPUP STYLE ===== */
.popup-card{
    font-family: 'Kanit', sans-serif;
}

.popup-title{
    font-size:16px;
    font-weight:600;
}

.popup-img{
    width:100%;
    border-radius:8px;
    margin-top:6px;
}

.popup-btn{
    margin-top:8px;
    width:100%;
    padding:6px;
    border:0;
    border-radius:6px;
    background:#007bff;
    color:#fff;
    cursor:pointer;
    transition:.2s;
}

.popup-btn:hover{
    background:#0056b3;
}
@keyframes popupZoom {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== GOOGLE MAP STYLE POPUP ===== */
.gmap-popup{
    width:260px;
    font-family:'Kanit',sans-serif;
    border-radius:12px;
    overflow:hidden;
}

/* cover image */
.gmap-cover{
    height:140px;
    background-size:cover;
    background-position:center;
    position:relative;
}

/* overlay gradient */
.gmap-cover::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,0.1),rgba(0,0,0,0.6));
}

/* title on image */
.gmap-title{
    position:absolute;
    bottom:8px;
    left:10px;
    right:10px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    z-index:2;
}

/* body */
.gmap-body{
    padding:10px;
    background:#fff;
}

.gmap-desc{
    font-size:13px;
    color:#555;
    margin-bottom:8px;
}

/* button */
.gmap-btn{
    display:block;
    width:100%;
    text-align:center;
    padding:6px;
    border-radius:6px;
    background:#007bff;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    transition:.2s;
}

.gmap-btn:hover{
    background:#0056b3;
}

    /* =========================
   COUNTER WOW EFFECT
========================= */

.views-counter-wrap{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.counter-value{
    font-weight:700;
    color:#0d6efd;
    position:relative;
    display:inline-block;
    min-width:50px;
    transition:.3s;
}

/* glow ตอน animate */
.counter-value.counting{

    animation:counterGlow 1s infinite alternate;

}

@keyframes counterGlow{

    from{
        text-shadow:
        0 0 0 rgba(13,110,253,0);
    }

    to{
        text-shadow:
        0 0 10px rgba(13,110,253,.6),
        0 0 20px rgba(13,110,253,.4),
        0 0 35px rgba(13,110,253,.3);
    }

}
.views-counter-wrap:hover .counter-value{
    transform:translateY(-2px) scale(1.05);
}
.views-counter-wrap i{
    transition:.4s;
}

.views-counter-wrap:hover i{
    transform:scale(1.2);
    color:#0d6efd;
}
.views-counter-wrap{
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(10px);
    padding:6px 12px;
    border-radius:30px;
}
.counter-value{
    background:linear-gradient(90deg,#0d6efd,#00c6ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

   <!--ข่าวประชาสัมพันธ์-->
:root{
    --news-primary:#2563eb;
    --news-secondary:#7c3aed;
    --news-accent:#ec4899;
    --news-cyan:#06b6d4;
}

/* =========================================================
SECTION
========================================================= */
.news-wow-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;

    background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 30%),
        radial-gradient(circle at bottom right, rgba(236,72,153,.08), transparent 30%),
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff,
            #eef4ff,
            #ffffff
        );
}

/* Glow */
.news-wow-section::before,
.news-wow-section::after{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    filter:blur(90px);
    opacity:.18;
    z-index:0;
}

.news-wow-section::before{
    top:-180px;
    left:-120px;
    background:#60a5fa;
}

.news-wow-section::after{
    bottom:-220px;
    right:-120px;
    background:#c084fc;
}

/* =========================================================
GRID EFFECT
========================================================= */
.news-grid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);

    background-size:40px 40px;

    mask-image:radial-gradient(circle at center, black 35%, transparent 90%);

    pointer-events:none;
}

/* =========================================================
FLOATING PARTICLES
========================================================= */
.news-particle{
    position:absolute;
    border-radius:50%;
    background:rgba(59,130,246,.12);

    animation:particleFloat 15s linear infinite;
}

.news-particle:nth-child(1){
    width:14px;
    height:14px;
    left:10%;
    top:20%;
}

.news-particle:nth-child(2){
    width:10px;
    height:10px;
    right:15%;
    top:35%;
    animation-duration:18s;
}

.news-particle:nth-child(3){
    width:22px;
    height:22px;
    left:30%;
    bottom:12%;
    animation-duration:14s;
}

.news-particle:nth-child(4){
    width:16px;
    height:16px;
    right:28%;
    bottom:18%;
    animation-duration:20s;
}

@keyframes particleFloat{
    0%{
        transform:translateY(0);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:translateY(-120px);
        opacity:0;
    }
}

/* =========================================================
GLASS BOX • Facebook Style Shine Effect
========================================================= */
.news-glass-box{
    position:static;
    z-index:1;

    border-radius:42px;
    padding:75px 55px;

    background:
        linear-gradient(
            135deg,
            rgba(255,248,252,.96),
            rgba(255,228,240,.92),
            rgba(244,236,255,.90),
            rgba(226,242,255,.94),
            rgba(255,248,252,.96)
        );

    background-size:300% 300%;

    animation:glassGradientFlow 12s ease infinite;

    border:1px solid rgba(255,255,255,.9);

    overflow:hidden;

   /* backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);*/

    box-shadow:
        0 20px 60px rgba(15,23,42,.08),
        0 8px 20px rgba(0,0,0,.03);
}

/* =========================================================
SHINE LINE
========================================================= */
.news-glass-box::after{
    content:'';

    position:absolute;
    top:0;
    left:-120%;

    width:40%;
    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.15) 20%,
            rgba(255,255,255,.65) 50%,
            rgba(255,255,255,.15) 80%,
            transparent 100%
        );

    transform:skewX(-25deg);

    animation:glassShine 5.5s linear infinite;

    pointer-events:none;
}

/* =========================================================
GRADIENT FLOW
========================================================= */
@keyframes glassGradientFlow{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

/* =========================================================
SHINE ANIMATION
========================================================= */
@keyframes glassShine{

    0%{
        left:-120%;
    }

    100%{
        left:160%;
    }
}

/* Animated Border 
.news-glass-box::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:44px;

    background:linear-gradient(
        135deg,
        #3b82f6,
        #06b6d4,
        #8b5cf6,
        #ec4899,
        #3b82f6
    );

    background-size:300% 300%;

    animation:borderFlow 8s linear infinite;

    z-index:-1;

    filter:blur(14px);
    opacity:.18;
}
    

@keyframes borderFlow{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:200% 50%;
    }
}
*/
/* =========================================================
TITLE
========================================================= */
.news-title{
    position:relative;
    z-index:2;
    margin-bottom:65px;
}

.news-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 24px;

    border-radius:60px;

    background:rgba(37,99,235,.08);

    border:1px solid rgba(37,99,235,.12);

    color:#2563eb;

    font-size:.9rem;
    font-weight:700;

    margin-bottom:26px;
}

.news-title h2{
    font-size:clamp(2.5rem,5vw,4.8rem);
    font-weight:900;
    line-height:1.15;

    margin-bottom:20px;

    background:linear-gradient(
        to right,
        #0f172a,
        #2563eb,
        #7c3aed
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.news-title p{
    max-width:760px;
    margin:auto;

    color:#475569;

    font-size:1.05rem;
    line-height:2;
}

.news-line{
    width:140px;
    height:6px;

    border-radius:50px;

    margin:28px auto 0;

    background:linear-gradient(
        90deg,
        #3b82f6,
        #8b5cf6,
        #ec4899
    );

    box-shadow:
        0 10px 30px rgba(59,130,246,.25);
}
/* =========================================================
SLIDER WRAPPER
========================================================= */
.news-slider-wrapper{
    position:relative;
    z-index:5;

    border-radius:34px;

    overflow:hidden;

    background:#fff;

    padding:20px;

    border:1px solid rgba(255,255,255,.85);

    box-shadow:
        0 20px 60px rgba(15,23,42,.08),
        0 10px 30px rgba(59,130,246,.08);

    transition:.45s ease;
}

.news-slider-wrapper:hover{
    transform:translateY(-4px);

    box-shadow:
        0 30px 70px rgba(59,130,246,.12);
}

/* Shine */
.news-slider-wrapper::after{
    content:'';
    position:absolute;
    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-20deg);

    transition:.9s;
}

.news-slider-wrapper:hover::after{
    left:140%;
}
/* =========================================================
FIX BANNER SLIDER
========================================================= */

/* กันภาพล้น */
.banner-container{
    overflow:hidden !important;
    border-radius:24px;
}

.banner-track{
    display:flex;
    align-items:stretch;
}

.banner-slide{
    overflow:hidden;
    border-radius:20px;
}

.banner-slide img{
    width:100% !important;
    height:230px !important;

    object-fit:cover;

    display:block;

    border-radius:20px;

    transition:.45s ease;
}

.banner-slide:hover img{
    transform:scale(1.04);
}

/* =========================================================
BUTTONS
========================================================= */
.banner-nav{
    z-index:30 !important;
}

.banner-nav.prev{
    left:15px !important;
}

.banner-nav.next{
    right:15px !important;
}

/* =========================================================
MODAL
========================================================= */

#imageModal{
    display:none;

    position:fixed;
    inset:0;

    width:100vw;
    height:100vh;

    background:rgba(0,0,0,.92);

    z-index:2147483647 !important;

    justify-content:center;
    align-items:center;

    flex-direction:column;

    padding:20px;
}

#imageModal.show{
    display:flex;
}

#imageModal img{
    max-width:92vw !important;
    max-height:88vh !important;

    width:auto !important;
    height:auto !important;

    object-fit:contain;

    border-radius:18px;

    box-shadow:
        0 20px 80px rgba(0,0,0,.55);
}

/* ปุ่มปิด */
#closeModal{
    position:fixed !important;

    top:18px;
    right:28px;

    color:#fff;

    font-size:42px;
    font-weight:bold;

    cursor:pointer;

    line-height:1;

    z-index:2147483647 !important;
}

/* ปุ่มเลื่อน */
.modal-nav{
    position:fixed !important;

    top:50%;
    transform:translateY(-50%);

    width:58px;
    height:58px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.18);

    color:#fff;

    font-size:2rem;

    cursor:pointer;

    transition:.3s ease;

    z-index:2147483647 !important;
}

.modal-nav:hover{
    background:rgba(255,255,255,.28);
}

.modal-prev{
    left:25px;
}

.modal-next{
    right:25px;
}

/* =========================================================
DECOR
========================================================= */
.news-decor{
    position:absolute;
    color:rgba(15,23,42,.04);
    z-index:0;
    pointer-events:none;
}

.news-decor-1{
    top:70px;
    right:70px;
    font-size:7rem;

    animation:rotateSlow 28s linear infinite;
}

.news-decor-2{
    bottom:90px;
    left:60px;
    font-size:5rem;

    animation:floatIcon 6s ease-in-out infinite;
}

@keyframes rotateSlow{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes floatIcon{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-18px);
    }
}

/* =========================================================
MOBILE
========================================================= */
@media(max-width:768px){

    .news-wow-section{
        padding:80px 0;
    }

    .news-glass-box{
        padding:40px 18px;
        border-radius:28px;
    }

    .news-title h2{
        font-size:2.4rem;
    }

    .news-title p{
        font-size:.96rem;
        line-height:1.8;
    }

    .news-slider-wrapper{
        padding:10px;
        border-radius:22px;
    }

    .banner-slide img{
        height:210px !important;
        border-radius:16px;
    }

    .banner-nav{
        width:44px;
        height:44px;
        font-size:18px;
    }

    .modal-nav{
        width:46px;
        height:46px;
        font-size:1.5rem;
    }

    .modal-prev{
        left:10px;
    }

    .modal-next{
        right:10px;
    }

    #closeModal{
        top:10px;
        right:18px;
        font-size:34px;
    }

    .news-decor-1{
        font-size:4rem;
        top:25px;
        right:15px;
    }

    .news-decor-2{
        font-size:3rem;
        left:20px;
        bottom:30px;
    }
}

:root{
    --primary:#00eaff;
    --secondary:#1877f2;
    --dark:#020617;
    --glass:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.08);
}

/* =========================
   SECTION BACKGROUND
========================= */
.facebook-wow-section{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at top left, rgba(0,234,255,.18), transparent 35%),
        radial-gradient(circle at bottom right, rgba(24,119,242,.18), transparent 35%),
        linear-gradient(135deg,#020617,#0f172a,#111827);
}

/* Aurora Animation */
.facebook-wow-section::before,
.facebook-wow-section::after{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    filter:blur(90px);
    opacity:.25;
    z-index:0;
    animation:floatGlow 10s ease-in-out infinite alternate;
}

.facebook-wow-section::before{
    top:-120px;
    left:-100px;
    background:#00eaff;
}

.facebook-wow-section::after{
    bottom:-120px;
    right:-100px;
    background:#1877f2;
    animation-delay:2s;
}

@keyframes floatGlow{
    from{
        transform:translateY(0px) scale(1);
    }
    to{
        transform:translateY(40px) scale(1.1);
    }
}

/* =========================
   GLASS CARD
========================= */
.fb-glass-card{
    position:relative;
    z-index:2;
    height:100%;
    border-radius:32px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    transition:.45s ease;
    box-shadow:
        0 10px 40px rgba(0,0,0,.25),
        inset 0 1px 1px rgba(255,255,255,.08);
}

.fb-glass-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 25px 60px rgba(0,234,255,.15),
        0 10px 35px rgba(24,119,242,.12);
}

/* Light Sweep */
.fb-glass-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:80%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );
    transform:skewX(-20deg);
    transition:.8s;
}

.fb-glass-card:hover::before{
    left:130%;
}

/* =========================
   LEFT CONTENT
========================= */
.fb-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:50px;
    background:rgba(24,119,242,.15);
    border:1px solid rgba(24,119,242,.35);
    color:#7dd3fc;
    font-size:.85rem;
    font-weight:600;
    width:max-content;
    margin-bottom:22px;
}

.fb-title{
    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.15;
    font-weight:800;
    margin-bottom:20px;

    background:linear-gradient(
        to right,
        #ffffff,
        #67e8f9,
        #38bdf8
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.fb-desc{
    color:#cbd5e1;
    line-height:1.9;
    font-size:1rem;
}

/* =========================
   BUTTON
========================= */
.fb-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:28px;
    padding:14px 28px;
    border-radius:60px;
    text-decoration:none;
    color:#fff;
    font-weight:600;

    background:linear-gradient(
        135deg,
        #00c6ff,
        #1877f2
    );

    box-shadow:
        0 10px 25px rgba(0,234,255,.2);

    transition:.35s ease;
}

.fb-btn:hover{
    transform:translateY(-3px) scale(1.03);
    color:#fff;
    box-shadow:
        0 20px 40px rgba(0,234,255,.35);
}

/* =========================
   FACEBOOK FRAME
========================= */
.fb-frame{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    min-height:540px;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* Neon Border Animation */
.fb-frame::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:30px;

    background:linear-gradient(
        45deg,
        #00eaff,
        #1877f2,
        #00eaff
    );

    background-size:300% 300%;
    animation:borderFlow 6s linear infinite;
    z-index:-1;
}

@keyframes borderFlow{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

.fb-responsive-container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    padding:10px;
}

/* Floating Facebook Icon */
.fb-floating-icon{
    position:absolute;
    top:18px;
    right:18px;
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;

    background:linear-gradient(135deg,#1877f2,#00c6ff);

    color:#fff;
    font-size:1.4rem;

    box-shadow:
        0 0 25px rgba(24,119,242,.4);

    animation:floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* =========================
   MOBILE
========================= */
@media(max-width:768px){

    .facebook-wow-section{
        padding:60px 0;
    }

    .fb-frame{
        min-height:auto;
        padding:12px;
    }

    .fb-responsive-container .fb-page,
    .fb-responsive-container .fb-page span,
    .fb-responsive-container .fb-page iframe{
        max-width:100% !important;
    }

    .fb-responsive-container .fb-page{
        transform:scale(.93);
        transform-origin:top center;
        margin-bottom:-35px;
    }

    .fb-glass-card{
        border-radius:24px;
    }

    .fb-title{
        font-size:2rem;
    }
}

@media(max-width:420px){

    .fb-responsive-container .fb-page{
        transform:scale(.82);
        margin-bottom:-85px;
    }

}
/*service-section*/
:root{
    --primary:#00d4ff;
    --secondary:#5b5ffb;
    --danger:#ff4d6d;
    --dark:#020617;
    --glass:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.10);
}

/* =========================
SECTION
========================= */
.service-bg-wrap{
    position:relative;
    overflow:hidden;
    padding:100px 0;

    background:
        radial-gradient(circle at top left, rgba(255,140,66,.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(255,196,113,.15), transparent 30%),
        linear-gradient(180deg,#f8fafc,#ffffff,#fff7ed);

    border-top:1px solid rgba(255,255,255,.7);
    border-bottom:1px solid rgba(255,255,255,.8);
}

/* Glow Background */
.service-bg-wrap::before,
.service-bg-wrap::after{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    filter:blur(80px);
    opacity:.25;
    z-index:0;
}

.service-bg-wrap::before{
    top:-100px;
    left:-100px;
    background:#ffb347;
}

.service-bg-wrap::after{
    bottom:-120px;
    right:-100px;
    background:#ffd699;
}

/* =========================
TITLE
========================= */

.service-title h2{
    font-size:clamp(2rem,4vw,3.3rem);
    font-weight:800;

    background:linear-gradient(
        135deg,
        #ea580c,
        #f59e0b
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:none;
}

.service-title p{
    color:#64748b !important;
    font-size:1rem;
    letter-spacing:.2px;
}

.service-line{
    width:90px;
    height:5px;
    border-radius:20px;
    margin:18px auto;

    background:linear-gradient(
        90deg,
        #f97316,
        #fb923c
    );

    box-shadow:
        0 4px 18px rgba(249,115,22,.35);
}

/* =========================
SERVICE CARD
========================= */

.service-card{
    position:relative;
    z-index:2;
    height:100%;
    border-radius:30px;

    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.9);

    overflow:hidden;

    transition:.45s ease;

    box-shadow:
        0 10px 30px rgba(15,23,42,.08),
        0 4px 10px rgba(0,0,0,.03);
}

/* Hover Border */
.service-card::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:30px;
    padding:1px;

    background:linear-gradient(
        135deg,
        #f97316,
        #f59e0b,
        #fb7185
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    opacity:0;
    transition:.4s ease;
}

.service-card:hover::before{
    opacity:1;
}

/* Shine */
.service-card::after{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    transform:skewX(-20deg);
    transition:.9s;
}

.service-card:hover::after{
    left:130%;
}

.service-card:hover{
    transform:translateY(-10px);

    box-shadow:
        0 20px 45px rgba(249,115,22,.18),
        0 10px 20px rgba(251,146,60,.12);
}

/* =========================
CARD LINK
========================= */

.service-card a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    min-height:230px;
    padding:30px 20px;

    text-align:center;
    text-decoration:none;
}

/* =========================
ICON
========================= */

.service-icon{
    width:90px;
    height:90px;
    border-radius:26px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:24px;

    background:linear-gradient(
        135deg,
        #fff7ed,
        #ffedd5
    );

    border:1px solid rgba(249,115,22,.12);

    box-shadow:
        0 10px 25px rgba(249,115,22,.12);

    transition:.45s ease;
}

.service-icon i{
    font-size:2.4rem;

    background:linear-gradient(
        135deg,
        #f97316,
        #ea580c
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.service-card:hover .service-icon{
    transform:translateY(-6px) scale(1.08) rotate(4deg);

    box-shadow:
        0 18px 35px rgba(249,115,22,.22);
}

/* =========================
TEXT
========================= */

.service-card h6{
    color:#0f172a;
    font-weight:700;
    font-size:1rem;
    line-height:1.7;
    margin:0;

    transition:.3s ease;
}

.service-card:hover h6{
    color:#ea580c;
}

/* =========================
PARTICLES
========================= */

.service-particle{
    position:absolute;
    border-radius:50%;
    background:rgba(249,115,22,.15);
    animation:particleFloat 12s linear infinite;
}

.service-particle:nth-child(1){
    width:14px;
    height:14px;
    left:10%;
    top:20%;
}

.service-particle:nth-child(2){
    width:18px;
    height:18px;
    right:15%;
    top:30%;
}

.service-particle:nth-child(3){
    width:10px;
    height:10px;
    left:30%;
    bottom:10%;
}

@keyframes particleFloat{
    0%{
        transform:translateY(0px);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:translateY(-80px);
        opacity:0;
    }
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

    .service-bg-wrap{
        padding:70px 0;
    }

    .service-card a{
        min-height:190px;
        padding:25px 15px;
    }

    .service-icon{
        width:75px;
        height:75px;
    }

    .service-icon i{
        font-size:2rem;
    }

    .service-title h2{
        font-size:2rem;
    }
}
/*ULTRA WOW URGENT NEWS SECTION
Cyber Emergency Glassmorphism • แตกต่างจากบริการออนไลน์
*/


:root{
    --urgent-red:#ef4444;
    --urgent-pink:#ec4899;
    --urgent-orange:#f97316;
    --urgent-dark:#0f172a;
    --urgent-blue:#2563eb;
}

/* =========================================================
SECTION
========================================================= */
.urgent-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;

    background:
        radial-gradient(circle at top left, rgba(239,68,68,.22), transparent 28%),
        radial-gradient(circle at bottom right, rgba(249,115,22,.18), transparent 30%),
        linear-gradient(
            135deg,
            #18090b 0%,
            #220b11 20%,
            #0f172a 55%,
            #1e0b14 100%
        );

    isolation:isolate;
}

/* =========================================================
CYBER GRID
========================================================= */
.urgent-grid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(239,68,68,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239,68,68,.04) 1px, transparent 1px);

    background-size:42px 42px;

    mask-image:
        radial-gradient(circle at center,
        rgba(0,0,0,1) 30%,
        transparent 90%);

    pointer-events:none;
}

/* =========================================================
GLOW EFFECT
========================================================= */
.urgent-section::before,
.urgent-section::after{
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    filter:blur(100px);
    opacity:.18;
    z-index:-1;
}

.urgent-section::before{
    top:-180px;
    left:-140px;
    background:#ef4444;
}

.urgent-section::after{
    bottom:-220px;
    right:-140px;
    background:#f97316;
}

/* =========================================================
PARTICLES
========================================================= */
.alert-particle{
    position:absolute;
    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(239,68,68,.18),
        rgba(249,115,22,.12)
    );

    box-shadow:
        0 0 30px rgba(239,68,68,.16);

    animation:floatAlert 15s linear infinite;
}

.alert-particle:nth-child(1){
    width:16px;
    height:16px;
    left:10%;
    top:20%;
}

.alert-particle:nth-child(2){
    width:20px;
    height:20px;
    right:15%;
    top:35%;
    animation-duration:18s;
}

.alert-particle:nth-child(3){
    width:12px;
    height:12px;
    left:35%;
    bottom:12%;
    animation-duration:13s;
}

@keyframes floatAlert{
    0%{
        transform:translateY(0);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:translateY(-140px);
        opacity:0;
    }
}

/* =========================================================
TITLE
========================================================= */
.urgent-title{
    position:relative;
    z-index:2;
    margin-bottom:70px;
}

.urgent-live-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 26px;

    border-radius:60px;

    background:rgba(239,68,68,.08);

    border:1px solid rgba(239,68,68,.14);

    color:#dc2626;

    font-size:.92rem;
    font-weight:800;

    margin-bottom:28px;

    box-shadow:
        0 12px 25px rgba(239,68,68,.08);

    animation:pulseBadge 2s infinite;
}

.urgent-live-dot{
    width:10px;
    height:10px;
    border-radius:50%;

    background:#ef4444;

    animation:livePulse 1.5s infinite;
}

@keyframes livePulse{
    0%{
        box-shadow:0 0 0 0 rgba(239,68,68,.45);
    }
    70%{
        box-shadow:0 0 0 14px rgba(239,68,68,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(239,68,68,0);
    }
}

@keyframes pulseBadge{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.03);
    }
}

.urgent-title h2{
    font-size:clamp(2.5rem,5vw,5rem);
    font-weight:900;
    line-height:1.1;

    margin-bottom:24px;

    background:linear-gradient(
        to right,
        #991b1b,
        #ef4444,
        #f97316
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.urgent-title p{
    max-width:760px;
    margin:auto;

    color:#64748b;

    font-size:1.08rem;
    line-height:2;
}

.urgent-line{
    width:150px;
    height:6px;

    border-radius:50px;

    margin:30px auto 0;

    background:linear-gradient(
        90deg,
        #ef4444,
        #f97316,
        #ec4899
    );

    box-shadow:
        0 10px 30px rgba(239,68,68,.22);
}

/* =========================================================
CARD
========================================================= */
.urgent-card-refined{
    position:relative;

    height:100%;
    display:flex;
    flex-direction:column;

    padding:38px;

    border-radius:34px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.82),
            rgba(255,255,255,.72)
        );

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.95);

    overflow:hidden;

    transition:.45s ease;

    box-shadow:
        0 20px 55px rgba(239,68,68,.08),
        0 10px 20px rgba(0,0,0,.03);
}

/* Glow Border */
.urgent-card-refined::before{
    content:'';

    position:absolute;
    inset:-2px;

    border-radius:36px;

    background:linear-gradient(
        135deg,
        #ef4444,
        #f97316,
        #ec4899,
        #ef4444
    );

    background-size:300% 300%;

    animation:borderFlow 8s linear infinite;

    z-index:-1;

    filter:blur(14px);

    opacity:.16;
}

@keyframes borderFlow{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:200% 50%;
    }
}

/* Hover */
.urgent-card-refined:hover{
    transform:translateY(-14px);

    box-shadow:
        0 35px 80px rgba(239,68,68,.16),
        0 16px 30px rgba(0,0,0,.05);
}

/* Shine */
.urgent-card-refined::after{
    content:'';

    position:absolute;
    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-20deg);

    transition:.9s;
}

.urgent-card-refined:hover::after{
    left:140%;
}

/* =========================================================
META
========================================================= */
.meta-info{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;

    margin-bottom:24px;
}

.badge-urgent{
    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    color:#fff;

    padding:10px 18px;

    border-radius:50px;

    font-size:.82rem;
    font-weight:800;

    box-shadow:
        0 10px 25px rgba(239,68,68,.25);
}

.meta-info small{
    color:#64748b !important;
    font-weight:600;
}

/* =========================================================
VIEW COUNTER
========================================================= */
.views-counter-wrap{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:8px 14px;

    border-radius:50px;

    background:#fff1f2;

    border:1px solid rgba(239,68,68,.10);

    color:#dc2626;

    font-weight:700;
}

.views-counter-wrap i{
    color:#ef4444;
}

.counter-value{
    color:#0f172a !important;
    font-weight:900;
}

/* =========================================================
TITLE LINK
========================================================= */
.news-title-link{
    font-size:1.45rem;
    font-weight:900;
    line-height:1.6;

    color:#0f172a;
    text-decoration:none;

    margin-bottom:20px;

    transition:.35s;
}

.news-title-link:hover{
    color:#dc2626;
}

/* =========================================================
EXCERPT
========================================================= */
.news-excerpt{
    color:#64748b;

    line-height:1.9;

    font-size:1rem;

    margin-bottom:28px;
}

/* =========================================================
BUTTON
========================================================= */
.btn-read-more{
    border:none !important;

    padding:13px 26px !important;

    border-radius:50px !important;

    background:linear-gradient(
        135deg,
        #ef4444,
        #f97316
    ) !important;

    color:#fff !important;

    font-weight:800 !important;

    box-shadow:
        0 12px 30px rgba(239,68,68,.25);

    transition:.35s ease !important;
}

.btn-read-more:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(239,68,68,.35);
}

/* =========================================================
DECOR ICONS
========================================================= */
.alert-decor{
    position:absolute;
    color:rgba(239,68,68,.04);
    z-index:0;
    pointer-events:none;
}

.alert-decor-1{
    top:80px;
    right:70px;
    font-size:7rem;

    animation:rotateSlow 28s linear infinite;
}

.alert-decor-2{
    bottom:90px;
    left:60px;
    font-size:5rem;

    animation:floatIcon 6s ease-in-out infinite;
}

@keyframes rotateSlow{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes floatIcon{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-18px);
    }
}

/* =========================================================
MOBILE
========================================================= */
@media(max-width:768px){

    .urgent-section{
        padding:80px 0;
    }

    .urgent-title h2{
        font-size:2.5rem;
    }

    .urgent-title p{
        font-size:.96rem;
        line-height:1.8;
    }

    .urgent-card-refined{
        padding:28px 22px;
        border-radius:26px;
    }

    .news-title-link{
        font-size:1.15rem;
    }

    .alert-decor-1{
        font-size:4rem;
        top:30px;
        right:20px;
    }

    .alert-decor-2{
        font-size:3rem;
        left:20px;
        bottom:40px;
    }
}

/*-- =========================================================
🔥 ULTRA WOW LATEST NEWS SECTION
Glassmorphism + Neon Glow + Premium Modern UI
========================================================= */
:root{
    --latest-blue:#2563eb;
    --latest-cyan:#06b6d4;
    --latest-purple:#7c3aed;
    --latest-pink:#ec4899;
    --latest-dark:#0f172a;
}

/* =========================================================
SECTION
========================================================= */
.latest-news-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;

    /* 🔥 NEW BG • แตกต่างจากข่าวด่วน */
    background:
        radial-gradient(circle at top left, rgba(6,182,212,.10), transparent 28%),
        radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30%),
        radial-gradient(circle at bottom left, rgba(124,58,237,.08), transparent 28%),
        linear-gradient(
            180deg,
            #f4faff 0%,
            #eef6ff 35%,
            #ffffff 70%,
            #f8fbff 100%
        );

    isolation:isolate;
}

/* =========================================================
CYBER GLOW
========================================================= */
.latest-news-section::before,
.latest-news-section::after{
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    filter:blur(100px);
    opacity:.22;
    z-index:-1;
}

/* Cyan Glow */
.latest-news-section::before{
    top:-180px;
    left:-140px;
    background:#06b6d4;
}

/* Purple Glow */
.latest-news-section::after{
    bottom:-220px;
    right:-140px;
    background:#7c3aed;
}

/* =========================================================
GRID EFFECT
========================================================= */
.latest-grid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.04) 1px, transparent 1px);

    background-size:42px 42px;

    mask-image:
        radial-gradient(circle at center,
        rgba(0,0,0,1) 35%,
        transparent 90%);

    pointer-events:none;
}

/* =========================================================
FLOATING PARTICLES
========================================================= */
.latest-particle{
    position:absolute;
    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(6,182,212,.22),
        rgba(59,130,246,.16)
    );

    backdrop-filter:blur(10px);

    box-shadow:
        0 0 25px rgba(6,182,212,.18);

    animation:floatParticle 15s linear infinite;
}

.latest-particle:nth-child(1){
    width:16px;
    height:16px;
    left:10%;
    top:20%;
}

.latest-particle:nth-child(2){
    width:12px;
    height:12px;
    right:15%;
    top:35%;
    animation-duration:18s;
}

.latest-particle:nth-child(3){
    width:24px;
    height:24px;
    left:30%;
    bottom:12%;
    animation-duration:14s;
}

@keyframes floatParticle{
    0%{
        transform:translateY(0);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:translateY(-120px);
        opacity:0;
    }
}

/* =========================================================
TITLE
========================================================= */
.latest-title{
    position:relative;
    z-index:2;
    margin-bottom:70px;
}

.latest-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 24px;

    border-radius:60px;

    background:rgba(6,182,212,.08);

    border:1px solid rgba(6,182,212,.14);

    color:#0891b2;

    font-size:.9rem;
    font-weight:800;

    margin-bottom:28px;

    box-shadow:
        0 10px 25px rgba(6,182,212,.08);
}

.latest-live-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#06b6d4;

    animation:livePulse 1.5s infinite;
}

@keyframes livePulse{
    0%{
        box-shadow:0 0 0 0 rgba(6,182,212,.45);
    }
    70%{
        box-shadow:0 0 0 14px rgba(6,182,212,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(6,182,212,0);
    }
}

.latest-title h2{
    font-size:clamp(2.5rem,5vw,5rem);
    font-weight:900;
    line-height:1.1;

    margin-bottom:22px;

    background:linear-gradient(
        to right,
        #0f172a,
        #0891b2,
        #2563eb,
        #7c3aed
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.latest-title p{
    max-width:760px;
    margin:auto;

    color:#64748b;

    font-size:1.08rem;
    line-height:2;
}

.latest-line{
    width:150px;
    height:6px;

    border-radius:50px;

    margin:30px auto 0;

    background:linear-gradient(
        90deg,
        #06b6d4,
        #2563eb,
        #7c3aed
    );

    box-shadow:
        0 10px 30px rgba(37,99,235,.22);
}

/* =========================================================
MAIN CARD
========================================================= */
.news-main-card{
    position:relative;
    height:100%;

    border-radius:36px;
    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.82),
            rgba(255,255,255,.72)
        );

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.95);

    box-shadow:
        0 20px 50px rgba(37,99,235,.08),
        0 10px 20px rgba(0,0,0,.03);

    transition:.45s ease;
}

.news-main-card:hover{
    transform:translateY(-14px);

    box-shadow:
        0 35px 80px rgba(6,182,212,.16),
        0 18px 35px rgba(0,0,0,.06);
}

/* Border Glow */
.news-main-card::before{
    content:'';

    position:absolute;
    inset:-2px;

    border-radius:38px;

    background:linear-gradient(
        135deg,
        #06b6d4,
        #2563eb,
        #7c3aed,
        #ec4899,
        #06b6d4
    );

    background-size:300% 300%;

    animation:borderFlow 8s linear infinite;

    z-index:-1;

    filter:blur(14px);

    opacity:.18;
}

@keyframes borderFlow{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:200% 50%;
    }
}

/* =========================================================
IMAGE
========================================================= */
.img-zoom-wrapper{
    position:relative;
    overflow:hidden;
}

.main-news-img{
    width:100%;
    height:460px;
    object-fit:cover;

    transition:1s ease;
}

.news-main-card:hover .main-news-img{
    transform:scale(1.08);
}

/* Overlay */
.img-zoom-wrapper::after{
    content:'';

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(15,23,42,.75),
        rgba(15,23,42,.15) 45%,
        transparent 70%
    );
}

/* =========================================================
BADGE
========================================================= */
.category-badge{
    position:absolute;
    top:20px;
    left:20px;

    z-index:3;

    padding:10px 18px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #06b6d4,
        #2563eb
    );

    color:#fff;

    font-size:.85rem;
    font-weight:800;

    box-shadow:
        0 10px 25px rgba(6,182,212,.25);
}

/* =========================================================
CONTENT
========================================================= */
.news-main-content{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:4;

    padding:34px;
}

.news-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;

    color:#e2e8f0;

    font-size:.9rem;
    font-weight:600;
}

.news-main-content .title{
    font-size:2rem;
    font-weight:900;
    line-height:1.5;

    color:#fff;

    margin-bottom:14px;

    text-shadow:
        0 4px 12px rgba(0,0,0,.35);
}

.excerpt{
    color:#e2e8f0;
    line-height:1.8;
}

/* =========================================================
SIDE CARD
========================================================= */
.news-list-card{
    position:relative;

    border-radius:28px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.82),
            rgba(255,255,255,.72)
        );

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.95);

    box-shadow:
        0 20px 50px rgba(37,99,235,.08),
        0 10px 20px rgba(0,0,0,.03);

    transition:.4s ease;
}

.news-list-card:hover{
    transform:translateX(10px);

    box-shadow:
        0 25px 50px rgba(37,99,235,.12);
}

/* =========================================================
LINK
========================================================= */
.card-link{
    display:flex;
    align-items:center;
    gap:18px;

    padding:16px;

    text-decoration:none;
}

/* =========================================================
THUMB
========================================================= */
.card-thumb{
    width:130px;
    min-width:130px;

    height:110px;

    border-radius:20px;

    overflow:hidden;
}

.card-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:.6s ease;
}

.news-list-card:hover .card-thumb img{
    transform:scale(1.08);
}

/* =========================================================
INFO
========================================================= */
.card-info{
    flex:1;
}

.card-info .title{
    font-size:1rem;
    font-weight:800;
    line-height:1.7;

    color:#0f172a;

    margin-bottom:12px;

    transition:.3s;
}

.news-list-card:hover .title{
    color:#0891b2;
}

.meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    flex-wrap:wrap;

    color:#64748b;
}

/* =========================================================
VIEWS
========================================================= */
.views-counter-wrap{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:8px 14px;

    border-radius:50px;

    background:#ecfeff;

    border:1px solid rgba(6,182,212,.12);

    color:#0891b2;

    font-weight:700;
}

.views-counter-wrap i{
    color:#06b6d4;
}

.counter-value{
    color:#0f172a !important;
    font-weight:900;
}

/* =========================================================
DECOR
========================================================= */
.latest-decor{
    position:absolute;
    color:rgba(15,23,42,.04);
    z-index:0;
    pointer-events:none;
}

.latest-decor-1{
    top:80px;
    right:70px;
    font-size:7rem;

    animation:rotateSlow 28s linear infinite;
}

.latest-decor-2{
    bottom:90px;
    left:60px;
    font-size:5rem;

    animation:floatIcon 6s ease-in-out infinite;
}

@keyframes rotateSlow{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes floatIcon{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-18px);
    }
}

/* =========================================================
MOBILE
========================================================= */
@media(max-width:768px){

    .latest-news-section{
        padding:80px 0;
    }

    .latest-title h2{
        font-size:2.5rem;
    }

    .latest-title p{
        font-size:.96rem;
        line-height:1.8;
    }

    .main-news-img{
        height:300px;
    }

    .news-main-content{
        padding:24px;
    }

    .news-main-content .title{
        font-size:1.3rem;
    }

    .card-link{
        flex-direction:column;
        align-items:flex-start;
    }

    .card-thumb{
        width:100%;
        height:200px;
    }

    .latest-decor-1{
        font-size:4rem;
        top:30px;
        right:20px;
    }

    .latest-decor-2{
        font-size:3rem;
        left:20px;
        bottom:40px;
    }
}

/*จัดซื้อจัดจ้าง*/

:root{
    --egp-primary:#2563eb;
    --egp-secondary:#06b6d4;
    --egp-accent:#8b5cf6;
    --egp-pink:#ec4899;
}

/* =========================================================
SECTION
========================================================= */
.procurement-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;

    background:
        radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(236,72,153,.10), transparent 30%),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 35%,
            #fff6fb 70%,
            #ffffff 100%
        );
}

/* Glow */
.procurement-section::before,
.procurement-section::after{
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    filter:blur(100px);
    opacity:.16;
    z-index:0;
}

.procurement-section::before{
    top:-180px;
    left:-120px;
    background:#60a5fa;
}

.procurement-section::after{
    bottom:-220px;
    right:-140px;
    background:#f472b6;
}

/* =========================================================
GRID EFFECT
========================================================= */
.procurement-grid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);

    background-size:42px 42px;

    mask-image:radial-gradient(circle at center, black 35%, transparent 90%);
    pointer-events:none;
}

/* =========================================================
TITLE
========================================================= */
.procurement-title{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:70px;
}

.procurement-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 24px;

    border-radius:60px;

    background:rgba(37,99,235,.08);

    border:1px solid rgba(37,99,235,.12);

    color:#2563eb;

    font-size:.9rem;
    font-weight:800;

    margin-bottom:22px;
}

.procurement-title h2{
    font-size:clamp(2.3rem,5vw,4.2rem);
    font-weight:900;
    line-height:1.2;

    margin-bottom:18px;

    background:linear-gradient(
        135deg,
        #0f172a,
        #2563eb,
        #ec4899
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.procurement-title p{
    max-width:760px;
    margin:auto;

    color:#475569;

    font-size:1.05rem;
    line-height:2;
}

.procurement-line{
    width:130px;
    height:6px;

    border-radius:30px;

    margin:30px auto 0;

    background:linear-gradient(
        90deg,
        #2563eb,
        #8b5cf6,
        #ec4899
    );

    background-size:200% auto;

    animation:lineMove 5s linear infinite;
}

@keyframes lineMove{
    from{
        background-position:0% center;
    }
    to{
        background-position:200% center;
    }
}

/* =========================================================
CARD
========================================================= */
.procurement-card{
    position:relative;

    display:block;

    height:100%;

    border-radius:34px;

    overflow:hidden;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(248,250,255,.88),
            rgba(255,244,250,.84)
        );

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
        0 18px 50px rgba(15,23,42,.08),
        0 6px 16px rgba(0,0,0,.03);

    transition:.5s cubic-bezier(.17,.67,.25,1);

    isolation:isolate;
}

/* Animated Border */
.procurement-card::before{
    content:'';

    position:absolute;
    inset:-1px;

    border-radius:34px;
    padding:1px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #06b6d4,
        #8b5cf6,
        #ec4899,
        #2563eb
    );

    background-size:300% 300%;

    animation:borderMove 6s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    opacity:0;
    transition:.45s ease;
}

.procurement-card:hover::before{
    opacity:1;
}

@keyframes borderMove{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:200% 50%;
    }
}

/* Shine */
.procurement-card::after{
    content:'';

    position:absolute;
    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:skewX(-20deg);

    transition:.9s;
}

.procurement-card:hover::after{
    left:140%;
}

/* Hover */
.procurement-card:hover{
    transform:
        translateY(-12px)
        scale(1.02);

    box-shadow:
        0 28px 70px rgba(37,99,235,.14),
        0 18px 40px rgba(236,72,153,.10);
}

/* =========================================================
IMAGE
========================================================= */
.procurement-thumb{
    position:relative;
    overflow:hidden;
    height:240px;
}

.procurement-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

.procurement-card:hover .procurement-thumb img{
    transform:scale(1.08);
}

/* Overlay */
.procurement-thumb::before{
    content:'';

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(15,23,42,.72),
        rgba(15,23,42,.08),
        transparent
    );

    z-index:1;
}

/* Floating Badge */
.procurement-badge-float{
    position:absolute;

    top:18px;
    left:18px;

    z-index:3;

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    border-radius:50px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.25);

    color:#fff;

    font-size:.78rem;
    font-weight:800;
}

/* =========================================================
CONTENT
========================================================= */
.procurement-content{
    padding:28px;
}

.procurement-content h3{
    font-size:1.08rem;
    font-weight:800;
    line-height:1.7;

    color:#0f172a;

    margin-bottom:24px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    transition:.3s ease;
}

.procurement-card:hover h3{
    color:#2563eb;
}

/* =========================================================
META
========================================================= */
.procurement-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.procurement-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:9px 14px;

    border-radius:50px;

    background:#f1f5f9;

    color:#334155;

    font-size:.78rem;
    font-weight:700;
}

.procurement-meta i{
    color:#2563eb;
}

/* =========================================================
BUTTON
========================================================= */
.procurement-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:18px 38px;

    border-radius:60px;

    text-decoration:none;
    font-weight:800;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #8b5cf6,
        #ec4899
    );

    background-size:200% auto;

    animation:btnMove 5s linear infinite;

    box-shadow:
        0 18px 40px rgba(37,99,235,.22);

    transition:.4s ease;
}

@keyframes btnMove{
    from{
        background-position:0% center;
    }
    to{
        background-position:200% center;
    }
}

.procurement-btn:hover{
    transform:
        translateY(-4px)
        scale(1.03);

    color:#fff;

    box-shadow:
        0 25px 60px rgba(37,99,235,.30);
}

/* =========================================================
MOBILE
========================================================= */
@media(max-width:768px){

    .procurement-section{
        padding:80px 0;
    }

    .procurement-title h2{
        font-size:2.3rem;
    }

    .procurement-thumb{
        height:220px;
    }

    .procurement-content{
        padding:22px;
    }

    .procurement-content h3{
        font-size:1rem;
    }
}

/* =========================================================
🌍 ULTRA WOW TOURISM SECTION
Glassmorphism + Aurora + Floating Lights
========================================================= */
:root{
    --tour-primary:#06b6d4;
    --tour-secondary:#0ea5e9;
    --tour-accent:#8b5cf6;
    --tour-dark:#020617;
}

/* =========================================================
SECTION
========================================================= */
.tourism-wow-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;

    background:
        radial-gradient(circle at top left, rgba(6,182,212,.14), transparent 30%),
        radial-gradient(circle at bottom right, rgba(139,92,246,.12), transparent 30%),
        linear-gradient(135deg,#020617,#0f172a,#111827);

    isolation:isolate;
}

/* =========================================================
AURORA EFFECT
========================================================= */
.tourism-wow-section::before,
.tourism-wow-section::after{
    content:'';
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    filter:blur(100px);
    opacity:.22;
    z-index:-1;
}

.tourism-wow-section::before{
    top:-180px;
    left:-150px;
    background:#06b6d4;
    animation:auroraMove 12s ease-in-out infinite alternate;
}

.tourism-wow-section::after{
    bottom:-220px;
    right:-120px;
    background:#8b5cf6;
    animation:auroraMove 14s ease-in-out infinite alternate-reverse;
}

@keyframes auroraMove{
    from{
        transform:translateY(0) scale(1);
    }
    to{
        transform:translateY(60px) scale(1.15);
    }
}

/* =========================================================
FLOATING PARTICLES
========================================================= */
.tour-particle{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(4px);
    animation:particleFloat 15s linear infinite;
}

.tour-particle:nth-child(1){
    width:16px;
    height:16px;
    left:10%;
    top:20%;
}

.tour-particle:nth-child(2){
    width:10px;
    height:10px;
    right:15%;
    top:35%;
    animation-duration:18s;
}

.tour-particle:nth-child(3){
    width:22px;
    height:22px;
    left:30%;
    bottom:12%;
    animation-duration:14s;
}

@keyframes particleFloat{
    0%{
        transform:translateY(0);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:translateY(-120px);
        opacity:0;
    }
}

/* =========================================================
GLASS WRAPPER
========================================================= */
.tourism-glass-box{
    position:relative;
    z-index:2;

    border-radius:40px;
    padding:70px 50px;

    background:rgba(255,255,255,.05);
    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25),
        inset 0 1px 1px rgba(255,255,255,.08);
}

/* Animated Border */
.tourism-glass-box::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:42px;

    background:linear-gradient(
        135deg,
        #06b6d4,
        #0ea5e9,
        #8b5cf6,
        #06b6d4
    );

    background-size:300% 300%;

    animation:borderFlow 8s linear infinite;

    z-index:-1;

    filter:blur(12px);
    opacity:.35;
}

@keyframes borderFlow{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:200% 50%;
    }
}

/* =========================================================
TITLE
========================================================= */
.tourism-title{
    position:relative;
    z-index:2;
    margin-bottom:60px;
}

.tourism-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 22px;

    border-radius:60px;

    background:rgba(6,182,212,.12);

    border:1px solid rgba(6,182,212,.22);

    color:#67e8f9;

    font-size:.9rem;
    font-weight:700;

    margin-bottom:24px;
}

.tourism-title h2{
    font-size:clamp(2.2rem,5vw,4.5rem);
    font-weight:900;
    line-height:1.2;

    margin-bottom:22px;

    background:linear-gradient(
        to right,
        #ffffff,
        #67e8f9,
        #c084fc
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.tourism-title p{
    max-width:760px;
    margin:auto;

    color:#cbd5e1;

    font-size:1.08rem;
    line-height:2;
}

.tourism-line{
    width:130px;
    height:6px;

    border-radius:50px;

    margin:28px auto 0;

    background:linear-gradient(
        90deg,
        #06b6d4,
        #8b5cf6
    );

    box-shadow:
        0 10px 25px rgba(6,182,212,.25);
}

/* =========================================================
MAP WRAPPER
========================================================= */
.tourism-map-wrapper{
    position:relative;
    z-index:2;

    border-radius:32px;
    overflow:hidden;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    padding:18px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.2);
}

/* Shine */
.tourism-map-wrapper::after{
    content:'';
    position:absolute;
    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );

    transform:skewX(-20deg);

    transition:.9s;
}

.tourism-map-wrapper:hover::after{
    left:140%;
}

/* =========================================================
DECORATION ICONS
========================================================= */
.tour-decor{
    position:absolute;
    color:rgba(255,255,255,.06);
    z-index:0;
    pointer-events:none;
}

.tour-decor-1{
    top:80px;
    right:80px;
    font-size:7rem;
    animation:rotateSlow 30s linear infinite;
}

.tour-decor-2{
    bottom:100px;
    left:60px;
    font-size:5rem;
    animation:floatIcon 6s ease-in-out infinite;
}

@keyframes rotateSlow{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes floatIcon{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-18px);
    }
}

/* =========================================================
MOBILE
========================================================= */
@media(max-width:768px){

    .tourism-wow-section{
        padding:80px 0;
    }

    .tourism-glass-box{
        padding:45px 20px;
        border-radius:28px;
    }

    .tourism-title h2{
        font-size:2.4rem;
    }

    .tourism-title p{
        font-size:.96rem;
        line-height:1.8;
    }

    .tourism-map-wrapper{
        padding:10px;
        border-radius:22px;
    }

    .tour-decor-1{
        font-size:4rem;
        top:30px;
        right:20px;
    }

    .tour-decor-2{
        font-size:3rem;
        left:20px;
        bottom:40px;
    }
}