:root, [data-theme="dark"] {
        --tcg-text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        
        /* 🌙 Dark Mode: Background & Inner */
        --tcg-bg-card: rgba(51, 51, 51, 0.01); 
        --tcg-bg-inner: rgba(255, 255, 255, 0.01); 
        --tcg-shadow-sm: 0px 3px 8px rgba(0,0,0,0.01), 0px 1px 3px rgba(0,0,0,0.01), inset 0px 1px 0px rgba(255,255,255,0.05);
        
        /* 🎨 สีข้อความแบรนด์/ราคา/กรอบ (Dark Mode) */
        --brand-yuyutei: #23a6f7;
        --brand-snkrdunk: #10b981;
        --brand-tcgplayer: #cc4343;
        --brand-cardmarket: #e571f5;
        
        /* 👇 ขอบและสีพื้นฐานใน Dark Mode 👇 */
        --tcg-border: rgba(255, 255, 255, 0.15); 
        --tcg-border-strong: rgba(255, 255, 255, 0.3);
        --tcg-text-main: #ffffff;
        --tcg-text-muted: #aaaaaa;
        --tcg-bg-hover: rgba(255, 255, 255, 0.1);
        --tcg-bg-active: rgba(255, 255, 255, 0.2);
        
        /* 🎨 1. สีปุ่ม SAMPLE CARD และ ธง (Dark Mode) */
        --tcg-bg-sample-btn: #0059ff; /* พื้น samplecard */
        --tcg-text-sample-btn: #ffffff; /* ฟ้อนต์ samplecard */
        
        --tcg-bg-flag-btn: #0059ff;       /* สีพื้นหลังปุ่มธงด้านข้าง */
        --tcg-text-flag-btn: #ffffff;     /* สีฟ้อนต์ปุ่มธงด้านข้าง */

        /* 🎨 2. สีปุ่ม Dropdown ทั้งหมด (Dark Mode) */
        --tcg-bg-dropdown: #000000;       /* สีพื้นหลัง Dropdown ปกติ */
        --tcg-text-dropdown: #ffffff;     /* สีฟ้อนต์ใน Dropdown ปกติ */
        --tcg-bg-dropdown-hover: #0059ff; /* สีพื้นหลัง Dropdown ตอนเอาเมาส์ชี้ / ตอนกด */
        --tcg-text-dropdown-hover: #ffffff; /* สีฟ้อนต์ Dropdown ตอนเอาเมาส์ชี้ / ตอนกด */
        
        --tcg-text-cardset: #ffffff;
        --tcg-text-packtype: #d49906;
        --tcg-shadow-packtype: 0 0px 0px rgba(107,68,0,0.7);
        --tcg-text-releasedate: #2ecc71;
    }
    
    [data-theme="light"] {
        --tcg-text-shadow: none;
        
        /* ☀️ Light Mode: Background & Inner */
        --tcg-bg-card: rgba(248, 248, 255, 0.2); 
        --tcg-bg-inner: rgba(248, 248, 255, 0.7); 
        /* เปลี่ยนจาก inset เป็นเงาตกกระทบด้านนอก + เพิ่มแสงสะท้อนขอบบนบางๆ แบบ iOS */
        --tcg-shadow-sm: 0px 3px 8px rgba(0,0,0,0.06), 0px 1px 3px rgba(0,0,0,0.04), inset 0px 1px 0px rgba(255,255,255,1);
        
        /* 🎨 สีข้อความแบรนด์/ราคา/กรอบ (Light Mode - ปรับสีให้เข้มขึ้นเพื่อให้ตัดกับพื้นขาว) */
        --brand-yuyutei: #029af7;
        --brand-snkrdunk: #089e6c;
        --brand-tcgplayer: #cc2323;
        --brand-cardmarket: #d349e6;
        
        /* 👇 ขอบและสีพื้นฐานใน Light Mode 👇 */
        --tcg-border: rgba(0, 0, 0, 0.15); /* ปรับจาก #111111 ให้ดูสะอาดขึ้น */
        --tcg-border-strong: rgba(0, 0, 0, 0.3); /* ปรับจาก #000000 */
        --tcg-text-main: #333333;
        --tcg-text-muted: #777777;
        --tcg-bg-hover: rgba(0, 0, 0, 0.05);
        --tcg-bg-active: rgba(0, 0, 0, 0.1);

        /* 🎨 1. สีปุ่ม SAMPLE CARD และ ธง (Light Mode) */
        --tcg-bg-sample-btn: #0059ff; /* พื้น samplecard */
        --tcg-text-sample-btn: #ffffff; /* ฟ้อนต์ samplecard */
        
        --tcg-bg-flag-btn: #0059ff;       /* สีพื้นหลังปุ่มธงด้านข้าง */
        --tcg-text-flag-btn: #ffffff;     /* สีฟ้อนต์ปุ่มธงด้านข้าง */

        /* 🎨 2. สีปุ่ม Dropdown ทั้งหมด (Light Mode) */
        --tcg-bg-dropdown: #000000;       /* สีพื้นหลัง Dropdown ปกติ */
        --tcg-text-dropdown: #ffffff;     /* สีฟ้อนต์ใน Dropdown ปกติ */
        --tcg-bg-dropdown-hover: #0059ff; /* สีพื้นหลัง Dropdown ตอนเอาเมาส์ชี้ / ตอนกด */
        --tcg-text-dropdown-hover: #ffffff; /* สีฟ้อนต์ Dropdown ตอนเอาเมาส์ชี้ / ตอนกด */
        
        --tcg-text-cardset: #000000;
        --tcg-text-packtype: #b56802;
        --tcg-shadow-packtype: 0 0px 0px rgba(28, 18, 0,0.7);
        --tcg-text-releasedate: #048029;
    }

    /* 🔄 คลาสสำหรับสลับรูปโลโก้ Dark/Light Mode */
    .logo-dark-mode { display: inline-block !important; }
    .logo-light-mode { display: none !important; }
    
    [data-theme="light"] .logo-dark-mode { display: none !important; }
    [data-theme="light"] .logo-light-mode { display: inline-block !important; }

    button:focus, button:active, .nav-lang-btn-trigger:focus, .img-main-btn:focus, .price-main-btn:focus, .price-lang-btn:focus {
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    * { -webkit-tap-highlight-color: transparent; }

    .entry-header, .entry-title, .page-title, h1.post-title { display: none !important; }

    .ranktcg-card-container img, .tcg-3d-modal img, .front-card-shadow-wrapper, .graded-slab-wrapper img, .main-slab-wrapper-front, .main-slab-wrapper-back { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; -webkit-touch-callout: none; }
    .ranktcg-card-container * { outline: none !important; -webkit-tap-highlight-color: transparent; }
    .ranktcg-card-container { max-width: 1280px; margin: 0 auto; padding: 20px 0px; box-sizing: border-box; position: relative; z-index: 1; }
    
    .anti-dark-mode { color-scheme: light only !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; isolation: isolate !important; }
    .anti-dark-mode-black { color-scheme: light only !important; -webkit-text-fill-color: #000000 !important; color: #000000 !important; isolation: isolate !important; }

    .layout-split-grid { display: grid; grid-template-columns: 1fr; gap: 2px; align-items: stretch; margin-bottom: 20px; }
    @media (min-width: 992px) { .layout-split-grid { grid-template-columns: 480px 1fr; gap: 2px; align-items: stretch; } }

    .left-column-framed { display: flex; flex-direction: column; width: 100%; height: 100%; }
    
    .left-dashed-frame { border: 1px solid var(--tcg-border); border-top: none; border-radius: 0; background: var(--tcg-bg-card); display: flex; flex-direction: column; box-shadow: var(--tcg-shadow-sm); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; flex: 1; }
    
    .card-and-flags-row { display: flex; align-items: stretch; width: 100%; position: relative; }
    
    /* 1. เอา Padding ของกรอบนอกสุดออกให้ชิดขอบ */
    .card-display-area { flex: 0 0 75%; display: flex; align-items: center; justify-content: center; padding: 10px !important; box-sizing: border-box; min-width: 0; }
    
    /* 🚀 แก้ไขกล่องขวา ให้ลอยเป็น absolute เพื่อไม่ให้มันไปดันกล่องซ้ายยืด 🚀 */
    .right-pack-container { position: absolute; right: 0; top: 0; width: 25%; height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--tcg-border); background: var(--tcg-bg-inner); transition: background 0.3s ease, border-color 0.3s ease; }

    /* 2. ปลดล็อกกล่อง Container ให้ขยายกว้าง 100% ตามหน้าจอเสมอ */
    .stacked-cards-container { position: relative; width: 100%; max-width: none !important; margin: 0; display: block; }
    
    /* 3. ลบคำสั่งตีกรอบ (Aspect-ratio) ทิ้ง ปล่อยให้ความสูงยืดตามรูปการ์ดใบหน้าพอดีเป๊ะ */
    .card-overlap-wrapper { position: relative; width: 100%; display: block; margin: 0; }

    /* 4. การ์ดหน้า: ล็อคสัดส่วนกันเลย์เอาต์หดตัวตอนเน็ตช้า + ซ่อนข้อความ Front Card */
    .front-card-shadow-wrapper { 
        position: relative; width: 70%; 
        aspect-ratio: 63 / 88; /* 👈 ล็อคสัดส่วนการ์ดดิบ */
        background: var(--tcg-bg-card); /* 👈 สีพื้นหลังตอนรอโหลด */
        border-radius: 6px; overflow: hidden;
        z-index: 2; cursor: pointer; transition: transform 0.2s ease; box-shadow: none !important; filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.4)); display: block; 
    }
    .front-card-shadow-wrapper:hover { transform: translateY(-5px); }
    .front-card-img { 
        width: 100%; height: 100%; object-fit: fill; 
        display: block; border-radius: 6px; 
        position: relative; z-index: 2; 
        color: transparent; /* 👈 ซ่อนข้อความ Front Card เวลารูปไม่มา */
    }

    /* 5. การ์ดหลัง: ล็อคสัดส่วนกันยุบ + ซ่อนข้อความ Back Card */
    .back-card-img { 
        position: absolute; top: 0; right: 0; left: auto !important; height: 100%; width: auto; 
        aspect-ratio: 63 / 88; /* 👈 ล็อคสัดส่วน */
        background: var(--tcg-bg-card); /* 👈 สีพื้นหลังตอนรอโหลด */
        color: transparent; /* 👈 ซ่อนข้อความ Back Card */
        border-radius: 12px; z-index: 1; cursor: pointer; transition: transform 0.3s ease; transform: none !important; box-shadow: none !important; filter: drop-shadow(-5px 5px 15px rgba(0,0,0,0.3)); display: block; 
    }
    .back-card-img:hover { transform: translateY(-5px) scale(1.02) !important; z-index: 3; }

    /* 🚀 สไตล์สำหรับกล่อง Graded Slab เพื่อให้แยกอิสระจากความกว้าง 65% ของการ์ดปกติ 🚀 */
    .main-slab-wrapper-front, .main-slab-wrapper-back, .slab-face { container-type: inline-size; } /* เพิ่ม container-type สำหรับการอิงขนาดฟอนต์ */
    .main-slab-wrapper-front { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 80 / 135; z-index: 2; cursor: pointer; transition: transform 0.2s ease; filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.4)); }
    .main-slab-wrapper-front:hover { transform: translateY(-5px); }
    .main-slab-wrapper-back { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 80 / 135; z-index: 1; cursor: pointer; transition: transform 0.3s ease; filter: drop-shadow(-5px 5px 15px rgba(0,0,0,0.3)); }
    .main-slab-wrapper-back:hover { transform: translateY(-5px) scale(1.02) !important; z-index: 3; }
    
    /* 💡 ซ่อนข้อความ Alt ในกรอบเกรด ป้องกันตัวอักษรโผล่ตอนเน็ตช้า */
    .slab-frame-img, .slab-inner-card-img { color: transparent; }

    /* 💡 แสงเงา Shimmer วิ่งตอนโหลดรูป (เฉพาะการ์ดดิบ) */
    @keyframes shimmer-loading {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    .front-card-shadow-wrapper::after {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
        animation: shimmer-loading 1.5s infinite linear;
        pointer-events: none;
        z-index: 1; 
    }
    [data-theme="light"] .front-card-shadow-wrapper::after {
        background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
    }
    
    /* 🚀 สไตล์ของ PSA Dynamic Text 🚀 */
    .psa-label-overlay, .cgc-label-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
    .psa-label-overlay, .cgc-label-overlay { 
        position: absolute; top: 0; left: 0; 
        width: 400% !important; height: 400% !important; 
        transform: scale(0.25); transform-origin: top left; 
        z-index: 6; pointer-events: none;
        container-type: inline-size; 
    }

    .psa-label-overlay { font-family: 'Univers 55', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #000; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; -webkit-text-stroke: 0.2px #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .psa-label-overlay div { position: absolute; white-space: nowrap; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
    .psa-label-overlay .psa-line-1 { top: 7.0%; left: 11%; font-size: 3.2cqi; font-weight: normal; }
    .psa-label-overlay .psa-line-2 { top: 9.6%; left: 11%; font-size: 3.2cqi; font-weight: normal; max-width: 65%; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; }
    .psa-label-overlay .psa-line-3 { top: 7.4%; right: 11%; font-size: 3.2cqi; font-weight: normal; text-align: right; }
    .psa-label-overlay .psa-line-4 { top: 12.1%; left: 11%; font-size: 3.2cqi; font-weight: normal; }
    .psa-label-overlay .psa-line-5 { top: 10%; right: 11%; font-size: 3.2cqi; font-weight: normal; text-align: right; }
    .psa-label-overlay .psa-line-6 { top: 12.5%; right: 11%; font-size: 3.2cqi; font-weight: normal; text-align: right; }
    .psa-label-overlay .psa-line-7 { top: 15.0%; right: 11%; font-size: 3.2cqi; font-weight: normal; text-align: right; }

    .cgc-label-overlay { font-family: 'Arial', sans-serif; color: #000; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; -webkit-text-stroke: 0.2px #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .cgc-label-overlay div { position: absolute; white-space: nowrap; line-height: 1; text-transform: none; letter-spacing: 0; }
    .cgc-label-overlay .cgc-line-1 { top: 11.5%; left: 16.5%; font-size: 3.2cqi; font-weight: normal; width: 100%; max-width: 65%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cgc-label-overlay .cgc-line-2 { top: 13.8%; left: 16.5%; font-size: 3.2cqi; font-weight: normal; width: 100%; max-width: 65%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cgc-label-overlay .cgc-line-3 { top: 16%; left: 16.5%; font-size: 3.2cqi; font-weight: normal; width: 100%; max-width: 65%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cgc-label-overlay .cgc-line-4 { top: 16%; left: 47.5%; font-size: 3.0cqi; font-weight: normal; }
    .cgc-label-overlay .cgc-line-5 { top: 18.5%; left: 16.5%; font-size: 3.2cqi; font-weight: normal; max-width: 65%; overflow: hidden; text-overflow: ellipsis; }
    .cgc-label-overlay .cgc-line-6 { top: 21%; left: 46%; font-size: 2.8cqi; font-weight: normal; color: #000; }

    #graded-overlap-wrapper[data-brand="PSA10" i] .slab-inner-card-img, #slab3DCard[data-brand="PSA10" i] .slab-inner-card-img { width: 79.4% !important; top: 26.4% !important; left: 10.3% !important; border-radius: 4px !important; }
    #graded-overlap-wrapper[data-brand="BGS10-BLACK" i] .slab-inner-card-img, #slab3DCard[data-brand="BGS10-BLACK" i] .slab-inner-card-img { width: 80% !important; top: 25% !important; left: 10% !important; border-radius: 4px !important; }
    #graded-overlap-wrapper[data-brand="CGC10" i] .slab-inner-card-img, #slab3DCard[data-brand="CGC10" i] .slab-inner-card-img { width: 79.5% !important; top: 29% !important; left: 10% !important; border-radius: 12px !important; }

    @media (max-width: 600px) {
        .ranktcg-card-container { padding: 15px 5px !important; }
        .layout-split-grid { gap: 2px !important; margin-top: 5px !important; }
        .card-loader-overlay { top: 45%; left: 40%; }
        .dropdown-arrow { right: 5px; }
        .front-card-shadow-wrapper { width: 70%; } 
    }

    @media (min-width: 601px) and (max-width: 991px) {
        .ranktcg-card-container { padding: 15px 15px !important; }
        .layout-split-grid { gap: 2px !important; margin-top: 10px !important; }
        .card-loader-overlay { top: 45%; left: 40%; }
        .front-card-shadow-wrapper { width: 65%; } 
    }
    
    .right-set-image-box { flex: 1; min-height: 0; border-bottom: 1px solid var(--tcg-border); display: flex; align-items: center; justify-content: center; padding: 5px; cursor: pointer; transition: background 0.2s ease; overflow: hidden; }
    .right-set-image-box:last-child { border-bottom: none !important; }
    .right-set-image-box img { max-height: 90%; max-width: 90%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); transition: transform 0.2s ease; }
    .right-set-image-box:hover img { transform: scale(1.1); }

    .nav-left-col { flex: 0 0 50%; position: relative; min-width: 0; display: flex; }
    .nav-right-col { flex: 0 0 50%; position: relative; border-left: 1px solid var(--tcg-border); background: var(--tcg-bg-inner); transition: background 0.3s ease, border-color 0.3s ease; min-width: 0; }

    .dropdown-arrow-left { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; color: inherit; opacity: 0.6; transition: opacity 0.2s; pointer-events: none; }
    .dropdown-arrow-right { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; color: inherit; opacity: 0.6; transition: opacity 0.2s; pointer-events: none; }
    button:hover .dropdown-arrow-left, button:hover .dropdown-arrow-right { opacity: 1; }

    .img-main-type-nav-horizontal { display: flex; border-top: 1px solid var(--tcg-border); border-bottom: 1px solid var(--tcg-border); background: var(--tcg-bg-inner); transition: background 0.3s ease, border-color 0.3s ease; height: 35px; width: 100%; box-sizing: border-box; }
    
    .img-main-btn { width: 100%; height: 100%; flex: 1; padding: 1px 5px; font-size: 0.85em; font-weight: 900; color: var(--tcg-text-muted); background: transparent; border: none !important; border-radius: 0; margin: 0; cursor: pointer; transition: 0.1s; border-right: 1px solid var(--tcg-border) !important; display: flex; align-items: center; justify-content: center; position: relative; }
    .img-main-btn:last-child { border-right: none !important; }
    .img-main-btn.active { color: var(--tcg-text-sample-btn) !important; background: var(--tcg-bg-sample-btn) !important; }

    .nav-lang-btn-trigger { width: 100%; height: 100%; border: none !important; background: var(--tcg-bg-flag-btn) !important; color: var(--tcg-text-flag-btn) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: 0.1s; padding: 0; }
    .nav-lang-btn-trigger:focus { outline: none !important; }
    .nav-lang-btn-trigger .tab-text { color: var(--tcg-text-flag-btn) !important; }

    .dropdown-item-type { padding: 12px 10px; text-align: center; cursor: pointer; font-size: 0.85em; font-weight: bold; color: var(--tcg-text-dropdown); transition: 0.2s; border-bottom: 1px solid var(--tcg-border); }
    .dropdown-item-type:last-child { border-bottom: none; }
    .dropdown-item-type:hover { background: var(--tcg-bg-dropdown-hover); color: var(--tcg-text-dropdown-hover); }
    .dropdown-item-type .tab-text { color: inherit !important; }

    .loading-dim { opacity: 0.5; transition: opacity 0.1s ease; }
    .card-loader-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
    .card-spinner { width: 45px; height: 45px; border: 5px solid rgba(255, 255, 255, 0.2); border-top-color: #ffda00; border-radius: 50%; animation: spin-loader 1s linear infinite; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    @keyframes spin-loader { 100% { transform: rotate(360deg); } }

    .gallery-nav-btn { background: var(--tcg-bg-card); color: var(--tcg-text-main); border: 1px solid var(--tcg-border-strong); border-radius: 4px; width: 30px; height: 30px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 0.9em; transition: 0.1s; }
    .gallery-nav-btn:hover { background: var(--tcg-bg-hover); }

    .right-info-col { display: flex; flex-direction: column; min-width: 0; height: 100%; }

    .prices-section { background: var(--tcg-bg-card); border: 1px solid var(--tcg-border); border-radius: 0; overflow: hidden; box-shadow: var(--tcg-shadow-sm); display: flex; flex-direction: column; margin-top: 0; margin-bottom: 0; flex: 1; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
    .price-nav-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--tcg-border); background: var(--tcg-bg-inner); width: 100%; transition: background 0.3s ease, border-color 0.3s ease; }
    
    .price-main-type-nav { display: flex; flex: 0 0 50%; border-right: 1px solid var(--tcg-border); }
    @media (min-width: 992px) { .price-main-type-nav { flex: 0 0 60%; } }

    .price-main-btn { flex: 1; padding: 4px 5px; font-size: 0.85em; font-weight: 900; color: var(--tcg-text-muted); background: transparent; border: none !important; outline: none !important; box-shadow: none !important; cursor: pointer; transition: 0.1s; border-radius: 4px; margin: 2px; display: flex; flex-direction: row; align-items: center; justify-content: center; }
    .price-main-btn:hover { color: var(--tcg-text-main); background: var(--tcg-bg-hover); }
    .price-main-btn.raw-active { background: #0059ff !important; color: #fff !important; }
    .price-main-btn.graded-active { background: #0059ff !important; color: #fff !important; text-shadow: 0px 1px 2px rgba(0,0,0,0.3); }

    .price-lang-type-nav { display: flex; flex: 1; padding: 4px; gap: 4px; justify-content: flex-start; }
    .price-lang-btn { flex: 0 0 calc(20% - 4px); padding: 4px 0; font-size: 0.75em; font-weight: bold; color: var(--tcg-text-muted); background: var(--tcg-bg-inner); border: 1px solid var(--tcg-border); border-radius: 4px; cursor: pointer; transition: 0.05s; box-sizing: border-box; }
    .price-lang-btn:hover { color: var(--tcg-text-main); background: var(--tcg-bg-hover); }
    .price-lang-btn.active { background: var(--tcg-bg-active) !important; color: var(--tcg-text-main) !important; border-color: var(--tcg-border-strong) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; }

    .tab-flag { font-size: 1.2em; line-height: 1; transition: transform 0.1s; }
    button.active .tab-flag { transform: scale(1.1); }
    .tab-text { font-size: 0.85em; font-weight: bold; color: var(--tcg-text-muted); transition: 0.1s; margin: 0; }
    button.active .tab-text { color: var(--tcg-text-main) !important; }

    .compact-set-box { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px !important; min-height: auto !important; height: auto !important; box-sizing: border-box; background: transparent; border-bottom: none; box-shadow: none; margin-top: 0; margin-bottom: auto; transition: background 0.3s ease; }
    .type-header-box { background: #0a0a0a !important; color: #fff; padding: 5px 20px 7px; border-radius: 0; text-align: center; width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.1); border-bottom: none; margin-bottom: 0; box-shadow: inset 0 2px 8px rgba(0,0,0,0.5); z-index: 2; position: relative; }

    .card-info-grid { display: flex; flex-direction: column; width: 100%; flex: 1; }
    .status-column { padding: 2px; border-right: none; transition: border-color 0.3s ease; }
    .effect-column { padding: 0; display: flex; flex-direction: column; flex: 1; }

    .layout-inline-row { display: flex; flex-direction: row; width: 100%; align-items: stretch; background: var(--tcg-bg-card); transition: background 0.3s ease; }
    .layout-inline-header { flex: 0 0 135px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-right: 1px solid var(--tcg-border); }
    .layout-inline-content { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; padding: 5px 15px; box-sizing: border-box; background: var(--tcg-bg-inner); box-shadow: var(--tcg-shadow-sm); }
    
    @media (max-width: 768px) {
        .layout-inline-row { flex-direction: column; }
        .layout-inline-header { flex: auto; width: 100%; border-right: none !important; border-bottom: 1px solid var(--tcg-border) !important; padding: 6px 20px !important; }
    }
    
@media (min-width: 769px) {
    .effect-desktop-float { display: block !important; padding: 0 !important; }
    .effect-desktop-float > .layout-inline-header { float: left; width: 135px !important; flex: none !important; padding: 4px 1px !important; margin-right: 10px; margin-bottom: 0 !important; border-right: 1px solid var(--tcg-border) !important; border-bottom: 1px solid var(--tcg-border) !important; }
    .effect-desktop-float > .layout-inline-content { display: block !important; padding: 5px 10px !important; background: transparent !important; box-shadow: none !important; }
    .effect-desktop-float::after { content: ""; display: table; clear: both; }
}
    
    .info-section-title { text-align: center; font-weight: bold; font-size: 1.1em; color: var(--tcg-text-main); margin: 0; padding: 0; border: none; text-shadow: var(--tcg-text-shadow); transition: color 0.3s ease; }

    .card-info-tabs-wrapper { background: var(--tcg-bg-card) !important; border: 1px solid var(--tcg-border); border-radius: 0; box-shadow: var(--tcg-shadow-sm); display: flex; flex-direction: column; overflow: hidden; width: 100%; margin-bottom: 2px; position: relative; z-index: 1; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; flex: 1; }
    .card-info-tabs-wrapper.connected { border-top: none; border-radius: 0; }

    .card-badges-inside-tab { display: grid; gap: 6px; margin: 0; grid-template-columns: repeat(3, 1fr); } 
    @media (max-width: 768px) { .card-badges-inside-tab { grid-template-columns: repeat(2, 1fr); } }
    .badge-item { border-radius: 6px; padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; font-weight: bold; min-height: 38px; overflow: hidden; border: 1px solid var(--tcg-border); background: var(--tcg-bg-inner); color: var(--tcg-text-main); box-shadow: var(--tcg-shadow-sm); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
    .badge-item-framed { background: var(--tcg-bg-card); }
    .badge-label { flex: 0 0 auto; text-align: left; z-index: 1; }
    .badge-value { flex: 1 1 auto; text-align: right; display: flex; justify-content: flex-end; align-items: center; z-index: 1; }

    #info-tab-effect p { margin: 0; color: var(--tcg-text-main) !important; text-shadow: var(--tcg-text-shadow); line-height: 1.4; font-size: 0.85em; transition: color 0.3s ease; word-break: break-word; overflow-wrap: break-word; }
    .raw-pane-group strong, .grade-pane-group strong { color: var(--tcg-text-main) !important; text-shadow: var(--tcg-text-shadow); font-size: 1.1em; display:block; margin-bottom:10px; border-bottom: 1px solid var(--tcg-border); padding-bottom: 8px; transition: color 0.3s ease, border-color 0.3s ease; }

    @keyframes fadeInFast { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
    .main-pane { display: none; animation: fadeInFast 0.15s ease-out; flex-direction: column; }
    .main-pane.active { display: flex; }

    .tcg-tabs-wrapper { display: flex; flex-direction: column; width: 100%; } 
    .tcg-tabs-content { padding: 15px 10px 15px 10px; width: 100%; box-sizing: border-box; }
    .tcg-tab-pane { display: none; animation: fadeInFast 0.15s ease-out; }
    .tcg-tab-pane.active { display: block; }

    .graded-split-layout { display: flex; align-items: stretch; gap: 20px; margin-top: 10px; }
    .vertical-grade-nav { display: flex; flex-direction: column; gap: 8px; width: 100px; flex-shrink: 0; border-right: 1px solid var(--tcg-border); padding-right: 20px; transition: border-color 0.3s ease; }
    .vertical-grade-content { flex: 1; min-width: 0; }
    .inner-tab-btn { width: 100%; border: none; background: transparent; padding: 10px 5px; cursor: pointer; border-radius: 4px; font-weight: bold; color: var(--tcg-text-muted); font-size: 0.85em; transition: 0.1s; border: 1px solid var(--tcg-border); background: var(--tcg-bg-inner); }
    .inner-tab-btn:hover { color: var(--tcg-text-main); background: var(--tcg-bg-hover); }
    .inner-tab-btn.active { background: #D4AF37; color: #fff; border-color: #D4AF37; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
    .inner-tab-pane { display: none; animation: fadeInFast 0.15s ease-out; align-items: center; justify-content: space-between; gap: 20px; }
    .inner-tab-pane.active { display: flex; }
    .price-list-col { flex: 1; min-width: 0; border-right: 1px solid var(--tcg-border); padding-right: 20px; transition: border-color 0.3s ease; }
    
    @media (max-width: 600px) { 
        .graded-split-layout { flex-direction: column; gap: 15px; }
        .vertical-grade-nav { width: 100%; flex-direction: row; flex-wrap: wrap; padding-right: 0; border-right: none; border-bottom: 1px solid var(--tcg-border); padding-bottom: 15px; justify-content: flex-start; }
        .inner-tab-btn { width: auto; min-width: 80px; padding: 8px 15px; flex: 0 0 auto; }
        .price-list-col { padding-right: 10px; border-right: none; }
        .inner-tab-pane { gap: 10px; align-items: flex-start; }
    }

    .graded-slab-wrapper { position: relative; width: 90px; aspect-ratio: 80 / 135; border-radius: 8px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: var(--tcg-shadow-md); }
    .graded-slab-wrapper:hover { transform: scale(1.05) translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
    .slab-frame-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; z-index: 5; pointer-events: none; -webkit-transform: translateZ(1px); transform: translateZ(1px); }
    .slab-inner-card-img { position: absolute; top: 26.4%; left: 10.3%; width: 79.4%; height: auto; object-fit: contain; z-index: 1; border-radius: 4px; background: transparent; transform-origin: center center; -webkit-transform: scale(0.99) translateZ(0); transform: scale(0.99) translateZ(0); transition: none !important; }

    .tcg-3d-modal { 
        display: none; position: fixed; top: 0; left: 0; width: 100vw; 
        height: 100dvh; min-height: 100vh;
        background: rgba(0, 0, 0, 0.9); z-index: 9999999; 
        justify-content: center; align-items: center; flex-direction: column; 
        perspective: 1000px; cursor: grab; 
        -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; -webkit-touch-callout: none; 
        touch-action: none; 
        overscroll-behavior: none; 
    }
    .tcg-3d-modal:active { cursor: grabbing; }

    .tcg-3d-wrapper { 
        position: relative; 
        width: min(85vw, calc(70dvh * (63 / 88))); 
        max-width: 450px; 
        aspect-ratio: 63/88; 
        transform-style: preserve-3d; transition: transform 0.1s; 
        will-change: transform; 
    }

    /* 🚀 เอาเส้นยุกยิกตอน 3D ออก (ลบ outline, border, box-shadow) 🚀 */
    .tcg-3d-face { 
        position: absolute; width: 100%; height: 100%; box-shadow: 0 25px 50px rgba(0,0,0,0.6); 
        backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; -webkit-user-drag: none; 
        will-change: transform;
    }

    .tcg-3d-front { z-index: 5; transform: rotateY(0deg) translateZ(1.7px); background: transparent; border-radius: 10px; }
    #modal-front-img { width: 100%; height: 100%; object-fit: contain; transition: none !important; border-radius: 12px; color: transparent; }

    .tcg-3d-back { z-index: 1; transform: rotateY(180deg) translateZ(1.7px); background: transparent; border-radius: 14px; }
    #modal-back-img { width: 100%; height: 100%; object-fit: contain; transition: none !important; border-radius: 10px; color: transparent; }

    .tcg-card-layer { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 13px; 
        background: #ffffff; pointer-events: none; 
    }

    .slab-3d-wrapper { 
        position: relative; 
        width: min(85vw, calc(70dvh * (80 / 135))); 
        max-width: 330px; 
        aspect-ratio: 80 / 135; 
        transform-style: preserve-3d; transition: transform 0.1s; 
        will-change: transform; 
    }
    .slab-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 15px; background: transparent; }
    .slab-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 15px; background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), #ffffff; pointer-events: none; }

    .close-modal-btn { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 100000; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
    
    .drag-hint-modal { pointer-events: none; margin-top: 25px; }
    
    /* 🚀 CSS สำหรับจัด Layout ราคาและกราฟ 🚀 */
    .price-chart-layout {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch; /* ให้กล่องซ้ายขวาสูงเท่ากันเป๊ะ */
        width: 100%;
        gap: 15px;
    }
    .price-column-left {
        flex: 1 1 100%;
        background: var(--tcg-bg-inner); /* สีพื้นหลังกล่อง */
        border-radius: 8px; /* มุมมนเท่ากราฟ */
        border: 1px solid var(--tcg-border); /* เส้นขอบเท่ากราฟ */
        padding: 10px 15px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center; /* ให้อยู่กึ่งกลาง */
        box-sizing: border-box;
    }
    .chart-column-right {
        flex: 1 1 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .chart-column-right .price-chart-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    @media (min-width: 768px) {
        .price-column-left { flex: 0 0 calc(35% - 7.5px); }
        .chart-column-right { flex: 0 0 calc(65% - 7.5px); }
    }

    .tcg-post-nav-btn {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background: var(--tcg-bg-card); /* ดึงสีพื้นหลังการ์ดมาใช้ */
        border: 1px solid var(--tcg-border-strong);
        color: var(--tcg-text-main);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        text-decoration: none;
        z-index: 9999; /* ให้อยู่บนสุดไม่โดนบัง */
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        transition: all 0.2s ease;
        backdrop-filter: blur(5px);
    }
    .tcg-post-nav-btn:hover {
        background: #0059ff; /* สีฟ้าตอนเอาเมาส์ชี้ */
        color: #fff;
        border-color: #0059ff;
        transform: translateY(-50%) scale(1.1); /* ขยายขนาดนิดนึงตอนชี้ */
    }
    .tcg-post-nav-prev { left: 20px; }
    .tcg-post-nav-next { right: 20px; }

    /* ปรับขนาดบนหน้าจอเล็ก/แท็บเล็ต */
    @media (max-width: 1400px) {
        .tcg-post-nav-prev { left: 10px; width: 45px; height: 45px; }
        .tcg-post-nav-next { right: 10px; width: 45px; height: 45px; }
    }
    
    /* ปรับบนมือถือ ให้เลื่อนมาอยู่ด้านล่างจอ จะได้ไม่บังรูปการ์ด */
    @media (max-width: 768px) {
        .tcg-post-nav-btn {
            top: auto;
            bottom: 20px; /* ลอยอยู่ขอบล่าง */
            transform: none;
            width: 40px;
            height: 40px;
        }
        .tcg-post-nav-btn:hover {
            transform: scale(1.1);
        }
        .tcg-post-nav-prev { left: 15px; }
        .tcg-post-nav-next { right: 15px; }
    }
    
    /* ซ่อนราคา ตอนโหลดแล้วค่อยๆ แสดง */
        .tcg-dynamic-price {
         opacity: 0;
        transition: opacity 0.2s ease-in;
    }
    
    /* =======================================
             OP Art Badge Animation
    ========================================= */
    @keyframes opArtAnimation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* คลาสพื้นฐานสำหรับป้าย Art */
    .op-art-badge {
        padding: 3px 4px; min-width: 20px; text-align: center; box-sizing: border-box; 
        font-size: 0.7rem; font-weight: 900; line-height: 1; border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }

    .op-art-badge-base {
        border: 1px solid #999; 
        background: rgba(0, 0, 0, 1); 
        color: #ddd !important; 
        -webkit-text-fill-color: #ddd !important;
    }

    .op-art-badge-alt {
        border: 1px solid transparent;
        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) padding-box,
                    linear-gradient(124deg, #ff6c54, #ff8a6e, #fcb150, #e6d655, #b3db54, #54db90, #51cede, #5a7be3, #a37be3) padding-box,
                    linear-gradient(124deg, #ff6c54, #ff8a6e, #fcb150, #e6d655, #b3db54, #54db90, #51cede, #5a7be3, #a37be3) border-box;
        background-size: 200% 200%;
        animation: opArtAnimation 4s ease infinite;
        color: #fff; 
        text-shadow: 1px 1px 2px rgba(0,0,0,1);

    } 

    .op-art-badge-manga-white {
        border: 1px solid transparent;
        background: linear-gradient(124deg, #000000, #1c1c1c, #424242, #f0f0f0, #706f6f, #706f6f, #424242, #1c1c1c, #1c1c1c) padding-box,
                    linear-gradient(124deg, #000000, #1c1c1c, #424242, #f0f0f0, #706f6f, #706f6f, #424242, #1c1c1c, #1c1c1c) border-box;
        background-size: 200% 200%;
        animation: opArtAnimation 4s ease infinite;
        color: #fff; 
        text-shadow: 1px 1px 2px rgba(0,0,0,1);

    } 
    
    .op-art-badge-manga-gold {
        border: 1px solid transparent;
        background: linear-gradient(124deg, #ff8400, #ff9900, #ffb300, #ffc400, #f7eb92, #faf4ca, #ffb300, #ff9900, #ff9900) padding-box,
                    linear-gradient(124deg, #ff8400, #ff9900, #ffb300, #ffc400, #f7eb92, #faf4ca, #ffb300, #ff9900, #ff9900) border-box;
        background-size: 200% 200%;
        animation: opArtAnimation 4s ease infinite;
        color: #fff; 
        text-shadow: 1px 1px 2px rgba(0,0,0,1);

    } 

    .op-art-badge-manga-red {
        border: 1px solid transparent;
        background: linear-gradient(124deg, #ff0000, #db0404, #e33636, #e34040, #f79292, #f2aaaa, #e33636, #db0404, #db0404) padding-box,
                    linear-gradient(124deg, #ff0000, #db0404, #e33636, #e34040, #f79292, #f2aaaa, #e33636, #db0404, #db0404) border-box;
        background-size: 200% 200%;
        animation: opArtAnimation 4s ease infinite;
        color: #fff; 
        text-shadow: 1px 1px 2px rgba(0,0,0,1);

    }