/*----- RESET & BASE -----*/
   :root {
            --accent-color: #03fca1;
        }
        body {
           margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
        }
        * {
            box-sizing: border-box;
        }
#section-1-ai {
	background-image: url('https://ai.gab.cantho.vn/wp-content/uploads/2025/08/anh-bia-gab-ai-pc-1.webp');
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

 .slide-section-ai {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            overflow: hidden;
            backface-visibility: hidden;
            transform-style: preserve-3d;
        }

        .slide-section-ai.active-ai {
            display: block;
            z-index: 1;
        }

        /* Shader Canvas Styling */
        .shader-canvas-ai {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Place it behind the content */
            display: block;
        }

        /* NEW Animations */
        @keyframes zoomIn {
            from { opacity: 0; transform: scale(1); }
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes zoomOut {
            from { opacity: 1; transform: scale(1); }
            to { opacity: 0; transform: scale(1); }
        }
        @keyframes flipIn {
            from { transform: rotateY(-90deg); opacity: 0; }
            to { transform: rotateY(0deg); opacity: 1; }
        }
        @keyframes flipOut {
            from { transform: rotateY(0deg); opacity: 1; }
            to { transform: rotateY(90deg); opacity: 0; }
        }

        .effect-zoom-in-ai { animation: zoomIn 1s forwards; }
        .effect-zoom-out-ai { animation: zoomOut 1s forwards; z-index: 0; }
        .effect-flip-in-ai { animation: flipIn 1s forwards; }
        .effect-flip-out-ai { animation: flipOut 1s forwards; z-index: 0; }


        /* Loader */
        .loader-ai {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease-in-out;
        }
        .loader-ai.visible-ai {
            opacity: 1;
            pointer-events: auto;
        }
        .loader-spinner-ai {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Chat UI Mockup */
        .chat-container-inner-ai {
            max-width: 800px;
            margin: auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            position: relative;
        }
        .chat-header-ai {
            padding: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
        }

        .chat-messages-ai { flex-grow: 1; padding: 1rem; overflow-y: auto; }
        .chat-msg-ai { margin-bottom: 1rem; display: flex; }
        .chat-user-ai { justify-content: flex-end; }
        .chat-bot-ai { justify-content: flex-start; }
        .chat-bubble-ai {
            padding: 0.75rem 1rem;
            border-radius: 1.25rem;
            max-width: 70%;
        }
        .chat-user-ai .chat-bubble-ai { background-color: #3b82f6; color: white; border-top-right-radius: 0.5rem; }
        .chat-bot-ai .chat-bubble-ai { background-color: #e5e7eb; color: #1f2937; border-top-left-radius: 0.5rem; }
        .chat-input-bar-ai { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; }
        .chat-input-ai { flex-grow: 1; border: none; padding: 0.75rem; border-radius: 1.5rem; background-color: rgba(255, 255, 255, 0.2); color: white; }
        .chat-input-ai::placeholder { color: #d1d5db; }
        .chat-input-ai:focus { outline: none; box-shadow: 0 0 0 2px #3b82f6; }
        .chat-send-btn-ai {
            margin-left: 0.5rem;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-button-ai {
            background-color: rgba(0,0,0,0.2);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s;
            border: 1px solid rgba(255,255,255,0.3);
        }
        .nav-button-ai:hover {
            background-color: rgba(0,0,0,0.4);
        }
/*----  Work Page ------*/


	#copyright-gradient { position: relative; width: 350px; top: 5px; left: 50%; transform: translateX(-50%); z-index: 99; background-color: rgba(0, 0, 0, 0.4); color: white; padding: 3px 15px; border-radius: 20px; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.2); text-align: center; box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.8); margin-bottom: 20px;}
		#copyright-gradient a {color: #fff;}
		.info-gradient {
			 display: flex; 
			flex-direction: column;
			gap: 1px;
			position: absolute;
			transform: translateX(-50%);
			left: 89%;
			z-index: 999;
		}
		.ps-btn-zalo {
  background: linear-gradient(to right, rgb(0,0,0), rgb(3,3,3), rgb(5,5,5), rgb(8,8,8), rgb(10,10,10), rgb(13,13,13), rgb(15,15,15), rgb(18,18,18), rgb(20,20,20), rgb(23,23,23), rgb(26,26,26), rgb(28,28,28), rgb(31,31,31), rgb(33,33,33), rgb(36,36,36), rgb(38,38,38), rgb(41,41,41), rgb(43,43,43), rgb(46,46,46), rgb(48,48,48), rgb(51,51,51), rgb(54,54,54), rgb(56,56,56), rgb(59,59,59), rgb(61,61,61), rgb(64,64,64), rgb(66,66,66), rgb(69,69,69), rgb(71,71,71), rgb(74,74,74), rgb(77,77,77), rgb(79,79,79), rgb(82,82,82), rgb(84,84,84), rgb(87,87,87), rgb(89,89,89), rgb(92,92,92), rgb(94,94,94), rgb(97,97,97), rgb(99,99,99), rgb(102,102,102), rgb(105,105,105), rgb(107,107,107), rgb(110,110,110), rgb(112,112,112), rgb(115,115,115), rgb(117,117,117), rgb(120,120,120), rgb(122,122,122), rgb(125,125,125), rgb(128,128,128), rgb(130,130,130), rgb(133,133,133), rgb(135,135,135), rgb(138,138,138), rgb(140,140,140), rgb(143,143,143), rgb(145,145,145), rgb(148,148,148), rgb(150,150,150), rgb(153,153,153), rgb(156,156,156), rgb(158,158,158), rgb(161,161,161), rgb(163,163,163), rgb(166,166,166), rgb(168,168,168), rgb(171,171,171), rgb(173,173,173), rgb(176,176,176), rgb(179,179,179), rgb(181,181,181), rgb(184,184,184), rgb(186,186,186), rgb(189,189,189), rgb(191,191,191), rgb(194,194,194), rgb(196,196,196), rgb(199,199,199), rgb(201,201,201), rgb(204,204,204), rgb(207,207,207), rgb(209,209,209), rgb(212,212,212), rgb(214,214,214), rgb(217,217,217), rgb(219,219,219), rgb(222,222,222), rgb(224,224,224), rgb(227,227,227), rgb(230,230,230), rgb(232,232,232), rgb(235,235,235), rgb(237,237,237), rgb(240,240,240), rgb(242,242,242), rgb(245,245,245), rgb(247,247,247), rgb(250,250,250), rgb(252,252,252), rgb(255,255,255));
			text-shadow: 1px 2px 3px #000;
  color: #fff;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  border-right: none;
  border-top: none;
  padding: 8px 24px;
  border-radius: 7px;
  font-size: 1.08rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.17s, color 0.14s;
  box-shadow: none;
  outline: none;
width: 250px;
			}

.ps-btn-hotline {
  background: linear-gradient(to right, rgb(248,249,250), rgb(246,247,248), rgb(244,245,246), rgb(242,243,244), rgb(239,241,242), rgb(237,238,240), rgb(235,236,237), rgb(233,234,235), rgb(231,232,233), rgb(229,230,231), rgb(227,228,229), rgb(224,226,227), rgb(222,224,225), rgb(220,221,223), rgb(218,219,221), rgb(216,217,219), rgb(214,215,217), rgb(211,213,214), rgb(209,211,212), rgb(207,209,210), rgb(205,207,208), rgb(203,204,206), rgb(201,202,204), rgb(199,200,202), rgb(196,198,200), rgb(194,196,198), rgb(192,194,196), rgb(190,192,194), rgb(188,190,191), rgb(186,188,189), rgb(184,185,187), rgb(181,183,185), rgb(179,181,183), rgb(177,179,181), rgb(175,177,179), rgb(173,175,177), rgb(171,173,175), rgb(168,171,173), rgb(166,168,171), rgb(164,166,168), rgb(162,164,166), rgb(160,162,164), rgb(158,160,162), rgb(156,158,160), rgb(153,156,158), rgb(151,154,156), rgb(149,151,154), rgb(147,149,152), rgb(145,147,150), rgb(143,145,148), rgb(141,143,146), rgb(138,141,143), rgb(136,139,141), rgb(134,137,139), rgb(132,135,137), rgb(130,132,135), rgb(128,130,133), rgb(125,128,131), rgb(123,126,129), rgb(121,124,127), rgb(119,122,125), rgb(117,120,123), rgb(115,118,120), rgb(113,115,118), rgb(110,113,116), rgb(108,111,114), rgb(106,109,112), rgb(104,107,110), rgb(102,105,108), rgb(100,103,106), rgb(98,101,104), rgb(95,98,102), rgb(93,96,100), rgb(91,94,97), rgb(89,92,95), rgb(87,90,93), rgb(85,88,91), rgb(82,86,89), rgb(80,84,87), rgb(78,82,85), rgb(76,79,83), rgb(74,77,81), rgb(72,75,79), rgb(70,73,77), rgb(67,71,74), rgb(65,69,72), rgb(63,67,70), rgb(61,65,68), rgb(59,62,66), rgb(57,60,64), rgb(55,58,62), rgb(52,56,60), rgb(50,54,58), rgb(48,52,56), rgb(46,50,54), rgb(44,48,51), rgb(42,45,49), rgb(39,43,47), rgb(37,41,45), rgb(35,39,43), rgb(33,37,41));
  color: #fff;
	text-shadow: 1px 2px 3px #000;
  border-right: 4px solid #fff;
  border-top: 4px solid #fff;
  border-left: none;
  border-bottom: none;
  padding: 8px 24px;
  border-radius: 7px;
  font-size: 1.08rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.17s, color 0.14s;
  box-shadow: none;
  outline: none;
	width: 250px;
	margin-top: 15px;
}

.ps-btn-hotline:hover,
.ps-btn-hotline:focus,
.ps-btn-zalo:hover,
.ps-btn-zalo:focus {
  background: #111;
  color: #fff;
}
        /* Container & Layout */
        .container-gradient {
            max-width: 90vw;
            margin-left: auto;
            margin-right: auto;
        }

        .main-layout-gradient {
            display: flex;
            flex-direction: row; /* Desktop-first: default to side-by-side */
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 1023px) { /* Switch to column on smaller screens */
            .main-layout-gradient {
                flex-direction: column;
            }
        }

        /* Typography */
        .main-title-gradient {
            text-align: center;
            font-size: 2.8rem;
            line-height: .5rem;
            font-weight: 800;
			text-shadow: 1px 2px 1px #fff;
            margin-bottom: 1.5rem;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            background-image: linear-gradient(to right, #38bdf8, #3b82f6);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .subtitle-gradient {
            margin-bottom: 1.9rem;
            color: white;
            text-align: center;
			
        }

        .card-title-gradient {
            font-size: 1.2rem!important;
            line-height: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: white!important;
        }

        /* Card Styles */
        .card-gradient {
            background-color: #1f2937;
            padding: 1.5rem;
            border-radius: 0.5rem;
        }
        
        .card-full-width-gradient {
            margin-top: 1.5rem;
        }

        /* Tabs */
        #tabs-container-gradient {
            display: flex;
            border-bottom: 1px solid #374151;
            margin-bottom: 1.2rem;
            justify-content: center;
            overflow-x: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        #tabs-container-gradient::-webkit-scrollbar {
            display: none;
        }
        .tab-button-gradient {
            padding: 10px 16px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 20px;
            font-weight: 500;
            white-space: nowrap;
            border-top-right-radius: 7px;
            border-top-left-radius: 7px;
            border: none;
            background: transparent;
        }
        .tab-button-gradient:hover {
            color: #fff;
            background: #006aff;
        }
        .tab-button-gradient.active-gradient {
            color: #fff;
            background: #006aff;
            border: none;
        }
        .tab-content-gradient {
            display: none;
        }
        .tab-content-gradient.active-gradient {
            display: block;
        }

        /* Gradient & Color Picker */
        #gradient-output-gradient {
            flex: 1 1 0%;
            width: 100%;
            height: 300px;
            border: 2px solid #374151;
            border-radius: 8px;
            transition: background 0.5s ease;
        }
        #color-picker-container-gradient {
            background-color: #1f2937;
            padding: 20px;
            border-radius: 12px;
            width: 100%;
            max-width: 320px;
            flex-shrink: 0;
            height: 300px;
        }
        .sv-canvas-container-gradient {
            position: relative;
            width: 100%;
            height: 200px;
        }
        #saturation-value-canvas-gradient {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            cursor: crosshair;
        }
        #sv-selector-gradient {
            position: absolute;
            width: 16px;
            height: 16px;
            border: 2px solid white;
            border-radius: 50%;
            box-shadow: 0 0 0 2px black;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        .hue-slider-container-gradient {
            position: relative;
            width: 100%;
            height: 20px;
            margin-top: 15px;
        }
        #hue-canvas-gradient {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            cursor: pointer;
        }
        #hue-selector-gradient {
            position: absolute;
            top: 50%;
            width: 12px;
            height: 24px;
            border: 2px solid white;
            border-radius: 4px;
            box-shadow: 0 0 0 2px black;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }

        /* Color Stops */
        .color-stop-gradient {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 8px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }
        .color-stop-gradient.active-gradient {
            border-color: #3b82f6;
            background-color: #374151;
        }
        .color-preview-gradient {
            width: 40px;
            height: 40px;
            border: 2px solid #4b5563;
            border-radius: 8px;
            flex-shrink: 0;
        }
        .color-codes-gradient {
            display: flex;
            flex-direction: column;
            margin-left: 12px;
            gap: 4px;
        }
        .color-stop-gradient input[type="text"] {
            padding: 6px 8px;
            border-radius: 6px;
            border: 1px solid #4A5568;
            background-color: #1f2937;
            color: white;
            width: 180px;
            font-family: monospace;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .color-stop-gradient input[type="text"]:hover {
            background-color: #374151;
        }
        
        /* Palettes */
        .palette-grid-gradient {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }
        .palette-card-gradient {
            background-color: #1f2937;
            border-radius: 8px;
            padding: 12px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .palette-card-gradient:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        .palette-preview-gradient {
            display: flex;
            height: 60px;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 10px;
            border: 1px solid #374151;
        }
        .palette-name-gradient {
            font-weight: 600;
            text-align: center;
            color: #d1d5db;
            margin-top: 0.5rem;
        }

        /* Buttons & Inputs */
        #add-color-stop-gradient {
            margin-top: 1rem;
            width: 100%;
            padding: 0.5rem 1rem;
            background-color: #2563eb;
            border-radius: 0.5rem;
            transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            color: white;
            cursor: pointer;
        }
        #add-color-stop-gradient:hover {
            background-color: #1d4ed8;
        }
        
        .remove-btn-gradient {
            margin-left: auto;
            padding: 0.25rem 0.75rem;
            background-color: #dc2626;
            color: white;
            border-radius: 0.375rem;
            align-self: center;
            border: none;
            cursor: pointer;
            transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .remove-btn-gradient:hover {
            background-color: #b91c1c;
        }
        
        #css-output-gradient {
            width: 100%;
            padding: 0.5rem;
            background-color: #111827;
            color: #d1d5db;
            border-radius: 0.375rem;
            border: 1px solid #374151;
            font-family: monospace;
            resize: vertical;
        }
        
        /* Toast Notification */
        #toast-gradient {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(150%);
            padding: 12px 24px;
            background-color: #2563eb;
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: transform 0.4s ease-in-out;
            z-index: 2000;
            font-weight: 500;
        }
        #toast-gradient.show-gradient {
            transform: translateX(-50%) translateY(0);
        }
/*-----Code ------------*/


.header-code {
            padding: 1rem;
            background-color: #1f2335;
            border-bottom: 1px solid #414868;
        }
        .h1-code {
            font-size: 1.25rem!important;
            line-height: 1.75rem;
            font-weight: 700;
            text-align: center;
            color: #fff;
        }
        .main-container-code {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            height: calc(100vh - 65px);
            gap: 1rem;
            padding: 1rem;
            box-sizing: border-box;
        }
        @media (min-width: 768px) {
            .main-container-code {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        .left-column-code {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            overflow-y: auto;
        }
        .editor-container-wrapper-code {
            flex: 1 1 0%;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .editor-pane-code {
            display: grid;
            grid-template-rows: repeat(3, minmax(0, 1fr));
            height: 100%;
            gap: 1rem;
        }
        .editor-wrapper-code {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .editor-label-code {
            font-weight: 600;
            color: #a9b1d6;
            padding-left: 4px;
            margin-bottom: 0.25rem;
        }
        .editor-div-code {
            height: 100%;
        }
        .console-wrapper-code, .libs-wrapper-code {
            display: flex;
            flex-direction: column;
        }
        .libs-container-code {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
        .right-column-code {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .tabs-container-code {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .mobile-controls-code {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
            padding: 0.25rem;
            background-color: #24283b;
            border-radius: 0.5rem;
        }
        .select-code {
            background-color: #414868;
            color: white;
            padding: 0.25rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            line-height: 1rem;
            border: none;
        }
        .size-input-container-code {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        .size-input-code {
            width: 4rem;
            padding: 0.25rem;
            background-color: #414868;
            color: white;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            line-height: 1rem;
            border: none;
        }
        .x-separator-code {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        .mobile-preview-wrapper-code {
            width: 100%;
            flex: 1 1 0%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            border-radius: 0.5rem;
            box-sizing: border-box;
        }
        .desktop-iframe-container-code {
            width: 100%;
            height: 100%;
            flex: 1 1 0%;
            border-radius: 0.5rem;
        }
        .mobile-tab-content-code {
            gap: 0.5rem;
        }

        /* CSS gốc với hậu tố "-code" */
        .CodeMirror { height: 100%; font-size: 14px; border-radius: 8px; border: 1px solid #414868; }
        .CodeMirror-gutters { background: #24283b !important; }
        iframe { background-color: white; border: 1px solid #414868; transition: width 0.3s, height 0.3s; }
        .tab-button-code { padding: 8px 16px; cursor: pointer; border-radius: 6px; background-color: #24283b; color: #a9b1d6; transition: background-color 0.3s, color 0.3s; border: none; }
        .tab-button-code.active-code { background-color: #7aa2f7; color: #1a1b26; font-weight: 600; }
        .tab-content-code { display: none; width: 100%; height: 100%; flex-direction: column; }
        .tab-content-code.active-code { display: flex; }
        #mobile-preview-wrapper { background-color: #1f2335; overflow: auto; }
        #preview-iframe-mobile { border: 4px solid #333; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        #console-output { background-color: #24283b; border-radius: 8px; border: 1px solid #414868; height: 100px; overflow-y: auto; padding: 10px; font-family: 'Courier New', monospace; font-size: 13px; }
        .console-log-code { color: #c0caf5; }
        .console-error-code { color: #f7768e; }
        .console-warn-code { color: #e0af68; }
        .console-info-code { color: #7aa2f7; }
        .library-textarea-code { background-color: #24283b; border: 1px solid #414868; color: #c0caf5; font-family: 'Courier New', Courier, monospace; font-size: 13px; border-radius: 8px; padding: 10px; width: 100%; height: 60px; resize: vertical; box-sizing: border-box; }
/*---Convert Page -----*/

.tab-btn-convert { transition: all 0.2s; }
        .tab-btn-convert.active { border-color: #3b82f6; background-color: #3b82f6; color: white; }
        .tab-content-convert { display: none; }
        .tab-content-convert.active { display: block; }
        .loader-convert {
            border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db;
            width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto;
        }
       
/*-----Short Code ------*/

.wrap-short-code-scd{max-width:1500px;margin:0 auto; background: linear-gradient(120deg, #a1c4fd, #c2e9fb); text-shadow: 1px 1px 2px #fff; padding: 10px; border-radius: 15px; overflow: auto;}
    .title-short-code-scd{font-size:35px;font-weight:800;color:var(--ink);letter-spacing:.3px;margin:0 0 18px;text-align:center}
    .card-short-code-scd{background:var(--card);border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.06), inset 0 0 0 1px var(--line)}
    .tabs-short-code-scd{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-bottom:1px solid var(--line);
      background:linear-gradient(to right,#1b263b,#778da9);border-radius:15px;box-shadow:1px 2px 3px #000; color: #fff;}
    .tab-btn-short-code-scd{appearance:none;border:0;background:var(--chip);color:var(--ink);padding:10px 14px;border-radius:10px;
      font-weight:600;cursor:pointer;transition:.2s;display:flex;gap:8px;align-items:center;box-shadow:1px 2px 3px #fff}
    .tab-btn-short-code-scd:hover{transform:translateY(-1px)}
    .tab-btn-short-code-scd.active-short-code-scd{background:linear-gradient(120deg,#89f7fe,#66a6ff);color:#0b1a3d}
    .panel-short-code-scd{display:none;padding:22px 18px 24px}
    .panel-short-code-scd.active-short-code-scd{display:block;animation:fade-short-code-scd .18s}
    @keyframes fade-short-code-scd{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}
    .grid-short-code-scd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .grid-3-short-code-scd{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-1-short-code-scd{grid-template-columns:1fr}
    label{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block}
    input,textarea,select{width:100%;border:1px solid var(--line);border-radius:10px;background:#f7fbff;padding:10px 12px;font-size:16px;outline:none;transition:border .15s}
    textarea{min-height:96px;resize:vertical}
    input:focus,textarea:focus,select:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(0,183,255,.1)}
    .btn-short-code-scd{appearance:none;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}
    .btn-short-code-scd.primary-short-code-scd{background:linear-gradient(95deg,var(--ink),var(--brand2));color:#fff; text-shadow: 1px 1px 2px #000;}
    .btn-short-code-scd.ghost-short-code-scd{background:#eef5ff;color:var(--ink)}
    .btn-short-code-scd.row-short-code-scd{padding:9px 12px; text-align: center; font-size: 18px; color: red;}
    .toolbar-short-code-scd{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}
    .result-short-code-scd{margin-top:16px;background:#ddd;color:var(--muted);border-radius:14px;padding:14px;min-height:68px;
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);}
    .chip-short-code-scd{display:inline-flex;align-items:center;gap:6px;background:#f1f5ff;border:1px solid var(--line);color:#2a3e6d;border-radius:999px;padding:6px 10px;font-size:12px}
    .group-short-code-scd{display:flex;flex-direction:column;gap:6px}
    .rows-short-code-scd{display:flex;flex-direction:column;gap:10px}
    .row-short-code-scd{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;gap:8px;align-items:end}
    .row-short-code-scd.small-short-code-scd{grid-template-columns:1fr 1fr 1.4fr auto}
    .hr-short-code-scd{height:1px;background:var(--line);margin:16px 0}
    .hint-short-code-scd{font-size:12px;color:#5b74a5}
    .pill-short-code-scd{display:inline-flex;gap:6px;align-items:center;background:#eef7ff;border:1px dashed #d7e7ff;color:#2b4a86;border-radius:999px;padding:6px 10px;font-size:12px}
    .badge-short-code-scd{font-size:15px;background:#10b981;color:#fff;border-radius:999px;padding:4px 8px; text-shadow: 1px 1px 2px #000;}
    .section-title-short-code-scd{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
    .section-title-short-code-scd h3{margin:0;color:var(--ink);font-size:16px}
    .note-short-code-scd{font-size:12px;color:#64748b;margin-left:auto}
    .inline-short-code-scd{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .copy-ok-short-code-scd{background:#d1fae5;color:#065f46;border:1px solid #10b981}
    .section-builder-row-short-code-scd{background:#f9fafb;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
    .section-builder-row-short-code-scd .toolbar-short-code-scd{margin-top:0}
    @media (max-width:860px){
      .grid-short-code-scd,.grid-3-short-code-scd{grid-template-columns:1fr}
      .row-short-code-scd{grid-template-columns:1fr 1fr 1fr 1fr auto}
      .row-short-code-scd.small-short-code-scd{grid-template-columns:1fr 1fr 1fr auto}
    }