/* ============================================
   Zheng Hong Bo Packaging - Official Website
   Color Scheme: Orange-Red Gradient (from Logo)
   Layout Reference: dqpack.com
   ============================================ */

:root {
    --primary-color: #E85D2F;
    --primary-dark: #C44A20;
    --primary-light: #FF8C00;
    --gradient: linear-gradient(135deg, #FF8C00, #E85D2F);
    --gradient-dark: linear-gradient(135deg, #E85D2F, #C44A20);
    --dark: #1a1a1a;
    --dark-2: #2d2d2d;
    --gray: #f5f5f5;
    --gray-2: #e0e0e0;
    --text: #333;
    --text-light: #666;
    --white: #fff;
    --shadow: 0 4px 20px rgba(0,0,0,0.1);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.15);
    --transition: all 0.3s ease;
    --radius: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ===== Top Bar ===== */
.top-bar {
    background: var(--dark);
    color: var(--white);
    padding: 8px 0;
    font-size: 13px;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-bar-left span { margin-right: 20px; }
.top-bar-left .icon { margin-right: 5px; vertical-align: middle; }

/* ===== SVG Icon System ===== */
.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor;
}
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 28px; height: 28px; }

.icon-email { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }
.icon-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); }
.icon-menu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E"); }
.icon-cert { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E"); }
.icon-factory { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.5h2v2h-2v-2zm-4 0h2v2H8v-2zm8 0h2v2h-2v-2zm-4 4h2v2h-2v-2zm-4 0h2v2H8v-2zm8 0h2v2h-2v-2zM22 2H2v20h20V2zm-2 18H4V4h16v16z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.5h2v2h-2v-2zm-4 0h2v2H8v-2zm8 0h2v2h-2v-2zm-4 4h2v2h-2v-2zm-4 0h2v2H8v-2zm8 0h2v2h-2v-2zM22 2H2v20h20V2zm-2 18H4V4h16v16z'/%3E%3C/svg%3E"); }
.icon-custom { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"); }
.icon-globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"); }
.icon-map { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); }
.icon-chat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM7 9h10v2H7zm0-3h10v2H7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM7 9h10v2H7zm0-3h10v2H7z'/%3E%3C/svg%3E"); }
.icon-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); }
.icon-target { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z'/%3E%3C/svg%3E"); }
.icon-eye { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E"); }
.icon-heart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); }
.icon-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); }
.icon-dashboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E"); }
.icon-box { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z'/%3E%3C/svg%3E"); }
.icon-settings { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E"); }
.icon-logout { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E"); }
.icon-tags { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.41l9 9c.78.78 2.05.78 2.83 0l7-7c.78-.78.78-2.05 0-2.83zM6.5 8C5.67 8 5 7.33 5 6.5S5.67 5 6.5 5 8 5.67 8 6.5 7.33 8 6.5 8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.41l9 9c.78.78 2.05.78 2.83 0l7-7c.78-.78.78-2.05 0-2.83zM6.5 8C5.67 8 5 7.33 5 6.5S5.67 5 6.5 5 8 5.67 8 6.5 7.33 8 6.5 8z'/%3E%3C/svg%3E"); }
.icon-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E"); }
.icon-globe-site { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"); }
.top-bar-right { display: flex; align-items: center; gap: 15px; }
.lang-select {
    background: transparent;
    color: var(--white);
    border: 1px solid #444;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.lang-select option { color: var(--text); }

/* ===== Header ===== */
.main-header {
    background: var(--white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 18px 0;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo a {
    display: flex;
    align-items: center;
    gap: 14px;
}
.logo img { height: 62px; width: auto; }
.logo-text { display: flex; flex-direction: column; }
.logo-text .cn { font-size: 25px; font-weight: 700; color: var(--dark); }
.logo-text .en { font-size: 13px; color: var(--text-light); letter-spacing: 1.5px; }

.main-nav ul { display: flex; gap: 30px; }
.main-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    position: relative;
    padding: 5px 0;
    transition: var(--transition);
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient);
    transition: var(--transition);
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 100%; }
.main-nav a:hover,
.main-nav a.active { color: var(--primary-color); }

.mobile-toggle { display: none; font-size: 24px; background: none; border: none; cursor: pointer; }

/* ===== Hero ===== */
.hero {
    position: relative;
    height: 600px;
    overflow: hidden;
    background: var(--dark);
}
.hero-slider { position: relative; height: 100%; }
.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease;
    background-size: cover;
    background-position: center;
}
.slide.active { opacity: 1; }
.slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.55) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 800px;
    padding: 0 20px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.hero-content h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    text-shadow: 0 3px 12px rgba(0,0,0,0.7);
}
.hero-content p {
    font-size: 18px;
    margin-bottom: 25px;
    opacity: 0.95;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.hero-content .btn {
    display: inline-block;
    padding: 12px 35px;
    background: var(--white);
    color: var(--primary-color);
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    margin: 0 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.hero-content .btn:hover {
    background: var(--dark);
    color: var(--white);
    transform: translateY(-2px);
}
.hero-content .btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}
.hero-content .btn-outline:hover {
    background: var(--white);
    color: var(--primary-color);
}
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}
.hero-dots span {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: var(--transition);
}
.hero-dots span.active { background: var(--white); width: 30px; border-radius: 6px; }

/* ===== Stats Section ===== */
.stats-section {
    background: var(--gradient);
    padding: 50px 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
}
.stat-item .num { font-size: 42px; font-weight: 700; margin-bottom: 5px; }
.stat-item .label { font-size: 15px; opacity: 0.9; }

/* ===== Section General ===== */
.section { padding: 70px 0; }
.section-gray { background: var(--gray); }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}
.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient);
}
.section-header p { color: var(--text-light); font-size: 16px; margin-top: 15px; }

/* ===== Intro / About Preview ===== */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.intro-text h2 { font-size: 28px; margin-bottom: 20px; color: var(--dark); }
.intro-text p { margin-bottom: 15px; color: var(--text-light); line-height: 1.8; }
.intro-text .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    background: var(--gradient);
    color: var(--white);
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
}
.intro-text .btn:hover { box-shadow: 0 5px 20px rgba(232,93,47,0.4); transform: translateY(-2px); }
.intro-img {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #FF8C00, #E85D2F);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
}

/* ===== Product Categories ===== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.category-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.category-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-5px);
}
.category-img {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #FF8C00, #E85D2F);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
}
.category-body { padding: 20px; }
.category-body h3 { font-size: 18px; margin-bottom: 8px; color: var(--dark); }
.category-body p { font-size: 14px; color: var(--text-light); margin-bottom: 12px; }
.category-body .btn-text {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
}
.category-body .btn-text:hover { padding-left: 5px; }

/* ===== Why Choose Us ===== */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}
.why-item {
    text-align: center;
    padding: 30px 20px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.why-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.why-icon {
    width: 60px; height: 60px;
    margin: 0 auto 15px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--white);
}
.why-item h3 { font-size: 17px; margin-bottom: 8px; color: var(--dark); }
.why-item p { font-size: 14px; color: var(--text-light); }

/* ===== Certifications ===== */
.cert-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.cert-item {
    width: 150px; height: 100px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    transition: var(--transition);
}
.cert-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

/* ===== CTA Section ===== */
.cta-section {
    background: var(--gradient);
    padding: 60px 0;
    text-align: center;
    color: var(--white);
}
.cta-section h2 { font-size: 30px; margin-bottom: 15px; }
.cta-section p { font-size: 16px; margin-bottom: 25px; opacity: 0.9; }
.cta-section .btn {
    display: inline-block;
    padding: 12px 35px;
    background: var(--white);
    color: var(--primary-color);
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
}
.cta-section .btn:hover { background: var(--dark); color: var(--white); }

/* ===== News Section ===== */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.news-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.news-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-5px); }
.news-img {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #FF8C00, #E85D2F);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
}
.news-body { padding: 20px; }
.news-date { font-size: 13px; color: var(--primary-color); margin-bottom: 8px; }
.news-body h3 { font-size: 16px; margin-bottom: 8px; color: var(--dark); }
.news-body p { font-size: 14px; color: var(--text-light); }

/* ===== Footer ===== */
.main-footer {
    background: var(--dark);
    color: var(--white);
    padding: 50px 0 20px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 30px;
}
.footer-col h3 { font-size: 16px; margin-bottom: 15px; }
.footer-col p { font-size: 14px; opacity: 0.7; line-height: 1.7; margin-bottom: 10px; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { font-size: 14px; opacity: 0.7; transition: var(--transition); }
.footer-col ul li a:hover { opacity: 1; color: var(--primary-light); }
.footer-contact li { font-size: 14px; opacity: 0.7; margin-bottom: 8px; }
.footer-contact li i { margin-right: 8px; color: var(--primary-light); }
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

/* ===== Page Banner ===== */
.page-banner {
    height: 250px;
    background: linear-gradient(135deg, rgba(255,140,0,0.9), rgba(232,93,47,0.95)),
                url('') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
}
.page-banner h1 { font-size: 36px; margin-bottom: 8px; }
.page-banner p { font-size: 16px; opacity: 0.9; }

/* ===== About Page ===== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 50px;
}
.about-img {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 4/3;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}
.about-text h2 { font-size: 26px; margin-bottom: 15px; color: var(--dark); }
.about-text p { margin-bottom: 12px; color: var(--text-light); line-height: 1.8; }

.mv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.mv-card {
    padding: 30px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}
.mv-card .icon {
    width: 50px; height: 50px;
    margin: 0 auto 15px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--white);
}
.mv-card h3 { font-size: 18px; margin-bottom: 10px; }
.mv-card p { font-size: 14px; color: var(--text-light); }

.timeline { position: relative; padding: 20px 0; }
.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--gray-2);
}
.timeline-item {
    position: relative;
    padding-left: 50px;
    margin-bottom: 30px;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--gradient);
}
.timeline-year { font-size: 18px; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; }
.timeline-item p { color: var(--text-light); }

/* ===== Products Page ===== */
.product-filter {
    text-align: center;
    margin-bottom: 40px;
}
.filter-btn {
    padding: 8px 20px;
    border: 2px solid var(--gray-2);
    background: var(--white);
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 5px 10px;
    transition: var(--transition);
}
.filter-btn:hover,
.filter-btn.active {
    background: var(--gradient);
    color: var(--white);
    border-color: transparent;
}

.product-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.product-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-5px); }
.product-card .img {
    aspect-ratio: 1;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
}
.product-card .body { padding: 15px; }
.product-card .body h3 { font-size: 16px; margin-bottom: 5px; }
.product-card .body p { font-size: 13px; color: var(--text-light); }

/* ===== Factory Page ===== */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
}
.factory-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
    max-width: 500px;
}
.factory-stat {
    text-align: center;
    padding: 20px;
    background: var(--gray);
    border-radius: var(--radius);
}
.factory-stat .num { font-size: 28px; font-weight: 700; color: var(--primary-color); }
.factory-stat .label { font-size: 13px; color: var(--text-light); }

.production-lines {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.line-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.line-card .img {
    aspect-ratio: 16/9;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 16px;
}
.line-card .body { padding: 20px; }
.line-card .body h3 { font-size: 18px; margin-bottom: 8px; }
.line-card .body p { font-size: 14px; color: var(--text-light); }

.qc-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.qc-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.qc-list li i { color: var(--primary-color); }

/* ===== Contact Page ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
}
.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}
.contact-info li i {
    font-size: 20px;
    color: var(--primary-color);
    margin-top: 3px;
}
.contact-info li .label { font-weight: 600; display: block; margin-bottom: 3px; }
.contact-info li .value { color: var(--text-light); font-size: 14px; }

.contact-form {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 14px; }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-2);
    border-radius: 6px;
    font-size: 14px;
    transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(232,93,47,0.1);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.btn-submit {
    width: 100%;
    padding: 12px;
    background: var(--gradient);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.btn-submit:hover { box-shadow: 0 5px 20px rgba(232,93,47,0.4); }

.map-container {
    margin-top: 40px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* ===== Floating Inquiry ===== */
.floating-inquiry {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 998;
}
.inquiry-toggle {
    width: 60px; height: 60px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(232,93,47,0.5);
    transition: var(--transition);
    border: none;
}
.inquiry-toggle:hover { transform: scale(1.1); }
.inquiry-form-container {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 350px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 25px;
    display: none;
    z-index: 998;
}
.inquiry-form-container.active { display: block; animation: slideUp 0.3s ease; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.inquiry-form-container h3 { font-size: 18px; margin-bottom: 15px; color: var(--dark); }
.inquiry-form-container .close-btn {
    position: absolute;
    top: 10px; right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-light);
}

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.modal-overlay.active { display: flex; }
.modal {
    background: var(--white);
    border-radius: var(--radius);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}
.modal-close {
    position: absolute;
    top: 15px; right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
    background: none;
    border: none;
}
.modal-body { padding: 30px; }
.modal-body h3 { font-size: 22px; margin-bottom: 15px; }

/* ===== Admin ===== */
.admin-login {
    max-width: 400px;
    margin: 80px auto;
    padding: 30px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.admin-login h2 { text-align: center; margin-bottom: 20px; }
.admin-dashboard { display: flex; min-height: 100vh; background: var(--gray); }
.admin-sidebar {
    width: 240px;
    background: var(--dark);
    color: var(--white);
    padding: 20px 0;
}
.admin-sidebar .logo { padding: 0 20px 20px; border-bottom: 1px solid #333; }
.admin-sidebar .logo img { height: 40px; }
.admin-nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.7);
    transition: var(--transition);
    border-left: 3px solid transparent;
}
.admin-nav li a:hover,
.admin-nav li a.active {
    background: rgba(255,255,255,0.05);
    color: var(--white);
    border-left-color: var(--primary-color);
}
.admin-main { flex: 1; padding: 30px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.admin-header h1 { font-size: 24px; }
.admin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.admin-card {
    background: var(--white);
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.admin-card .num { font-size: 32px; font-weight: 700; color: var(--primary-color); }
.admin-card .label { font-size: 14px; color: var(--text-light); }
.admin-card .icon { font-size: 28px; opacity: 0.2; float: right; }
.admin-table {
    width: 100%;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-collapse: collapse;
    overflow: hidden;
}
.admin-table th {
    background: var(--gray);
    padding: 12px 15px;
    text-align: left;
    font-size: 14px;
}
.admin-table td { padding: 12px 15px; border-top: 1px solid var(--gray-2); font-size: 14px; }
.table-actions { display: flex; gap: 8px; }
.table-actions button {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}
.btn-edit { background: #4CAF50; color: var(--white); }
.btn-delete { background: #f44336; color: var(--white); }

.admin-form-group { margin-bottom: 15px; }
.admin-form-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 14px; }
.admin-form-group input,
.admin-form-group textarea,
.admin-form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-2);
    border-radius: 6px;
    font-size: 14px;
}

/* ===== RTL Support (Arabic) ===== */
body.rtl { direction: rtl; text-align: right; }
body.rtl .top-bar .container { flex-direction: row-reverse; }
body.rtl .main-nav ul { flex-direction: row-reverse; }
body.rtl .main-header .container { flex-direction: row-reverse; }
body.rtl .logo a { flex-direction: row-reverse; }
body.rtl .intro-grid,
body.rtl .about-grid,
body.rtl .overview-grid,
body.rtl .contact-grid { direction: rtl; }
body.rtl .intro-grid > div:first-child,
body.rtl .about-grid > div:first-child { order: 2; }
body.rtl .intro-grid > div:last-child,
body.rtl .about-grid > div:last-child { order: 1; }
body.rtl .footer-grid { direction: rtl; }
body.rtl .floating-inquiry { right: auto; left: 30px; }
body.rtl .inquiry-form-container { right: auto; left: 0; }
body.rtl .admin-sidebar { right: 0; left: auto; }
body.rtl .admin-main { margin-left: 0; margin-right: 240px; }
body.rtl .admin-nav li a { border-left: none; border-right: 3px solid transparent; }
body.rtl .admin-nav li a:hover,
body.rtl .admin-nav li a.active { border-right-color: var(--primary-color); }
body.rtl .timeline::before { right: 20px; left: auto; }
body.rtl .timeline-item { padding-left: 0; padding-right: 50px; }
body.rtl .timeline-item::before { left: auto; right: 14px; }

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

@media (max-width: 768px) {
    .main-nav { display: none; }
    .mobile-toggle { display: block; }
    .main-nav.mobile-active {
        display: block;
        position: absolute;
        top: 100%; left: 0;
        width: 100%;
        background: var(--white);
        box-shadow: var(--shadow);
    }
    .main-nav.mobile-active ul { flex-direction: column; padding: 20px; gap: 15px; }
    .hero { height: 400px; }
    .hero-content h1 { font-size: 28px; }
    .hero-content p { font-size: 15px; }
    .intro-grid,
    .about-grid,
    .overview-grid,
    .contact-grid,
    .qc-content { grid-template-columns: 1fr; }
    .product-grid,
    .product-list,
    .news-grid,
    .mv-grid { grid-template-columns: 1fr 1fr; }
    .production-lines { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; gap: 20px; max-width: 300px; }
    .stat-item .num { font-size: 30px; }
    .footer-grid { grid-template-columns: 1fr; }
    .section { padding: 40px 0; }
    .section-header h2 { font-size: 24px; }
    .admin-sidebar { width: 60px; }
    .admin-sidebar .logo span { display: none; }
    .admin-nav li a span { display: none; }
    .admin-main { padding: 15px; }
    .admin-cards { grid-template-columns: 1fr; }
    .floating-inquiry { right: 15px; bottom: 15px; }
    .inquiry-form-container { width: calc(100vw - 30px); right: 15px; }
}

@media (max-width: 480px) {
    .product-grid,
    .product-list,
    .news-grid,
    .mv-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 22px; }
    .top-bar-left { display: none; }
}