/* 🖋️ Font face */
@font-face {
    font-family: "fangzheng";
    src: url("../font/fangzheng.ttf");
}

/* 🌈 Biến màu và font tổng thể */
:root {
    /* 🎨 Màu thương hiệu */
    --color-primary: #cfa15b; /* vàng đồng chính */
    --color-primary-hover: #a87d3e; /* vàng đậm khi hover */
    --color-border: rgba(207, 161, 91, 0.4);
    --color-border-light: rgba(207, 161, 91, 0.12);
    --color-bg-transparent: rgba(255, 255, 255, 0.05);

    /* 🟤 Màu chữ */
    --color-text-main: #5c3a1e; /* chữ nâu đậm */
    --color-text-secondary: #8c5d2c; /* chữ nâu nhạt */
    --color-text-highlight: #cfa15b; /* vàng nhấn */
    --color-text-success: #2d6a33; /* xanh lá */
    --color-alert-bg: rgba(76, 175, 80, 0.15);

    /* 🖊️ Font */
    --font-main: "fangzheng", "Noto Serif SC", serif;
}

/* 📦 Wrapper tổng */
.gift-wrapper {
    margin: 20px auto;
    max-width: 900px;
    font-family: var(--font-main);
}

/* 🪄 Card container */
.gift-card {
    background: var(--color-bg-transparent);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gift-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
    text-align: center;
    font-family: var(--font-main);
}

/* ✅ Alert */
.alert {
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
    font-size: 15px;
    font-family: var(--font-main);
}

.alert-success {
    background: var(--color-alert-bg);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: var(--color-text-success);
}

/* 🔘 Actions */
.gift-actions {
    margin-bottom: 15px;
    text-align: center;
}

.btn-custom {
    padding: 10px 18px;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-main);
    transition: background 0.2s;
}

.btn-custom:hover {
    background: var(--color-primary-hover);
}

.welcome-msg {
    margin-top: 8px;
    color: var(--color-text-success);
    font-weight: bold;
    font-size: 15px;
}

/* 📊 Bảng Giftcode */
.table-container {
    overflow-x: auto;
}

.myTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    text-align: center;
    color: var(--color-text-main);
    font-family: var(--font-main);
}

.myTable th,
.myTable td {
    border: 1px solid var(--color-border);
    padding: 12px;
}

.myTable th {
    background: var(--color-border-light);
    color: var(--color-text-secondary);
    font-family: var(--font-main);
    font-weight: bold;
}

.myTable tr:nth-child(even) {
    background: rgba(207, 161, 91, 0.06);
}

.myTable tr:hover {
    background: rgba(207, 161, 91, 0.15);
}

/* 🪙 Giftcode text */
.gift-name {
    color: var(--color-text-secondary);
    font-weight: bold;
}

.gift-code {
    color: var(--color-text-highlight);
    font-weight: bold;
}

/* 📋 Nút Copy */
.btn-copy {
    padding: 5px 12px;
    font-size: 13px;
    border: 1px solid #4caf50;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-success);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-main);
    transition: all 0.2s;
}

.btn-copy:hover {
    background: #4caf50;
    color: #fff;
}

/* 📱 Responsive */
@media (max-width: 768px) {
    .gift-wrapper {
        margin: 10px;
        max-width: 100%;
    }

    .gift-card {
        padding: 16px;
    }

    .gift-title {
        font-size: 20px;
    }

    .btn-custom {
        display: block;
        width: 100%;
        font-size: 15px;
        padding: 12px;
        margin-bottom: 10px;
    }

    .welcome-msg {
        font-size: 14px;
    }

    .myTable {
        font-size: 14px;
    }

    .myTable th,
    .myTable td {
        padding: 8px;
    }

    .btn-copy {
        padding: 6px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .gift-title {
        font-size: 18px;
    }

    .btn-custom {
        font-size: 14px;
        padding: 10px;
    }

    .myTable {
        font-size: 13px;
    }

    .btn-copy {
        font-size: 11px;
        padding: 4px 8px;
    }
}