/*
Theme Name: Yi Thai Amulet
Theme URI: https://example.com/
Author: Yi Thai Amulet
Description: Yi Thai Amulet Premium Luxury Certificate Theme
Version: 4.0.0
Text Domain: yi-thai-amulet
*/


/* =====================================================
   GLOBAL COLOR SYSTEM
===================================================== */

:root{
    --navy:#06172f;
    --navy-deep:#031124;
    --navy2:#081e3c;
    --navy3:#0d2a4f;

    --gold:#d5a53d;
    --gold-light:#f5d982;
    --gold-bright:#ffe7a0;
    --gold-dark:#9a6d19;
    --gold-soft:#c99a35;

    --white:#ffffff;
    --cream:#f5e5b5;
    --muted:#aebbd0;

    --line:rgba(213,165,61,.42);

    --shadow:
        0 20px 60px rgba(0,0,0,.35);

    --gold-shadow:
        0 0 45px rgba(213,165,61,.18);
}


/* =====================================================
   RESET
===================================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(213,165,61,.035),
            transparent 30%
        ),
        var(--navy-deep);

    color:#fff;

    font-family:
        "Noto Sans Thai",
        Arial,
        sans-serif;

    line-height:1.7;

    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font-family:inherit;
}

img{
    max-width:100%;
    height:auto;
}

.container{
    width:min(
        1180px,
        calc(100% - 48px)
    );

    margin:auto;
}


/* =====================================================
   HEADER
===================================================== */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:
        linear-gradient(
            180deg,
            rgba(3,15,32,.98),
            rgba(4,17,36,.96)
        );

    backdrop-filter:blur(18px);

    border-bottom:
        1px solid
        rgba(213,165,61,.25);

    box-shadow:
        0 8px 35px rgba(0,0,0,.15);
}

.header-inner{
    min-height:86px;

    display:flex;
    align-items:center;

    gap:30px;
}


/* =====================================================
   BRAND
===================================================== */

.brand{
    display:flex;
    align-items:center;

    gap:12px;

    min-width:285px;
}

.brand-mark{
    width:55px;
    height:55px;

    border:
        1px solid
        var(--gold);

    border-radius:50%;

    display:grid;
    place-items:center;

    position:relative;

    background:
        radial-gradient(
            circle,
            rgba(213,165,61,.14),
            transparent 65%
        );

    box-shadow:
        0 0 0 5px rgba(213,165,61,.04),
        0 0 30px rgba(213,165,61,.12),
        inset 0 0 25px rgba(213,165,61,.12);
}

.brand-mark:before{
    content:"";

    position:absolute;

    width:34px;
    height:34px;

    border:
        1px solid
        var(--gold-light);

    border-radius:50%;
}

.brand-mark span{
    position:relative;
    z-index:2;

    font-family:
        Georgia,
        serif;

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

    color:var(--gold-light);

    text-shadow:
        0 0 12px rgba(245,217,130,.35);
}

.brand-name{
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:25px;

    color:#fff;

    letter-spacing:-.01em;
}

.brand-sub{
    font-size:10px;

    color:var(--gold-light);

    letter-spacing:.08em;
}


/* =====================================================
   NAVIGATION
===================================================== */

.desktop-menu{
    flex:1;
}

.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:27px;
}

.main-nav a{
    font-size:12px;

    color:#e1e7ef;

    position:relative;

    padding:31px 0;

    white-space:nowrap;

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

.main-nav a:hover{
    color:var(--gold-light);

    text-shadow:
        0 0 14px
        rgba(240,208,128,.3);
}

.main-nav a:hover:after{
    content:"";

    position:absolute;

    bottom:19px;

    left:0;
    right:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(213,165,61,.5);
}

.header-actions{
    display:flex;
    align-items:center;

    gap:12px;
}

.lang{
    background:none;

    border:0;

    color:var(--muted);

    font-size:12px;

    cursor:pointer;
}

.lang.active{
    color:var(--gold-light);

    text-shadow:
        0 0 10px
        rgba(240,208,128,.3);
}

.login-btn{
    display:inline-flex;

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

    background:
        linear-gradient(
            180deg,
            #f3d172,
            #c18b25
        );

    border:
        1px solid
        var(--gold-light);

    color:#07172d;

    padding:11px 20px;

    border-radius:5px;

    font-size:12px;
    font-weight:700;

    box-shadow:
        0 7px 22px
        rgba(213,165,61,.14);

    transition:
        .25s ease;
}

.login-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 30px
        rgba(213,165,61,.3);
}

.menu-toggle{
    display:none;

    border:0;

    background:none;

    color:#fff;

    font-size:25px;
}


/* =====================================================
   HERO — PREMIUM GOLD
===================================================== */

.yt-hero{
    position:relative;

    min-height:625px;

    overflow:hidden;

    background:

        /* Golden center glow */
        radial-gradient(
            ellipse at 76% 48%,
            rgba(213,165,61,.20),
            transparent 17%
        ),

        radial-gradient(
            ellipse at 78% 48%,
            rgba(213,165,61,.10),
            transparent 32%
        ),

        /* Deep navy */
        linear-gradient(
            120deg,
            #06172e 0%,
            #092442 50%,
            #07172e 100%
        );
}


/* =====================================================
   HERO LIGHT — DIAGONAL GOLD
===================================================== */

.yt-hero:before{
    content:"";

    position:absolute;

    inset:-30%;

    background:

        repeating-radial-gradient(
            ellipse at 80% 50%,

            transparent 0 70px,

            rgba(213,165,61,.12)
            71px 72px,

            transparent 73px 115px
        );

    transform:
        rotate(-13deg);

    opacity:.65;

    pointer-events:none;
}


/* =====================================================
   HERO AMBIENT LIGHT
===================================================== */

.yt-hero:after{
    content:"";

    position:absolute;

    width:900px;
    height:700px;

    right:-300px;
    top:-70px;

    border-radius:50%;

    background:

        radial-gradient(
            ellipse,
            rgba(213,165,61,.20) 0%,
            rgba(213,165,61,.08) 25%,
            transparent 68%
        );

    filter:blur(30px);

    pointer-events:none;
}


/* =====================================================
   HERO INNER
===================================================== */

.yt-hero-inner{
    position:relative;

    min-height:625px;

    display:flex;

    align-items:center;
}


/* =====================================================
   HERO CONTENT
===================================================== */

.yt-hero-content{
    position:relative;

    z-index:20;

    width:62%;

    padding:80px 0;
}

.yt-eyebrow{
    display:flex;

    align-items:center;

    gap:13px;

    color:var(--gold-light);

    font-size:12px;

    letter-spacing:.2em;

    margin-bottom:20px;

    text-shadow:
        0 0 12px
        rgba(240,208,128,.18);
}

.yt-eyebrow span{
    width:46px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );

    box-shadow:
        0 0 7px
        rgba(213,165,61,.5);
}


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

.yt-hero h1{
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            60px,
            7vw,
            92px
        );

    line-height:.95;

    font-weight:500;

    letter-spacing:.025em;

    color:#f6df9d;

    text-shadow:
        0 2px 1px rgba(0,0,0,.15),
        0 0 30px rgba(213,165,61,.08);
}

.yt-hero h2{
    margin:
        15px 0 25px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:29px;

    font-weight:400;

    letter-spacing:.18em;

    color:#fff;

    text-shadow:
        0 0 15px
        rgba(255,255,255,.06);
}

.yt-hero p{
    max-width:590px;

    margin:0;

    color:#c7d1df;

    font-size:15px;
}


/* =====================================================
   HERO BUTTONS
===================================================== */

.yt-hero-buttons{
    display:flex;

    gap:14px;

    margin-top:32px;
}

.yt-btn{
    display:inline-flex;

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

    padding:13px 23px;

    border-radius:5px;

    border:
        1px solid
        var(--gold);

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;

    transition:
        .3s ease;

    position:relative;

    overflow:hidden;
}

.yt-btn:hover{
    transform:translateY(-2px);

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

.yt-btn-gold{
    background:
        linear-gradient(
            180deg,
            #f1cf6c,
            #b98625
        );

    color:#07172d;

    box-shadow:
        0 8px 25px
        rgba(213,165,61,.16);
}

.yt-btn-outline{
    background:
        rgba(4,16,33,.35);

    color:#f3dfaa;

    backdrop-filter:blur(5px);
}

.yt-btn-outline:hover{
    background:
        rgba(213,165,61,.10);
}


/* =====================================================
   HERO ART — IMAGE INTEGRATION
   สำคัญที่สุดของชุดนี้
===================================================== */

.yt-hero-art{
    position:absolute;

    right:-25px;

    bottom:-10px;

    width:540px;

    height:590px;

    z-index:8;

    pointer-events:none;

    isolation:isolate;
}


/* =====================================================
   ART GOLD ATMOSPHERE
===================================================== */

.yt-hero-art:before{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:50%;
    top:45%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,211,94,.24) 0%,
            rgba(213,165,61,.14) 22%,
            rgba(213,165,61,.06) 42%,
            transparent 70%
        );

    filter:blur(12px);

    z-index:-2;
}


/* =====================================================
   GOLD LIGHT BEHIND BUDDHA
===================================================== */

.yt-hero-art:after{
    content:"";

    position:absolute;

    width:340px;
    height:520px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    background:

        radial-gradient(
            ellipse at center,
            rgba(255,219,116,.28),
            rgba(213,165,61,.12) 35%,
            transparent 70%
        );

    filter:blur(25px);

    z-index:-1;
}


/* =====================================================
   IMAGE — REMOVE RECTANGULAR FEEL
===================================================== */

/*
   ถ้าใน HTML มี <img> อยู่ใน .yt-hero-art
   CSS ส่วนนี้จะทำให้ขอบรูปละลายกับ Hero
*/

.yt-hero-art img{
    position:absolute;

    left:50%;
    bottom:0;

    transform:
        translateX(-50%);

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    border:0;

    outline:0;

    /*
       ทำให้ขอบบน/ซ้าย/ขวา/ล่าง
       ค่อย ๆ จางออก
    */

    -webkit-mask-image:
        radial-gradient(
            ellipse 72% 75% at 50% 48%,
            #000 48%,
            rgba(0,0,0,.96) 56%,
            rgba(0,0,0,.75) 68%,
            rgba(0,0,0,.35) 78%,
            transparent 91%
        );

    mask-image:
        radial-gradient(
            ellipse 72% 75% at 50% 48%,
            #000 48%,
            rgba(0,0,0,.96) 56%,
            rgba(0,0,0,.75) 68%,
            rgba(0,0,0,.35) 78%,
            transparent 91%
        );

    /*
       Screen ทำให้พื้นดำของรูป
       กลืนกับพื้นหลังมากขึ้น
    */

    mix-blend-mode:screen;

    filter:
        saturate(1.08)
        contrast(1.05)
        brightness(.96)
        drop-shadow(
            0 0 25px
            rgba(240,204,109,.20)
        );

    opacity:.98;
}


/* =====================================================
   ถ้ารูปอยู่เป็น background-image
===================================================== */

.yt-hero-art[style*="background-image"]{
    background-repeat:no-repeat;

    background-position:center;

    background-size:cover;

    -webkit-mask-image:
        radial-gradient(
            ellipse 70% 78% at 50% 48%,
            #000 45%,
            rgba(0,0,0,.95) 57%,
            rgba(0,0,0,.7) 70%,
            rgba(0,0,0,.3) 82%,
            transparent 94%
        );

    mask-image:
        radial-gradient(
            ellipse 70% 78% at 50% 48%,
            #000 45%,
            rgba(0,0,0,.95) 57%,
            rgba(0,0,0,.7) 70%,
            rgba(0,0,0,.3) 82%,
            transparent 94%
        );
}


/* =====================================================
   ORBIT SYSTEM
===================================================== */

.yt-orbit{
    position:absolute;

    border:
        1px solid
        rgba(240,208,128,.34);

    border-radius:50%;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        rotate(-15deg);

    pointer-events:none;

    box-shadow:
        0 0 15px
        rgba(213,165,61,.04);
}

.orbit-1{
    width:350px;
    height:500px;
}

.orbit-2{
    width:300px;
    height:450px;

    opacity:.65;
}

.orbit-3{
    width:430px;
    height:290px;

    transform:
        translate(-50%,-50%)
        rotate(25deg);

    opacity:.55;
}


/* =====================================================
   ORBIT LIGHT
===================================================== */

.orbit-1:after,
.orbit-2:after,
.orbit-3:after{
    content:"";

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--gold-light);

    box-shadow:
        0 0 12px
        rgba(255,225,135,.9),
        0 0 25px
        rgba(213,165,61,.7);
}

.orbit-1:after{
    top:15%;
    right:7%;
}

.orbit-2:after{
    bottom:18%;
    left:8%;
}

.orbit-3:after{
    top:10%;
    left:25%;
}


/* =====================================================
   OLD PLACEHOLDER BUDDHA
   ซ่อน placeholder เดิมถ้ามี
===================================================== */

.yt-buddha-placeholder{
    display:none;
}


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

.yt-hero-inner:after{
    content:"";

    position:absolute;

    right:330px;
    top:120px;

    width:3px;
    height:3px;

    background:#f6d778;

    border-radius:50%;

    box-shadow:

        35px 80px 0 rgba(240,208,128,.8),
        75px 20px 0 rgba(240,208,128,.55),
        110px 130px 0 rgba(240,208,128,.7),
        155px 60px 0 rgba(240,208,128,.5),
        205px 170px 0 rgba(240,208,128,.65),
        250px 90px 0 rgba(240,208,128,.45),
        290px 210px 0 rgba(240,208,128,.6),
        330px 120px 0 rgba(240,208,128,.5);

    opacity:.55;

    filter:
        drop-shadow(
            0 0 8px
            rgba(240,208,128,.8)
        );

    pointer-events:none;
}


/* =====================================================
   VERIFY SECTION
===================================================== */

.yt-verify-section{
    position:relative;

    z-index:30;

    margin-top:-65px;
}

.yt-verify-card{
    padding:32px;

    border:
        1px solid
        rgba(213,165,61,.48);

    border-radius:8px;

    background:

        linear-gradient(
            135deg,
            rgba(7,28,55,.98),
            rgba(12,42,76,.98)
        );

    box-shadow:

        0 20px 60px
        rgba(0,0,0,.35),

        0 0 35px
        rgba(213,165,61,.05);

    position:relative;

    overflow:hidden;
}


/* GOLD LINE */

.yt-verify-card:before{
    content:"";

    position:absolute;

    top:0;
    left:8%;
    right:8%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(213,165,61,.45);
}

.yt-verify-main{
    display:flex;

    align-items:center;

    gap:18px;
}

.yt-shield{
    width:65px;
    height:65px;

    flex:none;

    display:grid;
    place-items:center;

    color:var(--gold-light);

    border:
        2px solid
        var(--gold);

    clip-path:
        polygon(
            50% 0,
            90% 15%,
            90% 60%,
            50% 100%,
            10% 60%,
            10% 15%
        );

    font-size:25px;

    background:
        rgba(213,165,61,.04);

    filter:
        drop-shadow(
            0 0 12px
            rgba(213,165,61,.2)
        );
}

.yt-verify-main h3{
    margin:0 0 3px;

    font-size:16px;

    color:#fff;
}

.yt-verify-main p{
    margin:0;

    color:#9eacc0;

    font-size:12px;
}


/* =====================================================
   SEARCH
===================================================== */

.yt-search-form{
    display:flex;

    gap:10px;

    margin-top:25px;
}

.yt-search-form input{
    flex:1;

    border:0;

    outline:none;

    border-radius:4px;

    padding:16px;

    font-size:14px;

    color:#17263b;
}

.yt-search-form button{
    border:
        1px solid
        var(--gold-light);

    border-radius:4px;

    padding:0 28px;

    background:
        linear-gradient(
            180deg,
            #edc96c,
            #b98422
        );

    color:#07172d;

    font-size:12px;

    font-weight:800;

    cursor:pointer;

    transition:.25s ease;
}

.yt-search-form button:hover{
    transform:translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(213,165,61,.18);
}


/* =====================================================
   TRUST
===================================================== */

.yt-trust-row{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;

    margin-top:20px;

    padding:18px 5px 0;
}

.yt-trust-item{
    display:flex;

    gap:12px;

    align-items:center;

    color:#c8d3e1;
}

.yt-trust-icon{
    color:var(--gold-light);

    font-size:24px;

    text-shadow:
        0 0 15px
        rgba(240,208,128,.2);
}

.yt-trust-item strong{
    display:block;

    font-size:12px;

    color:#e7edf5;
}

.yt-trust-item small{
    color:#899ab0;

    font-size:10px;
}


/* =====================================================
   VERIFY CERTIFICATE PAGE
===================================================== */

.page-template-page-verify-certificate .site-main,
.page-template-page-verify-certificate main,
.page-template-page-verify-certificate .content-area{
    background:var(--navy);
}

.page-template-page-verify-certificate main{
    padding:0;
}

.verify-page,
.certificate-page,
.certificate-verification-page{
    background:

        radial-gradient(
            circle at 75% 20%,
            rgba(213,165,61,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 25% 70%,
            rgba(26,74,120,.12),
            transparent 30%
        ),

        var(--navy);

    min-height:650px;

    padding:70px 0 90px;
}

.verify-page h1,
.certificate-page h1,
.certificate-verification-page h1{
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:#f1d99a;

    font-weight:400;

    letter-spacing:.03em;
}

.verify-page input,
.certificate-page input,
.certificate-verification-page input{
    background:#fff;

    color:#18283d;

    border:
        1px solid
        rgba(213,165,61,.45);

    border-radius:4px;

    padding:14px 16px;

    outline:none;
}

.verify-page button,
.certificate-page button,
.certificate-verification-page button{
    background:
        linear-gradient(
            180deg,
            #edca6b,
            #b98625
        );

    color:#07172d;

    border:
        1px solid
        var(--gold-light);

    border-radius:4px;

    padding:13px 25px;

    font-weight:800;

    cursor:pointer;
}


/* =====================================================
   CERTIFICATE RESULT
===================================================== */

.certificate-result,
.verification-result,
.verify-result{
    margin-top:35px;

    border:
        1px solid
        rgba(213,165,61,.35);

    border-radius:7px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #102a47,
            #09203d
        );

    box-shadow:var(--shadow);
}

.certificate-result-header,
.verification-result-header,
.verify-result-header{
    padding:30px;

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

    border-bottom:
        1px solid
        rgba(213,165,61,.2);
}

.certificate-result h2,
.verification-result h2,
.verify-result h2{
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:#f0d797;

    font-weight:400;

    font-size:32px;
}

.certificate-result-body,
.verification-result-body,
.verify-result-body{
    padding:30px;
}

.certificate-result-grid,
.verification-result-grid,
.verify-result-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;

    margin-top:25px;
}

.certificate-result-item,
.verification-result-item,
.verify-result-item{
    border:
        1px solid
        rgba(213,165,61,.22);

    border-radius:5px;

    padding:20px;

    background:
        rgba(255,255,255,.025);
}

.certificate-result-item small,
.verification-result-item small,
.verify-result-item small{
    display:block;

    color:#7f95b0;

    font-size:10px;

    letter-spacing:.14em;

    text-transform:uppercase;

    margin-bottom:8px;
}

.certificate-result-item strong,
.verification-result-item strong,
.verify-result-item strong{
    color:#fff;

    font-size:14px;
}

.status-verified{
    color:#f0d080 !important;
}


/* =====================================================
   GENERAL SECTIONS
===================================================== */

.yt-section{
    padding:75px 0;
}

.yt-features-section{
    background:
        linear-gradient(
            180deg,
            #071b35,
            #06172e
        );
}

.yt-features{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    border:
        1px solid
        rgba(213,165,61,.2);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.15);
}

.yt-feature{
    text-align:center;

    padding:27px 20px;

    background:
        linear-gradient(
            180deg,
            #0a2446,
            #091f3c
        );

    border-right:
        1px solid
        rgba(213,165,61,.15);

    transition:.3s ease;
}

.yt-feature:hover{
    background:
        linear-gradient(
            180deg,
            #0d2b50,
            #0a2344
        );

    box-shadow:
        inset 0 0 30px
        rgba(213,165,61,.04);
}

.yt-feature:last-child{
    border-right:0;
}

.yt-feature-icon{
    color:var(--gold-light);

    font-size:28px;

    margin-bottom:8px;

    text-shadow:
        0 0 15px
        rgba(240,208,128,.2);
}

.yt-feature h3{
    margin:0 0 5px;

    color:#f0d797;

    font-family:
        Georgia,
        serif;

    font-weight:500;

    font-size:16px;
}

.yt-feature p{
    margin:0;

    color:#9baac0;

    font-size:11px;
}


/* =====================================================
   DARK SECTION
===================================================== */

.yt-dark-section{
    background:
        linear-gradient(
            180deg,
            #06172e,
            #041225
        );
}

.yt-section-heading{
    text-align:center;

    margin-bottom:38px;
}

.yt-kicker{
    color:var(--gold-light);

    font-size:11px;

    letter-spacing:.22em;

    text-transform:uppercase;
}

.yt-section-heading h2{
    margin:
        8px 0 12px;

    font-family:
        Georgia,
        serif;

    color:#f1d99a;

    font-size:32px;

    font-weight:400;
}

.yt-ornament{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    color:var(--gold-light);
}

.yt-ornament span{
    width:90px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );

    box-shadow:
        0 0 7px
        rgba(213,165,61,.3);
}


/* =====================================================
   EMPTY CONTENT
===================================================== */

.yt-empty-content{
    min-height:230px;

    border:
        1px dashed
        rgba(213,165,61,.3);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.yt-empty-icon{
    color:var(--gold);

    font-size:28px;

    text-shadow:
        0 0 15px
        rgba(213,165,61,.25);
}

.yt-empty-content h3{
    margin:0;

    color:#dcb866;

    font-family:
        Georgia,
        serif;

    font-weight:400;
}

.yt-empty-content p{
    margin:
        4px 0 0;

    color:#71839b;

    font-size:12px;
}


/* =====================================================
   ABOUT
===================================================== */

.yt-about-section{
    background:
        linear-gradient(
            180deg,
            #081d39,
            #06172e
        );
}

.yt-about-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:25px;
}

.yt-about-content{
    padding:45px;

    border:
        1px solid
        rgba(213,165,61,.25);

    background:
        linear-gradient(
            135deg,
            #0a2343,
            #081d38
        );

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.12);
}

.yt-about-content h2{
    margin:
        10px 0 20px;

    font-family:
        Georgia,
        serif;

    font-size:31px;

    line-height:1.35;

    color:#f0d797;

    font-weight:400;
}

.yt-about-content p{
    color:#aebbd0;

    font-size:14px;
}

.yt-about-visual{
    min-height:330px;

    position:relative;

    overflow:hidden;

    border:
        1px solid
        rgba(213,165,61,.25);

    background:

        radial-gradient(
            circle at center,
            rgba(213,165,61,.23),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #06172e,
            #12345b
        );
}


/* =====================================================
   FOOTER
===================================================== */

.site-footer{
    background:
        linear-gradient(
            180deg,
            #041124,
            #020b18
        );

    border-top:
        1px solid
        rgba(213,165,61,.3);
}


/* =====================================================
   PREMIUM GOLD SCROLLBAR
===================================================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#031124;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #e2b94e,
            #8d641a
        );

    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #f2d276,
            #b98524
        );
}


/* =====================================================
   RESPONSIVE — 1100px
===================================================== */

@media(max-width:1100px){

    .main-nav{
        gap:15px;
    }

    .main-nav a{
        font-size:11px;
    }

    .brand{
        min-width:235px;
    }

    .yt-hero-art{
        right:-100px;

        width:500px;

        opacity:.9;
    }

    .certificate-result-grid,
    .verification-result-grid,
    .verify-result-grid{
        grid-template-columns:
            repeat(2,1fr);
    }
}


/* =====================================================
   RESPONSIVE — 850px
===================================================== */

@media(max-width:850px){

    .header-inner{
        min-height:74px;
    }

    .desktop-menu,
    .header-actions{
        display:none;
    }

    .menu-toggle{
        display:block;

        margin-left:auto;
    }

    .yt-hero{
        min-height:650px;
    }

    .yt-hero-inner{
        min-height:650px;
    }

    .yt-hero-content{
        width:100%;

        position:relative;

        z-index:30;
    }

    .yt-hero-art{
        right:-200px;

        width:520px;

        opacity:.38;
    }

    .yt-hero-art img{
        mix-blend-mode:screen;
    }

    .yt-trust-row{
        grid-template-columns:
            1fr 1fr;
    }

    .yt-features{
        grid-template-columns:
            1fr 1fr;
    }

    .yt-about-grid{
        grid-template-columns:1fr;
    }
}


/* =====================================================
   RESPONSIVE — 600px
===================================================== */

@media(max-width:600px){

    .container{
        width:
            calc(100% - 30px);
    }

    .brand-name{
        font-size:19px;
    }

    .brand-sub{
        font-size:8px;
    }

    .brand-mark{
        width:45px;
        height:45px;
    }

    .yt-hero{
        min-height:700px;
    }

    .yt-hero-inner{
        min-height:700px;
    }

    .yt-hero h1{
        font-size:52px;
    }

    .yt-hero h2{
        font-size:21px;
    }

    .yt-hero-buttons{
        flex-direction:column;

        max-width:280px;
    }

    .yt-search-form{
        flex-direction:column;
    }

    .yt-search-form button{
        padding:14px;
    }

    .yt-trust-row{
        grid-template-columns:1fr;
    }

    .yt-features{
        grid-template-columns:1fr;
    }

    .yt-feature{
        border-right:0;

        border-bottom:
            1px solid
            rgba(213,165,61,.15);
    }

    .yt-feature:last-child{
        border-bottom:0;
    }

    .yt-about-content{
        padding:28px;
    }

    .certificate-result-grid,
    .verification-result-grid,
    .verify-result-grid{
        grid-template-columns:1fr;
    }

    .certificate-result h2,
    .verification-result h2,
    .verify-result h2{
        font-size:25px;
    }


    /*
       Mobile:
       ให้พระเป็น background ที่นุ่มขึ้น
    */

    .yt-hero-art{
        right:-180px;

        bottom:-20px;

        width:470px;

        height:560px;

        opacity:.30;
    }

    .yt-hero-art:before{
        opacity:.7;
    }

    .yt-hero-art img{
        filter:
            saturate(1.05)
            contrast(1.02)
            brightness(.9)
            drop-shadow(
                0 0 25px
                rgba(240,204,109,.18)
            );
    }
}


/* =====================================================
   RESPONSIVE — 420px
===================================================== */

@media(max-width:420px){

    .yt-hero h1{
        font-size:45px;
    }

    .yt-hero h2{
        font-size:18px;
    }

    .yt-hero-art{
        right:-190px;

        width:450px;

        opacity:.26;
    }

    .yt-hero-content{
        padding:
            70px 0 120px;
    }
}
/* =====================================================
   PREMIUM GOLD BUDDHA - BLEND INTO HERO BACKGROUND
   วางไว้ท้าย CSS เพื่อ Override ของเดิม
===================================================== */

/* ตัวพื้นที่รูปพระ */
.yt-hero-art{
    position:absolute;
    right:-15px;
    bottom:0;
    width:540px;
    height:590px;
    z-index:2;
    pointer-events:none;

    /* ทำให้บริเวณรอบพระมีแสงทอง */
    filter:
        drop-shadow(0 0 25px rgba(240,190,70,.18))
        drop-shadow(0 0 70px rgba(213,165,61,.12));
}

/* รูปพระจริง */
.yt-hero-art img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    /*
       จุดสำคัญที่สุด
       สีดำในภาพจะกลืนกับพื้นหลังเว็บ
       ส่วนสีทองจะโดดขึ้นมา
    */
    mix-blend-mode:screen;

    /*
       ทำให้ขอบรูปค่อย ๆ หายไป
       ไม่เห็นเป็นสี่เหลี่ยม
    */
    -webkit-mask-image:
        radial-gradient(
            ellipse 72% 82% at 50% 48%,
            #000 38%,
            rgba(0,0,0,.95) 55%,
            rgba(0,0,0,.65) 70%,
            transparent 90%
        );

    mask-image:
        radial-gradient(
            ellipse 72% 82% at 50% 48%,
            #000 38%,
            rgba(0,0,0,.95) 55%,
            rgba(0,0,0,.65) 70%,
            transparent 90%
        );

    /*
       เพิ่มความหรูและความสว่างของทอง
    */
    filter:
        brightness(1.08)
        contrast(1.08)
        saturate(1.15);
}


/* =====================================================
   GOLD ATMOSPHERE รอบองค์พระ
===================================================== */

.yt-hero-art:before{
    content:"";
    position:absolute;

    width:470px;
    height:470px;

    left:50%;
    top:45%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,210,90,.28) 0%,
            rgba(240,190,70,.18) 25%,
            rgba(213,165,61,.08) 48%,
            transparent 72%
        );

    filter:blur(25px);

    z-index:-1;
}


/* แสงฟุ้งด้านหลังองค์พระ */
.yt-hero-art:after{
    content:"";
    position:absolute;

    width:650px;
    height:650px;

    left:50%;
    top:42%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,215,100,.12) 0%,
            rgba(213,165,61,.07) 30%,
            transparent 68%
        );

    filter:blur(45px);

    z-index:-2;
}


/* =====================================================
   ทำให้วงแหวนด้านหลังพระดูเป็นส่วนเดียวกับภาพ
===================================================== */

.yt-orbit{
    opacity:.65;
    filter:
        drop-shadow(0 0 8px rgba(240,208,128,.15));
}


/* วงใหญ่ */
.orbit-1{
    border-color:rgba(240,208,128,.38);
}

/* วงกลาง */
.orbit-2{
    border-color:rgba(240,208,128,.30);
}

/* วงแนวนอน */
.orbit-3{
    border-color:rgba(240,208,128,.26);
}


/* =====================================================
   ปรับ Glow เดิมให้เข้ากับรูปจริง
===================================================== */

.yt-glow{
    width:430px;
    height:430px;

    left:55px;
    top:65px;

    background:
        radial-gradient(
            circle,
            rgba(255,205,90,.30) 0%,
            rgba(232,184,71,.18) 28%,
            rgba(213,165,61,.08) 48%,
            transparent 72%
        );

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


/* =====================================================
   HERO ให้ภาพกับพื้นหลังเชื่อมกัน
===================================================== */

.yt-hero{
    background:

        /* แสงทองหลังองค์พระ */
        radial-gradient(
            ellipse at 76% 52%,
            rgba(213,165,61,.18) 0%,
            rgba(213,165,61,.08) 20%,
            transparent 45%
        ),

        /* แสงน้ำเงิน */
        radial-gradient(
            ellipse at 70% 50%,
            rgba(50,100,150,.20) 0%,
            transparent 52%
        ),

        linear-gradient(
            120deg,
            #06172e 0%,
            #092442 58%,
            #07172e 100%
        );
}


/* =====================================================
   แสงเฉียงแบบ Luxury
===================================================== */

.yt-hero:after{
    width:700px;
    height:700px;

    right:-180px;
    top:-70px;

    background:
        radial-gradient(
            circle,
            rgba(255,215,100,.18) 0%,
            rgba(213,165,61,.10) 25%,
            transparent 67%
        );

    filter:blur(25px);
}


/* =====================================================
   เพิ่มแสงทองเล็ก ๆ ให้ดูมีมิติ
===================================================== */

.yt-hero-inner:after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:60px;
    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,220,120,.055),
            transparent 68%
        );

    filter:blur(10px);

    pointer-events:none;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .yt-hero-art{
        width:500px;
        height:560px;
        right:-80px;
        opacity:.85;
    }
}


@media(max-width:850px){

    .yt-hero-art{
        width:500px;
        height:560px;
        right:-190px;
        opacity:.45;
    }
}


@media(max-width:600px){

    .yt-hero-art{
        width:430px;
        height:500px;
        right:-190px;
        opacity:.25;
    }
}
/* =========================================================
   YI THAI AMULET
   PREMIUM GOLD LUXURY HOMEPAGE
   VERSION 4.0
   ========================================================= */


/* =========================================================
   01. GLOBAL
   ========================================================= */

:root{
    --yt-navy:#04152d;
    --yt-navy-deep:#020d1d;
    --yt-navy-light:#0a2342;

    --yt-gold:#d5a53d;
    --yt-gold-light:#f5d77f;
    --yt-gold-bright:#ffe6a0;
    --yt-gold-dark:#9d6d17;

    --yt-text:#edf2f8;
    --yt-muted:#9daec4;

    --yt-border:rgba(213,165,61,.30);
    --yt-border-soft:rgba(213,165,61,.15);

    --yt-glow:rgba(240,190,70,.22);
}


html{
    scroll-behavior:smooth;
}


body{
    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(213,165,61,.025),
            transparent 35%
        ),
        var(--yt-navy-deep);

    color:var(--yt-text);
}


/* =========================================================
   02. HEADER
   ========================================================= */

.site-header{
    background:
        linear-gradient(
            180deg,
            rgba(2,13,29,.98),
            rgba(4,21,45,.96)
        );

    border-bottom:1px solid rgba(213,165,61,.22);

    box-shadow:
        0 10px 35px rgba(0,0,0,.20);

    backdrop-filter:blur(18px);
}


.header-inner{
    min-height:86px;
}


.brand{
    min-width:310px;
}


.brand-mark{
    width:57px;
    height:57px;

    border-color:var(--yt-gold);

    box-shadow:
        0 0 0 5px rgba(213,165,61,.035),
        0 0 25px rgba(213,165,61,.10),
        inset 0 0 25px rgba(213,165,61,.08);
}


.brand-mark:before{
    border-color:var(--yt-gold-light);
}


.brand-name{
    color:#f8f2df;

    text-shadow:
        0 2px 15px rgba(255,215,120,.08);
}


.brand-sub{
    color:var(--yt-gold-light);
}


.main-nav{
    gap:30px;
}


.main-nav a{
    color:#d6deea;

    transition:
        color .25s ease,
        transform .25s ease;
}


.main-nav a:hover{
    color:var(--yt-gold-light);

    transform:translateY(-1px);
}


.main-nav a:hover:after{
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--yt-gold),
            transparent
        );
}


.login-btn{
    min-width:82px;

    background:
        linear-gradient(
            180deg,
            #f6d477 0%,
            #d5a53d 50%,
            #a97518 100%
        );

    border-color:#f4d67f;

    box-shadow:
        0 5px 18px rgba(213,165,61,.20),
        inset 0 1px rgba(255,255,255,.35);

    transition:.25s ease;
}


.login-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 9px 28px rgba(213,165,61,.30);
}


/* =========================================================
   03. HERO
   ========================================================= */

.yt-hero{

    min-height:650px;

    overflow:hidden;

    position:relative;

    background:

        /* GOLD LIGHT BEHIND BUDDHA */
        radial-gradient(
            ellipse 38% 70% at 76% 52%,
            rgba(224,173,58,.20) 0%,
            rgba(213,165,61,.11) 22%,
            rgba(213,165,61,.035) 45%,
            transparent 70%
        ),

        /* BLUE ATMOSPHERE */
        radial-gradient(
            ellipse 60% 100% at 72% 50%,
            rgba(29,72,112,.20),
            transparent 65%
        ),

        /* MAIN NAVY */
        linear-gradient(
            110deg,
            #020f23 0%,
            #061a34 38%,
            #082442 68%,
            #04152d 100%
        );
}


/* subtle golden diagonal light */

.yt-hero:before{

    content:"";

    position:absolute;

    inset:-20%;

    background:

        linear-gradient(
            125deg,
            transparent 35%,
            rgba(213,165,61,.045) 45%,
            transparent 52%
        ),

        repeating-radial-gradient(
            ellipse at 82% 52%,
            transparent 0 80px,
            rgba(213,165,61,.10) 81px 82px,
            transparent 83px 130px
        );

    transform:rotate(-8deg);

    opacity:.8;

    pointer-events:none;
}


/* golden atmosphere */

.yt-hero:after{

    content:"";

    position:absolute;

    width:800px;
    height:800px;

    right:-250px;
    top:-160px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(240,193,77,.16),
            rgba(213,165,61,.05) 35%,
            transparent 70%
        );

    filter:blur(25px);

    pointer-events:none;
}


/* =========================================================
   04. HERO INNER
   ========================================================= */

.yt-hero-inner{

    min-height:650px;

    position:relative;

    display:flex;

    align-items:center;
}


/* =========================================================
   05. HERO TEXT
   ========================================================= */

.yt-hero-content{

    width:58%;

    padding:
        80px
        0
        110px;

    z-index:20;
}


.yt-eyebrow{

    color:var(--yt-gold-light);

    font-size:11px;

    font-weight:700;

    letter-spacing:.24em;

    margin-bottom:22px;

    text-transform:uppercase;
}


.yt-eyebrow span{

    width:42px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--yt-gold)
        );
}


.yt-hero h1{

    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            64px,
            7vw,
            94px
        );

    line-height:.90;

    font-weight:500;

    letter-spacing:.015em;

    color:
        #f7d986;

    text-shadow:
        0 3px 25px rgba(213,165,61,.08);
}


.yt-hero h2{

    margin:
        19px
        0
        28px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:28px;

    font-weight:400;

    letter-spacing:.20em;

    color:#f6e6bd;
}


.yt-hero p{

    max-width:570px;

    color:#b9c6d7;

    font-size:14px;

    line-height:1.9;
}


/* =========================================================
   06. HERO ORNAMENT
   ========================================================= */

.yt-hero-content:after{

    content:"✦";

    display:block;

    width:370px;

    margin-top:25px;

    padding-top:12px;

    color:var(--yt-gold);

    font-size:13px;

    text-align:center;

    border-top:1px solid rgba(213,165,61,.55);

    text-shadow:
        0 0 12px rgba(240,200,90,.45);
}


/* =========================================================
   07. HERO BUTTONS
   ========================================================= */

.yt-hero-buttons{

    margin-top:34px;

    gap:13px;
}


.yt-btn{

    min-height:48px;

    padding:
        0
        24px;

    border-radius:4px;

    letter-spacing:.08em;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.yt-btn-gold{

    background:
        linear-gradient(
            180deg,
            #f7d776 0%,
            #d7a83e 55%,
            #a97518 100%
        );

    color:#08172d;

    border-color:#f5d77f;

    box-shadow:
        0 8px 25px rgba(213,165,61,.18),
        inset 0 1px rgba(255,255,255,.35);
}


.yt-btn-gold:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 13px 32px rgba(213,165,61,.30);
}


.yt-btn-outline{

    background:
        rgba(3,18,38,.42);

    border-color:
        rgba(213,165,61,.75);

    color:
        var(--yt-gold-light);
}


.yt-btn-outline:hover{

    background:
        rgba(213,165,61,.10);

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


/* =========================================================
   08. BUDDHA IMAGE
   ========================================================= */

/*
   จุดสำคัญมาก:
   รูปพระจะไม่เป็นสี่เหลี่ยมแข็ง ๆ อีกต่อไป
*/

.yt-hero-art{

    position:absolute;

    right:-35px;

    bottom:-15px;

    width:600px;

    height:620px;

    z-index:5;

    pointer-events:none;

    filter:
        drop-shadow(
            0 0 35px
            rgba(240,190,70,.15)
        );
}


/* actual image */

.yt-hero-art img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    border:0;

    /*
       เปลี่ยนโหมดให้ดำกลืนกับ Background
    */

    mix-blend-mode:screen;

    /*
       ทำขอบรูปให้ค่อย ๆ หาย
    */

    -webkit-mask-image:

        radial-gradient(
            ellipse 74% 82% at 50% 48%,

            #000 25%,

            rgba(0,0,0,.98) 43%,

            rgba(0,0,0,.88) 57%,

            rgba(0,0,0,.55) 70%,

            rgba(0,0,0,.15) 82%,

            transparent 96%
        );

    mask-image:

        radial-gradient(
            ellipse 74% 82% at 50% 48%,

            #000 25%,

            rgba(0,0,0,.98) 43%,

            rgba(0,0,0,.88) 57%,

            rgba(0,0,0,.55) 70%,

            rgba(0,0,0,.15) 82%,

            transparent 96%
        );

    filter:
        brightness(1.08)
        contrast(1.05)
        saturate(1.12);
}


/* =========================================================
   09. BUDDHA GOLD GLOW
   ========================================================= */

.yt-hero-art:before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:50%;
    top:43%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(
            circle,

            rgba(255,220,110,.30)
            0%,

            rgba(240,190,70,.20)
            23%,

            rgba(213,165,61,.08)
            47%,

            transparent
            72%
        );

    filter:blur(24px);

    z-index:-1;
}


/* larger atmospheric glow */

.yt-hero-art:after{

    content:"";

    position:absolute;

    width:750px;
    height:750px;

    left:50%;
    top:43%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(
            circle,

            rgba(255,215,100,.12)
            0%,

            rgba(213,165,61,.06)
            35%,

            transparent
            70%
        );

    filter:blur(45px);

    z-index:-2;
}


/* =========================================================
   10. ORBITS
   ========================================================= */

.yt-orbit{

    border-color:
        rgba(240,208,128,.30);

    opacity:.75;

    filter:
        drop-shadow(
            0 0 8px
            rgba(240,190,70,.12)
        );
}


.orbit-1{

    width:390px;
    height:540px;

    border-color:
        rgba(240,208,128,.38);
}


.orbit-2{

    width:330px;
    height:480px;

    border-color:
        rgba(240,208,128,.25);
}


.orbit-3{

    width:480px;
    height:320px;

    border-color:
        rgba(240,208,128,.22);
}


/* =========================================================
   11. OLD PLACEHOLDER
   ========================================================= */

/*
   ถ้ามี Buddha placeholder เดิม
   ให้ซ่อนไว้ เพราะเราจะใช้รูปจริง
*/

.yt-buddha-placeholder{

    opacity:0;

    pointer-events:none;
}


/* =========================================================
   12. VERIFY CARD
   ========================================================= */

.yt-verify-section{

    margin-top:-65px;

    position:relative;

    z-index:30;
}


.yt-verify-card{

    padding:0;

    overflow:hidden;

    border:
        1px solid
        rgba(213,165,61,.48);

    border-radius:6px;

    background:

        linear-gradient(
            135deg,
            rgba(5,24,49,.98),
            rgba(8,34,65,.98)
        );

    box-shadow:

        0 20px 60px
        rgba(0,0,0,.30),

        0 0 40px
        rgba(213,165,61,.035);
}


/* =========================================================
   13. VERIFY MAIN
   ========================================================= */

.yt-verify-main{

    padding:
        25px
        32px;

    display:grid;

    grid-template-columns:
        70px
        1fr
        1.7fr;

    gap:20px;

    align-items:center;
}


.yt-shield{

    width:60px;
    height:70px;

    border:
        2px solid
        var(--yt-gold);

    color:
        var(--yt-gold-light);

    filter:
        drop-shadow(
            0 0 10px
            rgba(213,165,61,.15)
        );
}


.yt-verify-main h3{

    color:#f5d77f;

    font-family:
        Georgia,
        serif;

    font-size:17px;
}


.yt-verify-main p{

    color:#93a5bd;

    font-size:11px;
}


/* =========================================================
   14. SEARCH FORM
   ========================================================= */

.yt-search-form{

    margin:0;

    display:flex;

    gap:0;
}


.yt-search-form input{

    height:50px;

    border:
        1px solid
        rgba(213,165,61,.18);

    border-right:0;

    border-radius:
        5px
        0
        0
        5px;

    background:#f7f8fa;

    padding:
        0
        18px;

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.05);
}


.yt-search-form button{

    height:50px;

    min-width:125px;

    border-radius:
        0
        5px
        5px
        0;

    background:
        linear-gradient(
            180deg,
            #f5d477,
            #c79229
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.35);
}


/* =========================================================
   15. TRUST ROW
   ========================================================= */

.yt-trust-row{

    margin:0;

    padding:
        15px
        30px;

    border-top:
        1px solid
        rgba(213,165,61,.16);

    grid-template-columns:
        repeat(4,1fr);

    background:
        rgba(255,255,255,.012);
}


.yt-trust-item{

    padding:
        4px
        12px;

    border-right:
        1px solid
        rgba(213,165,61,.10);
}


.yt-trust-item:last-child{

    border-right:0;
}


.yt-trust-icon{

    color:
        var(--yt-gold-light);

    filter:
        drop-shadow(
            0 0 7px
            rgba(240,190,70,.20)
        );
}


.yt-trust-item strong{

    color:#e6edf5;
}


.yt-trust-item small{

    color:#758aa4;
}


/* =========================================================
   16. FEATURES SECTION
   ========================================================= */

.yt-features-section{

    background:

        linear-gradient(
            180deg,
            #04162f,
            #031329
        );

    padding:
        15px
        0
        75px;
}


.yt-features{

    gap:12px;

    border:0;
}


.yt-feature{

    min-height:130px;

    padding:
        25px
        20px;

    border:
        1px solid
        rgba(213,165,61,.26);

    border-radius:5px;

    background:

        linear-gradient(
            145deg,
            rgba(7,31,59,.95),
            rgba(4,20,42,.95)
        );

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.yt-feature:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(213,165,61,.60);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.22),

        0 0 25px
        rgba(213,165,61,.05);
}


.yt-feature-icon{

    color:
        var(--yt-gold-light);

    text-shadow:
        0 0 15px
        rgba(240,190,70,.22);
}


.yt-feature h3{

    color:
        #f0d797;

    font-family:
        Georgia,
        serif;
}


.yt-feature p{

    color:
        #8fa1b8;
}


/* =========================================================
   17. GENERAL SECTIONS
   ========================================================= */

.yt-section{

    padding:
        80px
        0;
}


.yt-dark-section{

    background:
        linear-gradient(
            180deg,
            #031329,
            #061a34
        );
}


.yt-section-heading h2{

    color:
        #f0d797;

    text-shadow:
        0 2px 15px
        rgba(213,165,61,.06);
}


.yt-kicker{

    color:
        var(--yt-gold-light);
}


/* =========================================================
   18. EMPTY CONTENT
   ========================================================= */

.yt-empty-content{

    border:
        1px solid
        rgba(213,165,61,.20);

    border-radius:5px;

    background:
        rgba(255,255,255,.012);
}


/* =========================================================
   19. ABOUT
   ========================================================= */

.yt-about-section{

    background:
        linear-gradient(
            135deg,
            #061a34,
            #04152d
        );
}


.yt-about-content{

    border:
        1px solid
        rgba(213,165,61,.25);

    border-radius:5px;

    background:
        linear-gradient(
            145deg,
            #092543,
            #061a34
        );

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


.yt-about-content h2{

    color:
        #f0d797;
}


.yt-about-content p{

    color:
        #9eafc4;
}


.yt-about-visual{

    border:
        1px solid
        rgba(213,165,61,.25);

    border-radius:5px;

    background:

        radial-gradient(
            circle at center,
            rgba(213,165,61,.20),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #031329,
            #0b294b
        );
}


/* =========================================================
   20. CERTIFICATE RESULT
   ========================================================= */

.certificate-result,
.verification-result,
.verify-result{

    border:
        1px solid
        rgba(213,165,61,.32);

    background:
        linear-gradient(
            145deg,
            #0a2849,
            #061a34
        );
}


.certificate-result-header,
.verification-result-header,
.verify-result-header{

    background:
        rgba(213,165,61,.025);

    border-bottom:
        1px solid
        rgba(213,165,61,.18);
}


.certificate-result h2,
.verification-result h2,
.verify-result h2{

    color:
        #f0d797;
}


.certificate-result-item,
.verification-result-item,
.verify-result-item{

    border:
        1px solid
        rgba(213,165,61,.18);

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

    transition:.25s ease;
}


.certificate-result-item:hover,
.verification-result-item:hover,
.verify-result-item:hover{

    border-color:
        rgba(213,165,61,.45);

    transform:
        translateY(-2px);
}


/* =========================================================
   21. VERIFY PAGE
   ========================================================= */

.verify-page,
.certificate-page,
.certificate-verification-page{

    background:

        radial-gradient(
            circle at 75% 20%,
            rgba(213,165,61,.10),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #04152d,
            #020f22
        );
}


/* =========================================================
   22. GOLD SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{

    width:8px;
}


::-webkit-scrollbar-track{

    background:#020c1b;
}


::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #f0ce71,
            #9d6d17
        );

    border-radius:10px;
}


::-webkit-scrollbar-thumb:hover{

    background:
        linear-gradient(
            180deg,
            #ffe39a,
            #c18d27
        );
}


/* =========================================================
   23. GOLD SELECTION
   ========================================================= */

::selection{

    background:
        rgba(213,165,61,.45);

    color:#fff;
}


/* =========================================================
   24. MOBILE
   ========================================================= */

@media(max-width:1100px){

    .brand{
        min-width:245px;
    }

    .main-nav{
        gap:16px;
    }

    .main-nav a{
        font-size:10px;
    }

    .yt-hero-art{

        width:540px;
        height:590px;

        right:-110px;

        opacity:.85;
    }

    .yt-hero-content{
        width:62%;
    }
}


@media(max-width:850px){

    .desktop-menu,
    .header-actions{
        display:none;
    }

    .menu-toggle{
        display:block;
        margin-left:auto;
    }


    .yt-hero{

        min-height:680px;
    }


    .yt-hero-inner{

        min-height:680px;
    }


    .yt-hero-content{

        width:100%;

        padding:
            90px
            0
            180px;
    }


    .yt-hero h1{

        font-size:
            clamp(
                52px,
                11vw,
                76px
            );
    }


    .yt-hero-art{

        width:540px;
        height:580px;

        right:-190px;

        opacity:.40;
    }


    .yt-verify-main{

        grid-template-columns:
            60px
            1fr;
    }


    .yt-search-form{

        grid-column:
            1 / -1;
    }


    .yt-trust-row{

        grid-template-columns:
            1fr 1fr;
    }


    .yt-feature{

        min-height:145px;
    }
}


@media(max-width:600px){

    .container{

        width:
            calc(100% - 30px);
    }


    .brand-name{

        font-size:19px;
    }


    .brand-mark{

        width:46px;
        height:46px;
    }


    .yt-hero{

        min-height:720px;
    }


    .yt-hero-inner{

        min-height:720px;
    }


    .yt-hero-content{

        padding:
            70px
            0
            220px;
    }


    .yt-hero h1{

        font-size:48px;
    }


    .yt-hero h2{

        font-size:19px;

        letter-spacing:.13em;
    }


    .yt-hero p{

        font-size:12px;

        line-height:1.8;
    }


    .yt-hero-content:after{

        width:260px;
    }


    .yt-hero-buttons{

        flex-direction:column;

        width:250px;
    }


    .yt-hero-art{

        width:460px;
        height:510px;

        right:-185px;

        opacity:.30;
    }


    .yt-verify-section{

        margin-top:-40px;
    }


    .yt-verify-main{

        padding:22px;

        grid-template-columns:
            55px
            1fr;
    }


    .yt-search-form{

        flex-direction:column;

        gap:8px;
    }


    .yt-search-form input{

        border-right:
            1px solid
            rgba(213,165,61,.18);

        border-radius:4px;
    }


    .yt-search-form button{

        width:100%;

        border-radius:4px;
    }


    .yt-trust-row{

        grid-template-columns:1fr;

        padding:
            15px
            20px;
    }


    .yt-trust-item{

        border-right:0;

        border-bottom:
            1px solid
            rgba(213,165,61,.10);

        padding:
            10px
            0;
    }


    .yt-trust-item:last-child{

        border-bottom:0;
    }


    .yt-features{

        grid-template-columns:1fr;
    }


    .yt-section{

        padding:
            60px
            0;
    }
}


/* =========================================================
   25. EXTRA GOLD PARTICLE ATMOSPHERE
   ========================================================= */

.yt-hero-inner:before{

    content:"";

    position:absolute;

    width:3px;
    height:3px;

    right:30%;
    top:28%;

    border-radius:50%;

    background:
        #f7d982;

    box-shadow:

        80px 30px 0 rgba(247,217,130,.5),

        150px 90px 0 rgba(247,217,130,.35),

        210px -30px 0 rgba(247,217,130,.45),

        270px 110px 0 rgba(247,217,130,.30),

        110px 180px 0 rgba(247,217,130,.25),

        300px 190px 0 rgba(247,217,130,.35),

        50px 250px 0 rgba(247,217,130,.20);

    filter:
        blur(.2px);

    opacity:.7;

    pointer-events:none;

    z-index:4;
}


/* =========================================================
   26. FINAL LUXURY LIGHT
   ========================================================= */

.yt-hero .container{

    position:relative;
    z-index:10;
}


/* ให้พระอยู่ด้านหลังข้อความ แต่เหนือ background */

.yt-hero-art{

    isolation:isolate;
}


/* ป้องกันรูปเกินพื้นที่ */

.yt-hero-art img{

    overflow:hidden;
}


/* =========================================================
   END
   ========================================================= */
   /* =========================================================
   HERO ART — GOLDEN BLEND VERSION
   ทำให้รูปพระกลืนกับพื้นหลังเว็บ
========================================================= */

/* กล่องรูปพระ */
.yt-hero-art{
    position:absolute !important;
    right:-5px !important;
    bottom:0 !important;
    width:520px !important;
    height:590px !important;
    z-index:3 !important;

    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;

    overflow:visible !important;

    /* แสงทองรอบพระ */
    filter:
        drop-shadow(0 0 18px rgba(236,190,70,.28))
        drop-shadow(0 0 45px rgba(236,190,70,.18)) !important;
}


/* ---------------------------------------------------------
   รูปภาพพระ
--------------------------------------------------------- */

.yt-hero-art img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center bottom !important;

    display:block !important;

    /*
       จุดสำคัญที่สุด
       ทำให้สีดำของรูปถูกกลืนเข้ากับพื้นหลัง
    */
    mix-blend-mode:screen !important;

    opacity:.96 !important;

    filter:
        brightness(1.08)
        contrast(1.08)
        saturate(1.12)
        drop-shadow(0 0 12px rgba(240,200,90,.25))
        !important;

    /*
       ค่อย ๆ จางขอบซ้าย/ขวา/บน/ล่าง
       เพื่อไม่ให้เห็นเป็นสี่เหลี่ยม
    */
    -webkit-mask-image:
        radial-gradient(
            ellipse 72% 78% at 50% 52%,
            #000 45%,
            rgba(0,0,0,.95) 58%,
            rgba(0,0,0,.65) 70%,
            rgba(0,0,0,.25) 82%,
            transparent 100%
        ) !important;

    mask-image:
        radial-gradient(
            ellipse 72% 78% at 50% 52%,
            #000 45%,
            rgba(0,0,0,.95) 58%,
            rgba(0,0,0,.65) 70%,
            rgba(0,0,0,.25) 82%,
            transparent 100%
        ) !important;
}


/* ---------------------------------------------------------
   Glow ด้านหลังพระ
--------------------------------------------------------- */

.yt-hero-art:before{
    content:"" !important;
    position:absolute !important;

    width:430px !important;
    height:520px !important;

    left:50% !important;
    top:40px !important;

    transform:translateX(-50%) !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,211,92,.42) 0%,
            rgba(224,170,54,.24) 28%,
            rgba(213,165,61,.10) 48%,
            transparent 72%
        ) !important;

    filter:blur(35px) !important;

    z-index:-1 !important;

    pointer-events:none !important;
}


/* ---------------------------------------------------------
   แสงทองด้านบน
--------------------------------------------------------- */

.yt-hero-art:after{
    content:"" !important;
    position:absolute !important;

    width:280px !important;
    height:500px !important;

    right:20px !important;
    top:-30px !important;

    background:
        linear-gradient(
            125deg,
            transparent 20%,
            rgba(255,214,105,.12) 42%,
            rgba(255,214,105,.28) 50%,
            transparent 63%
        ) !important;

    filter:blur(12px) !important;

    opacity:.7 !important;

    pointer-events:none !important;

    z-index:4 !important;
}


/* ---------------------------------------------------------
   ปรับวงแหวนทองให้สัมพันธ์กับพระ
--------------------------------------------------------- */

.yt-orbit{
    border-color:rgba(240,208,128,.32) !important;
    opacity:.65 !important;
}

.orbit-1{
    width:390px !important;
    height:540px !important;
}

.orbit-2{
    width:335px !important;
    height:475px !important;
}

.orbit-3{
    width:470px !important;
    height:315px !important;
}


/* ---------------------------------------------------------
   Glow เดิม
--------------------------------------------------------- */

.yt-glow{
    width:430px !important;
    height:430px !important;

    left:50% !important;
    top:50% !important;

    transform:translate(-50%,-50%) !important;

    background:
        radial-gradient(
            circle,
            rgba(255,210,91,.32) 0%,
            rgba(213,165,61,.18) 28%,
            rgba(213,165,61,.07) 48%,
            transparent 72%
        ) !important;

    filter:blur(12px) !important;

    opacity:.9 !important;
}


/* =========================================================
   ทำให้พื้นหลังด้านพระสว่างขึ้นเล็กน้อย
========================================================= */

.yt-hero{
    background:
        radial-gradient(
            ellipse at 76% 48%,
            rgba(222,174,62,.16) 0%,
            rgba(222,174,62,.08) 18%,
            transparent 40%
        ),
        radial-gradient(
            ellipse at 82% 55%,
            rgba(71,112,158,.20) 0%,
            transparent 43%
        ),
        linear-gradient(
            120deg,
            #06172e 0%,
            #092442 54%,
            #071a32 100%
        ) !important;
}


/* =========================================================
   GOLD PARTICLE FEEL
========================================================= */

.yt-hero-inner:after{
    content:"" !important;
    position:absolute !important;

    right:120px !important;
    top:70px !important;

    width:420px !important;
    height:520px !important;

    background:
        radial-gradient(circle at 20% 30%,rgba(255,218,111,.55) 0 1px,transparent 2px),
        radial-gradient(circle at 70% 20%,rgba(255,218,111,.45) 0 1px,transparent 2px),
        radial-gradient(circle at 45% 65%,rgba(255,218,111,.35) 0 1px,transparent 2px),
        radial-gradient(circle at 82% 55%,rgba(255,218,111,.5) 0 1px,transparent 2px),
        radial-gradient(circle at 30% 78%,rgba(255,218,111,.4) 0 1px,transparent 2px),
        radial-gradient(circle at 90% 35%,rgba(255,218,111,.35) 0 1px,transparent 2px);

    background-size:
        120px 140px,
        170px 180px,
        150px 160px,
        190px 210px,
        130px 170px,
        220px 190px;

    opacity:.55 !important;

    pointer-events:none !important;
    z-index:4 !important;
}


/* =========================================================
   VERIFY CARD — ให้ต่อเนื่องกับ HERO
========================================================= */

.yt-verify-section{
    margin-top:-70px !important;
    position:relative !important;
    z-index:20 !important;
}

.yt-verify-card{
    background:
        linear-gradient(
            135deg,
            rgba(6,27,52,.96),
            rgba(10,38,68,.96)
        ) !important;

    border:1px solid rgba(225,179,67,.48) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.38),
        0 0 35px rgba(213,165,61,.06) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .yt-hero-art{
        width:460px !important;
        height:550px !important;
        right:-70px !important;
        opacity:.92 !important;
    }

}


@media(max-width:850px){

    .yt-hero-art{
        width:420px !important;
        height:520px !important;
        right:-150px !important;
        opacity:.5 !important;
    }

}


@media(max-width:600px){

    .yt-hero-art{
        width:380px !important;
        height:470px !important;
        right:-170px !important;
        opacity:.28 !important;
    }

}
/* =========================================================
   YI THAI AMULET
   PREMIUM GOLDEN HOMEPAGE OVERRIDE
   ========================================================= */


/* =========================================================
   HERO — PREMIUM BACKGROUND
========================================================= */

.yt-hero{
    position:relative;
    min-height:650px !important;
    overflow:hidden;

    background:

        /* Golden atmosphere behind Buddha */
        radial-gradient(
            ellipse 42% 75% at 77% 48%,
            rgba(230,178,58,.20) 0%,
            rgba(213,165,61,.10) 25%,
            transparent 65%
        ),

        /* Blue atmospheric glow */
        radial-gradient(
            ellipse 65% 100% at 80% 50%,
            rgba(46,91,139,.28),
            transparent 65%
        ),

        /* Main navy gradient */
        linear-gradient(
            120deg,
            #04142b 0%,
            #061b37 42%,
            #092746 70%,
            #06172e 100%
        ) !important;
}


/* =========================================================
   HERO ATMOSPHERE
========================================================= */

.yt-hero:before{

    content:"";

    position:absolute;

    inset:-20%;

    background:

        repeating-radial-gradient(
            ellipse at 78% 48%,
            transparent 0 85px,
            rgba(236,192,82,.12) 86px 87px,
            transparent 88px 140px
        );

    transform:rotate(-12deg);

    opacity:.65;

    pointer-events:none;

}


/* =========================================================
   LARGE GOLDEN LIGHT
========================================================= */

.yt-hero:after{

    content:"";

    position:absolute;

    width:800px;
    height:800px;

    right:-260px;
    top:-100px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,211,100,.22) 0%,
            rgba(230,179,62,.13) 25%,
            rgba(213,165,61,.06) 45%,
            transparent 70%
        );

    filter:blur(18px);

    pointer-events:none;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.yt-hero-inner{
    position:relative;
    min-height:650px !important;
    display:flex;
    align-items:center;
}


/* Make text slightly more premium */

.yt-hero-content{
    position:relative;
    z-index:10;

    width:62%;

    padding:80px 0 120px;
}


/* =========================================================
   EYEBROW
========================================================= */

.yt-eyebrow{

    color:#e8bd5b !important;

    font-size:12px;

    letter-spacing:.24em;

    margin-bottom:24px;

}


.yt-eyebrow span{

    width:48px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e6b94f
        ) !important;

}


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

.yt-hero h1{

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            62px,
            7vw,
            96px
        ) !important;

    line-height:.90;

    font-weight:500;

    letter-spacing:.015em;

    color:#f5d77f !important;

    text-shadow:
        0 2px 20px rgba(225,177,60,.10);

}


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

.yt-hero h2{

    margin:
        22px 0 28px !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:30px !important;

    font-weight:400;

    letter-spacing:.20em;

    color:#f3dfac !important;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.yt-hero p{

    max-width:610px;

    margin:0;

    color:#b8c7da !important;

    font-size:15px;

    line-height:1.8;

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.yt-hero-buttons{

    display:flex;

    gap:15px;

    margin-top:35px;

}


.yt-btn{

    min-height:49px;

    padding:
        13px 25px;

    border-radius:5px;

    letter-spacing:.05em;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.yt-btn:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.35);

}


/* Gold button */

.yt-btn-gold{

    background:
        linear-gradient(
            180deg,
            #f4d477 0%,
            #d5a33b 48%,
            #ad7920 100%
        ) !important;

    border:
        1px solid #f4d477 !important;

    color:#08182f !important;

    box-shadow:
        0 5px 20px
        rgba(213,165,61,.18);

}


/* Outline button */

.yt-btn-outline{

    background:
        rgba(4,18,37,.45) !important;

    border:
        1px solid
        rgba(225,180,75,.75) !important;

    color:
        #f0d080 !important;

}


/* =========================================================
   HERO ART
========================================================= */

.yt-hero-art{

    position:absolute !important;

    right:-25px !important;

    bottom:-5px !important;

    width:560px !important;

    height:610px !important;

    z-index:4 !important;

    overflow:visible !important;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    filter:
        drop-shadow(
            0 0 25px
            rgba(239,190,63,.22)
        )
        drop-shadow(
            0 0 65px
            rgba(213,165,61,.14)
        );

}


/* =========================================================
   IMAGE — MAKE IT FEEL INTEGRATED
========================================================= */

.yt-hero-art img{

    width:100% !important;

    height:100% !important;

    object-fit:contain !important;

    object-position:
        center bottom !important;

    display:block;

    opacity:.98;

    /*
       Helps dark image backgrounds blend
       into navy hero
    */

    mix-blend-mode:
        screen;

    filter:

        brightness(1.08)

        contrast(1.08)

        saturate(1.12)

        drop-shadow(
            0 0 15px
            rgba(243,197,83,.22)
        );


    /*
       Fade image edges
    */

    -webkit-mask-image:

        radial-gradient(
            ellipse 72% 78%
            at 50% 50%,

            #000 43%,

            rgba(0,0,0,.96) 58%,

            rgba(0,0,0,.72) 70%,

            rgba(0,0,0,.30) 83%,

            transparent 100%
        );


    mask-image:

        radial-gradient(
            ellipse 72% 78%
            at 50% 50%,

            #000 43%,

            rgba(0,0,0,.96) 58%,

            rgba(0,0,0,.72) 70%,

            rgba(0,0,0,.30) 83%,

            transparent 100%
        );

}


/* =========================================================
   GOLDEN GLOW BEHIND BUDDHA
========================================================= */

.yt-hero-art:before{

    content:"";

    position:absolute;

    width:460px;

    height:520px;

    left:50%;

    top:45px;

    transform:
        translateX(-50%);

    border-radius:50%;

    background:

        radial-gradient(
            ellipse at center,

            rgba(255,217,106,.40) 0%,

            rgba(238,190,70,.24) 28%,

            rgba(213,165,61,.10) 50%,

            transparent 72%
        );

    filter:
        blur(38px);

    z-index:-1;

}


/* =========================================================
   GOLDEN LIGHT BEAM
========================================================= */

.yt-hero-art:after{

    content:"";

    position:absolute;

    width:420px;

    height:650px;

    right:-20px;

    top:-100px;

    background:

        linear-gradient(
            125deg,
            transparent 25%,
            rgba(255,215,110,.05) 35%,
            rgba(255,215,110,.20) 47%,
            rgba(255,215,110,.30) 51%,
            rgba(255,215,110,.06) 58%,
            transparent 70%
        );

    filter:
        blur(12px);

    opacity:.75;

    pointer-events:none;

    z-index:5;

}


/* =========================================================
   GOLD ORBITS
========================================================= */

.yt-orbit{

    border:
        1px solid
        rgba(240,208,128,.32) !important;

    opacity:.75;

}


.orbit-1{

    width:410px !important;

    height:550px !important;

}


.orbit-2{

    width:350px !important;

    height:480px !important;

}


.orbit-3{

    width:480px !important;

    height:320px !important;

}


/* =========================================================
   CENTRAL GLOW
========================================================= */

.yt-glow{

    width:460px !important;

    height:460px !important;

    left:50% !important;

    top:50% !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    background:

        radial-gradient(
            circle,

            rgba(255,213,98,.28) 0%,

            rgba(225,177,57,.15) 30%,

            rgba(213,165,61,.05) 52%,

            transparent 72%
        ) !important;

    filter:
        blur(15px);

}


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

.yt-hero-inner:after{

    content:"";

    position:absolute;

    right:80px;

    top:50px;

    width:560px;

    height:560px;

    background:

        radial-gradient(
            circle at 12% 24%,
            rgba(255,220,120,.65) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 34% 14%,
            rgba(255,220,120,.45) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 72% 18%,
            rgba(255,220,120,.70) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 84% 43%,
            rgba(255,220,120,.45) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 45% 72%,
            rgba(255,220,120,.45) 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 18% 66%,
            rgba(255,220,120,.35) 0 1px,
            transparent 2px
        );

    opacity:.55;

    pointer-events:none;

    z-index:6;

}


/* =========================================================
   VERIFY CARD — FLOATING GLASS
========================================================= */

.yt-verify-section{

    position:relative;

    z-index:30;

    margin-top:-75px !important;

}


.yt-verify-card{

    position:relative;

    padding:30px 34px 25px;

    border:
        1px solid
        rgba(230,183,72,.55) !important;

    border-radius:8px;

    background:

        linear-gradient(
            135deg,
            rgba(7,28,54,.97),
            rgba(9,38,69,.96)
        ) !important;

    box-shadow:

        0 25px 70px
        rgba(0,0,0,.45),

        0 0 40px
        rgba(213,165,61,.07);

    backdrop-filter:
        blur(12px);

}


/* Gold top glow */

.yt-verify-card:before{

    content:"";

    position:absolute;

    left:25px;

    right:25px;

    top:-1px;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #f0ce70,
            transparent
        );

}


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

.yt-shield{

    color:#f2ce6c !important;

    border-color:#d9aa3e !important;

    filter:
        drop-shadow(
            0 0 10px
            rgba(230,184,70,.20)
        );

}


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

.yt-verify-main h3{

    color:#f4d582 !important;

    font-family:
        Georgia,
        serif;

}


.yt-verify-main p{

    color:#9faec3 !important;

}


/* =========================================================
   SEARCH FORM
========================================================= */

.yt-search-form{

    margin-top:22px;

}


.yt-search-form input{

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

    border:
        1px solid
        rgba(213,165,61,.35);

    box-shadow:
        inset 0 1px 3px
        rgba(0,0,0,.08);

}


.yt-search-form button{

    min-width:150px;

    background:

        linear-gradient(
            180deg,
            #f1d074,
            #c38e29
        ) !important;

    border-color:
        #f2d27b !important;

    box-shadow:
        0 5px 18px
        rgba(213,165,61,.16);

}


/* =========================================================
   TRUST ROW
========================================================= */

.yt-trust-row{

    border-top:
        1px solid
        rgba(213,165,61,.16);

    margin-top:22px;

    padding-top:18px;

}


.yt-trust-item{

    color:#c8d4e3;

}


.yt-trust-icon{

    color:#eac565;

    filter:
        drop-shadow(
            0 0 7px
            rgba(234,197,101,.15)
        );

}


.yt-trust-item strong{

    color:#e9edf3;

}


.yt-trust-item small{

    color:#8497ae;

}


/* =========================================================
   SUBTLE GOLD LINE UNDER HERO
========================================================= */

.yt-hero-inner:before{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    right:0;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            rgba(213,165,61,.15) 20%,
            rgba(213,165,61,.50) 50%,
            rgba(213,165,61,.15) 80%,
            transparent 100%
        );

    z-index:15;

}


/* =========================================================
   DESKTOP — 1100px
========================================================= */

@media(max-width:1100px){

    .yt-hero-art{

        width:500px !important;

        height:570px !important;

        right:-80px !important;

    }

    .yt-hero-content{

        width:65%;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:850px){

    .yt-hero{

        min-height:720px !important;

    }

    .yt-hero-inner{

        min-height:720px !important;

    }

    .yt-hero-content{

        width:100%;

        padding-top:70px;

    }

    .yt-hero-art{

        width:470px !important;

        height:540px !important;

        right:-170px !important;

        opacity:.48;

    }

    .yt-hero h1{

        font-size:60px !important;

    }

}


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

@media(max-width:600px){

    .yt-hero{

        min-height:760px !important;

    }

    .yt-hero-inner{

        min-height:760px !important;

    }

    .yt-hero-content{

        padding:
            65px 0 260px;

    }

    .yt-hero h1{

        font-size:48px !important;

    }

    .yt-hero h2{

        font-size:20px !important;

        letter-spacing:.12em;

    }

    .yt-hero-art{

        width:400px !important;

        height:460px !important;

        right:-150px !important;

        bottom:-20px !important;

        opacity:.38;

    }

    .yt-hero-buttons{

        flex-direction:column;

        max-width:280px;

    }

    .yt-verify-section{

        margin-top:-45px !important;

    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media(max-width:420px){

    .yt-hero h1{

        font-size:42px !important;

    }

    .yt-hero h2{

        font-size:17px !important;

    }

}
/* =========================================================
   YI THAI AMULET - FINAL MOBILE MENU
   ========================================================= */
@media (max-width: 850px) {
  .desktop-menu.is-open {
    display: block !important;
    position: absolute;
    top: 86px;
    left: 16px;
    right: 16px;
    padding: 16px;
    background: rgba(3, 15, 32, .98);
    border: 1px solid rgba(213,165,61,.28);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
    backdrop-filter: blur(18px);
    z-index: 1001;
  }

  .desktop-menu.is-open .main-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .desktop-menu.is-open .main-nav a {
    padding: 14px 8px;
    border-bottom: 1px solid rgba(213,165,61,.12);
  }

  .desktop-menu.is-open .main-nav a:last-child {
    border-bottom: 0;
  }
}
/* =========================================================
   YI THAI AMULET - HERO FIX
   ปรับขนาดภาพ Hero ไม่ให้เต็ม/ล้นหน้าจอ
   ========================================================= */

.yt-home {
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(212, 170, 65, 0.14) 0%,
            rgba(212, 170, 65, 0.05) 20%,
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #03172f 0%,
            #061f3d 55%,
            #03172f 100%
        );
    overflow-x: hidden;
}

/* HERO */
.yt-hero {
    position: relative;
    min-height: 550px;
    overflow: hidden;
    background: transparent;
}

/* เส้น/แสงตกแต่งด้านหลัง */
.yt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(247, 205, 91, 0.10),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            transparent 35%,
            rgba(218, 174, 66, 0.06) 50%,
            transparent 65%
        );
}

/* Container */
.yt-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    min-height: 550px;
    margin: 0 auto;
    padding: 60px 30px;
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    gap: 50px;
    box-sizing: border-box;
}

/* ฝั่งข้อความ */
.yt-hero-content {
    position: relative;
    z-index: 3;
    min-width: 0;
}

/* ฝั่งรูป */
.yt-hero-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Glow */
.yt-hero-glow {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(225, 181, 66, 0.30) 0%,
        rgba(225, 181, 66, 0.12) 35%,
        transparent 70%
    );
    filter: blur(35px);
    pointer-events: none;
}

/* รูปพระ */
.yt-hero-image {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    max-width: 430px;
    height: 500px;

    object-fit: cover;
    object-position: center;

    border-radius: 0;

    box-shadow:
        0 0 50px rgba(214, 170, 55, 0.18),
        0 20px 60px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   ป้องกันรูป/พื้นหลังจาก CSS เดิมที่อาจขยายเต็มจอ
   ========================================================= */

.yt-hero-visual img {
    max-width: 430px !important;
    width: 100% !important;
    height: 500px !important;
    object-fit: cover !important;
}

.yt-hero,
.yt-hero-inner,
.yt-hero-visual {
    box-sizing: border-box;
}

/* =========================================================
   VERIFY SECTION
   ไม่ให้ CSS ของ Hero ไปกระทบระบบ Verify
   ========================================================= */

.yt-verify {
    position: relative;
    z-index: 5;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .yt-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
        padding: 50px 24px;
    }

    .yt-hero-content {
        order: 1;
    }

    .yt-hero-visual {
        order: 2;
        height: 430px;
    }

    .yt-hero-image {
        max-width: 380px;
        height: 430px;
    }

    .yt-hero-visual img {
        max-width: 380px !important;
        height: 430px !important;
    }
}

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

@media (max-width: 600px) {

    .yt-hero {
        min-height: auto;
    }

    .yt-hero-inner {
        min-height: auto;
        padding: 40px 18px;
        gap: 30px;
    }

    .yt-hero-visual {
        height: 360px;
    }

    .yt-hero-image {
        max-width: 300px;
        height: 360px;
    }

    .yt-hero-visual img {
        max-width: 300px !important;
        height: 360px !important;
    }
}
/* =========================================================
   YI THAI AMULET — HOME HERO SIZE FIX
   Restore the original compact layout
   ========================================================= */

.yt-home-hero {
    padding: 70px 0 55px !important;
    min-height: 520px !important;
}

.yt-home-hero .container {
    max-width: 1180px !important;
}

.yt-home-hero h1 {
    font-size: 82px !important;
    line-height: 0.95 !important;
    letter-spacing: -2px !important;
    margin: 18px 0 12px !important;
}

.yt-home-hero-subtitle {
    font-size: 27px !important;
    line-height: 1.2 !important;
    margin-bottom: 25px !important;
}

.yt-home-hero p {
    max-width: 560px !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.yt-home-hero-content {
    max-width: 620px !important;
}

.yt-home-hero-visual {
    height: 470px !important;
    max-height: 470px !important;
}

.yt-real-buddha {
    width: 360px !important;
    height: 470px !important;
    max-width: 360px !important;
    object-fit: cover !important;
    object-position: center !important;
}

.yt-buddha-halo {
    width: 350px !important;
    height: 350px !important;
}

.yt-buddha-circle {
    width: 430px !important;
    height: 430px !important;
}

.yt-buddha-glow {
    width: 430px !important;
    height: 430px !important;
}

.yt-home-buttons {
    margin-top: 25px !important;
}

.yt-home-btn {
    min-height: 48px !important;
    padding: 14px 25px !important;
}

/* Keep the verification section below the hero */
.yt-home-verify {
    margin-top: 0 !important;
}
/* =========================================
   AMULET DATABASE PAGE
   ========================================= */

.yt-amulets-page {
    min-height: 650px;
    color: #ffffff;
    background: transparent;
}

.yt-amulets-header {
    text-align: center;
    padding: 55px 20px 35px;
}

.yt-amulets-header .container {
    max-width: 1200px;
    margin: 0 auto;
}

.yt-amulets-header .eyebrow {
    color: #f2b900;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.yt-amulets-header h1 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 1px;
}

.yt-amulets-header p {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.6;
}

/* Main collection area */

.yt-amulets-grid {
    max-width: 1150px;
    margin: 20px auto 70px;
    padding: 0 20px;
}

.yt-amulets-placeholder {
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(3, 24, 48, 0.82);
    border: 1px solid rgba(224, 170, 0, 0.65);
    border-radius: 18px;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.35),
        inset 0 0 40px rgba(0, 0, 0, 0.15);
}

.yt-amulets-placeholder-inner {
    width: 100%;
    text-align: center;
    padding: 60px 30px;
}

.yt-amulets-placeholder-inner h2 {
    margin: 0 0 15px;
    color: #f2b900;
    font-size: 28px;
    font-weight: 700;
}

.yt-amulets-placeholder-inner p {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
}

/* Mobile */

@media (max-width: 768px) {

    .yt-amulets-header {
        padding: 40px 20px 25px;
    }

    .yt-amulets-header h1 {
        font-size: 34px;
    }

    .yt-amulets-header p {
        font-size: 16px;
    }

    .yt-amulets-grid {
        margin-top: 15px;
        padding: 0 15px;
    }

    .yt-amulets-placeholder {
        min-height: 280px;
    }

    .yt-amulets-placeholder-inner {
        padding: 45px 20px;
    }

    .yt-amulets-placeholder-inner h2 {
        font-size: 24px;
    }
}
/* =========================================================
   YI THAI AMULET
   CERTIFICATE DETAIL — RESTORE INFORMATION BOXES
   ========================================================= */

/* กล่องข้อมูลด้านขวาทั้งหมด */
.certificate-info,
.certificate-information,
.amulet-info,
.amulet-information,
.certificate-details,
.amulet-details,
.info-card,
.detail-card {
    background: rgba(3, 22, 43, 0.88) !important;

    border: 1px solid rgba(213, 165, 61, 0.45) !important;

    border-radius: 10px !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.28),
        inset 0 0 25px rgba(213, 165, 61, 0.025) !important;

    backdrop-filter: blur(8px) !important;

    overflow: hidden !important;
}


/* หัวข้อ Certificate Information */
.certificate-info h2,
.certificate-information h2,
.certificate-details h2,
.info-card h2 {
    color: #f5d982 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 27px !important;

    font-weight: 600 !important;

    margin-top: 0 !important;

    margin-bottom: 24px !important;

    text-shadow:
        0 0 15px rgba(213, 165, 61, 0.12) !important;
}


/* หัวข้อ Amulet Information */
.amulet-info h2,
.amulet-information h2,
.amulet-details h2,
.detail-card h2 {
    color: #f5d982 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 27px !important;

    font-weight: 600 !important;

    margin-top: 0 !important;

    margin-bottom: 24px !important;

    text-shadow:
        0 0 15px rgba(213, 165, 61, 0.12) !important;
}


/* แถวข้อมูล */
.certificate-info .info-row,
.certificate-information .info-row,
.amulet-info .info-row,
.amulet-information .info-row,
.certificate-details .info-row,
.amulet-details .info-row,
.info-card .info-row,
.detail-card .info-row {
    border-bottom:
        1px solid rgba(213, 165, 61, 0.18) !important;

    padding:
        16px 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 25px !important;
}


/* แถวสุดท้ายไม่ต้องมีเส้น */
.certificate-info .info-row:last-child,
.certificate-information .info-row:last-child,
.amulet-info .info-row:last-child,
.amulet-information .info-row:last-child,
.certificate-details .info-row:last-child,
.amulet-details .info-row:last-child,
.info-card .info-row:last-child,
.detail-card .info-row:last-child {
    border-bottom: none !important;
}


/* ชื่อ field */
.info-label,
.certificate-label,
.detail-label {
    color: #9eabc0 !important;

    font-size: 12px !important;

    letter-spacing: 0.04em !important;

    text-transform: uppercase !important;

    flex-shrink: 0 !important;
}


/* ค่า field */
.info-value,
.certificate-value,
.detail-value {
    color: #ffffff !important;

    font-size: 14px !important;

    text-align: left !important;
}


/* VERIFIED */
.info-value.verified,
.certificate-value.verified,
.status-verified,
.verified {
    color: #39e68b !important;

    font-weight: 700 !important;
}


/* จุดสีเขียวหน้า VERIFIED */
.status-verified::before,
.verified::before {
    content: "●" !important;

    color: #39e68b !important;

    margin-right: 8px !important;

    font-size: 10px !important;
}


/* =========================================================
   ถ้า HTML ใช้โครงสร้างแบบ .info-row > span
   ========================================================= */

.certificate-info .info-row > span:last-child,
.certificate-information .info-row > span:last-child,
.amulet-info .info-row > span:last-child,
.amulet-information .info-row > span:last-child {
    color: #ffffff !important;

    font-weight: 500 !important;
}


/* =========================================================
   ขอบของกล่องหลักด้านขวา
   ========================================================= */

.certificate-result-grid > *,
.verification-result-grid > *,
.verify-result-grid > *,
.certificate-detail-grid > *,
.certificate-content-grid > * {
    min-width: 0 !important;
}


/* ป้องกัน CSS เดิมทำให้กล่องโปร่ง */
.certificate-result,
.verification-result,
.verify-result,
.certificate-detail,
.certificate-content {
    position: relative !important;
}


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

@media (max-width: 768px) {

    .certificate-info,
    .certificate-information,
    .amulet-info,
    .amulet-information,
    .certificate-details,
    .amulet-details,
    .info-card,
    .detail-card {
        padding: 22px !important;

        border-radius: 8px !important;
    }

    .certificate-info h2,
    .certificate-information h2,
    .amulet-info h2,
    .amulet-information h2,
    .certificate-details h2,
    .amulet-details h2 {
        font-size: 23px !important;
    }

    .certificate-info .info-row,
    .certificate-information .info-row,
    .amulet-info .info-row,
    .amulet-information .info-row {
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 5px !important;
    }

    .info-value,
    .certificate-value,
    .detail-value {
        text-align: left !important;
    }
}
/* =========================================================
   YI THAI AMULET
   FORCE CERTIFICATE INFO BOXES
   MOBILE + DESKTOP
   ========================================================= */

/* กล่องหลัก Certificate Information และ Amulet Information */
.yt-info-card {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    box-sizing: border-box !important;

    padding: 28px 30px !important;

    border: 1px solid rgba(212, 160, 23, 0.75) !important;
    border-radius: 10px !important;

    background:
        linear-gradient(
            135deg,
            rgba(3, 22, 45, 0.96),
            rgba(5, 30, 55, 0.88)
        ) !important;

    box-shadow:
        0 0 0 1px rgba(212, 160, 23, 0.12),
        0 10px 35px rgba(0, 0, 0, 0.35) !important;

    overflow: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* เส้นกรอบด้านในบาง ๆ */
.yt-info-card::before {
    content: "" !important;

    position: absolute !important;
    inset: 7px !important;

    border: 1px solid rgba(212, 160, 23, 0.18) !important;
    border-radius: 6px !important;

    pointer-events: none !important;
}

/* หัวข้อ */
.yt-info-card h2 {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;

    margin: 0 0 24px 0 !important;

    color: #d9a92e !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* เนื้อหาด้านใน */
.yt-certificate-info,
.yt-certificate-main,
.yt-certificate-container {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    box-sizing: border-box !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* แต่ละแถวข้อมูล */
.yt-certificate-info .info-row,
.yt-certificate-info .certificate-row,
.yt-certificate-info .info-item,
.yt-certificate-info .field,
.yt-certificate-info > div {
    box-sizing: border-box !important;
}

/* เส้นคั่นข้อมูล */
.yt-info-card hr {
    border: 0 !important;
    border-top: 1px solid rgba(212, 160, 23, 0.20) !important;
}

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

@media (max-width: 768px) {

    .yt-info-card {
        width: 100% !important;

        margin: 18px 0 !important;

        padding: 24px 20px !important;

        border: 1px solid rgba(212, 160, 23, 0.80) !important;
        border-radius: 10px !important;

        background:
            linear-gradient(
                145deg,
                rgba(3, 22, 45, 0.98),
                rgba(5, 31, 56, 0.95)
            ) !important;

        box-shadow:
            0 6px 25px rgba(0, 0, 0, 0.40) !important;

        min-height: 180px !important;
    }

    .yt-info-card::before {
        inset: 6px !important;
        border-color: rgba(212, 160, 23, 0.15) !important;
    }

    .yt-info-card h2 {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .yt-info-card {
        padding: 22px 16px !important;
        border-radius: 8px !important;
    }

    .yt-info-card h2 {
        font-size: 20px !important;
    }

}