/**
 * Domain Hosting Wizard Styles
 */

/* Container */
.dhw-wizard-container {
    max-width: 100%;
    margin: 0px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Domain Results - ปรับให้ดู Clean ขึ้น */
.dhw-domain-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;           /* ลบขอบซ้ายขวาออก */
    border: none;              /* ลบกรอบสี่เหลี่ยมออก */
    border-bottom: 1px solid #eee; /* เหลือแค่เส้นขีดคั่นด้านล่าง */
    border-radius: 0;          /* ลบมุมมน */
    margin-bottom: 0;
    background: transparent;   /* ลบพื้นหลัง */
}

.dhw-domain-result:hover {
    background: #f9f9f9;       /* เวลาเอาเมาส์ชี้ ให้มีพื้นหลังจางๆ */
    padding-left: 10px;        /* ขยับนิดนึงให้รู้ว่าชี้อยู่ */
    padding-right: 10px;
}

/* Progress Steps */
.dhw-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
}

.dhw-progress::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.dhw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.dhw-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.dhw-step-label {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.dhw-step.active .dhw-step-number {
    background: #0073aa;
    color: #fff;
}

.dhw-step.completed .dhw-step-number {
    background: #46b450;
    color: #fff;
}

.dhw-step.completed .dhw-step-number::after {
    content: '✓';
}

/* Wizard Steps */
.dhw-wizard-step {
    min-height: auto;  /* ปล่อยให้สูงตามเนื้อหาจริง */
    padding-bottom: 0px; /* เผื่อระยะด้านล่างไว้นิดหน่อยไม่ให้ชิดเกินไป */
}

.dhw-wizard-step h2 {
    margin: 0 0 10px;
    font-size: 28px;
    color: #23282d;
}

.dhw-wizard-step > p {
    margin: 0 0 30px;
    color: #666;
}

/* Search Form */
.dhw-search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.dhw-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.dhw-input:focus {
    outline: none;
    border-color: #0073aa;
}

/* Buttons */
.dhw-button {
    padding: 12px 24px;
    background: #f0f0f0;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.dhw-button:hover {
    background: #e0e0e0;
}

.dhw-button-primary {
    background: #0073aa;
    color: #fff;
}

.dhw-button-primary:hover {
    background: #005a87;
}

.dhw-button-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.dhw-button-large {
    padding: 16px 32px;
    font-size: 18px;
    font-weight: bold;
}

.dhw-button-sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* Loading */
.dhw-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.dhw-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    border-top-color: #0073aa;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Domain Results */
.dhw-domain-results-table {
    margin: 20px 0;
}

.dhw-domain-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.dhw-domain-result:hover {
    border-color: #0073aa;
    background: #f8f9fa;
}

.dhw-domain-result.selected {
    border-color: #46b450;
    background: #f0f8f0;
}

.dhw-domain-name {
    flex: 1;
}

.dhw-domain-name strong {
    font-size: 18px;
    margin-right: 10px;
}

/* จัดกล่องราคาให้ชิดขวา */
.dhw-domain-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 20px; /* เว้นระยะจากปุ่ม Select */
}

/* ราคาหลัก (ตัวใหญ่) */
.dhw-domain-price > div:first-child {
    font-size: 18px;
    font-weight: bold;
    color: #0073aa;
}

/* ราคารวม VAT (ตัวเล็ก) */
.dhw-vat-label {
    font-size: 12px;
    color: #888;
    font-weight: normal;
    margin-top: 2px;
}
/* Badges */
.dhw-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.dhw-badge-thnic {
    background: #d4edda;
    color: #155724;
}

.dhw-badge-global {
    background: #d1ecf1;
    color: #0c5460;
}

/* Selected Domain Display */
.dhw-selected-domain {
    padding: 20px;
    background: #f0f8f0;
    border: 2px solid #46b450;
    border-radius: 4px;
    margin: 20px 0;
    text-align: center;
}

.dhw-selected-domain strong {
    font-size: 24px;
    color: #23282d;
    margin-right: 15px;
}

.dhw-selected-domain span {
    font-size: 20px;
    color: #46b450;
    font-weight: bold;
}

/* Register Options */
.dhw-register-options {
    margin: 20px 0;
}

.dhw-radio-label {
    display: block;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.dhw-radio-label:hover {
    border-color: #0073aa;
    background: #f8f9fa;
}

.dhw-radio-label input[type="radio"] {
    margin-right: 10px;
}

.dhw-radio-label input[type="radio"]:checked + span {
    font-weight: bold;
    color: #0073aa;
}

/* Products Grid */
.dhw-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.dhw-product-card {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s;
    cursor: pointer;
}

.dhw-product-card:hover {
    border-color: #0073aa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dhw-product-card.selected {
    border-color: #46b450;
    background: #f0f8f0;
}

.dhw-product-image {
    text-align: center;
    margin-bottom: 15px;
}

.dhw-product-image img {
    max-width: 100%;
    height: auto;
}

.dhw-product-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #23282d;
}

.dhw-product-price {
    font-size: 24px;
    font-weight: bold;
    color: #0073aa;
    margin-bottom: 15px;
}

.dhw-product-description {
    color: #666;
    margin-bottom: 20px;
    min-height: 60px;
}

/* จัดการรูปภาพสินค้าในการ์ด */
.dhw-product-image {
    height: 350px;           /* กำหนดความสูงพื้นที่รูปให้เท่ากัน */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    background-color: #fff;  /* สีพื้นหลังรูป */
    overflow: hidden;
    border-radius: 4px;
}

.dhw-product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;     /* ให้รูปแสดงครบโดยไม่โดนตัด (ใช้ cover ถ้าอยากให้เต็มพื้นที่) */
}

/* จัดกลุ่มปุ่มกดให้อยู่แนวนอน */
.dhw-card-actions {
    display: flex;           /* สั่งให้ลูกๆ เรียงแนวนอน */
    flex-direction: row;     /* ย้ำว่าเป็นแนวนอน */
    gap: 10px;               /* ระยะห่างระหว่างปุ่ม */
    margin-top: 15px;
}

/* กำหนดขนาดปุ่มภายในกลุ่มนี้ */
.dhw-card-actions .dhw-button {
    flex: 1;                 /* ให้ขยายเต็มพื้นที่เท่าๆ กัน (50/50) */
    width: auto;             /* ยกเลิก width 100% เดิม */
    margin: 0;               /* ลบระยะขอบที่ไม่จำเป็น */
    display: inline-flex;    /* จัดเนื้อหาในปุ่ม */
    justify-content: center;
    align-items: center;
    padding: 10px 15px;      /* เพิ่มความสูงปุ่มหน่อย */
}

/* (Optional) ถ้าอยากให้ปุ่มเลือกเด่นกว่า */
.dhw-select-product {
    font-weight: bold;
}

/* Form Styles */


.dhw-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.dhw-form-group {
    flex: 1;
    margin-bottom: 20px;
}

.dhw-form-group.dhw-col-6 {
    flex: 0 0 calc(50% - 10px);
}

.dhw-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #23282d;
}

.dhw-form-group .required {
    color: #dc3232;
}

.dhw-form-group small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 13px;
}

.dhw-form-group textarea {
    resize: vertical;
}

.dhw-radio-group {
    display: flex;
    gap: 20px;
}

.dhw-checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.dhw-checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 3px;
}

/* Summary */
/* --- Step 5: Summary (Invoice Style) --- */

/* กล่องรวมทั้งหมด */
.dhw-summary {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* ให้มุมโค้งทำงาน */
    max-width: 800px; /* จำกัดความกว้างไม่ให้ยืดเกินไป */
    margin: 0 auto 30px; /* จัดกึ่งกลาง */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* เงาบางๆ ให้ดูลอย */
}

/* แต่ละ Section (โดเมน, โฮสติ้ง, เว็บไซต์) */
.dhw-summary-section {
    padding: 15px 25px;
    border-bottom: 1px dashed #eaeaea; /* เส้นประบางๆ คั่นรายการ */
    display: flex;
    flex-direction: column;
}

/* หัวข้อ Section (เช่น "โดเมน") - ปรับให้เล็กและจางลง */
.dhw-summary-section h3 {
    margin: 0 0 5px 0;
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* แถวรายการ (ชื่อรายการ - ราคา) */
.dhw-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

/* ชื่อรายการ */
.dhw-summary-label {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

/* ราคา */
.dhw-summary-value {
    font-size: 16px;
    font-weight: bold;
    color: #0073aa;
    min-width: 100px;
    text-align: right;
}

/* หมายเหตุตัวเล็ก (เช่น เราจดให้) */
.dhw-summary-note {
    font-size: 13px;
    color: #0073aa; /* เปลี่ยนสีให้ดูเป็นข้อความแจ้งเตือน (สีเดียวกับธีม) */
    font-style: normal; /* ไม่ต้องตัวเอียงก็ได้ อ่านง่ายกว่า */
    margin-top: -5px;   /* ดึงขึ้นไปข้างบนให้ชิดราคา */
    display: block;     /* มั่นใจว่าเป็นบรรทัดใหม่ */
    text-align: right;  /* ชิดขวาให้ตรงกับราคา */
}

/* ส่วนยอดรวม (Total) - ทำให้เด่น */
.dhw-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: #f8fbff; /* สีฟ้าอ่อนๆ */
    border-top: 2px solid #0073aa; /* เส้นทึบสีหลัก */
}

.dhw-summary-total .dhw-summary-label {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.dhw-summary-total .dhw-summary-value {
    font-size: 24px;
    color: #46b450; /* สีเขียว */
    text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* Responsive มือถือ */
@media (max-width: 600px) {
    .dhw-summary-item {
        flex-direction: column; /* เรียงลงล่างถ้าจอเล็กมาก */
        align-items: flex-start;
    }
    .dhw-summary-value {
        text-align: left;
        margin-top: 5px;
    }
}

/* Navigation */
.dhw-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}

/* Loading Overlay */
.dhw-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.dhw-overlay-content {
    text-align: center;
    color: #fff;
}

.dhw-overlay-content p {
    margin-top: 20px;
    font-size: 18px;
}

/* Messages */
.dhw-message {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.dhw-message-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.dhw-message-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

/* Notices */
.dhw-notice {
    padding: 15px 20px;
    border-radius: 4px;
    margin: 20px 0;
}

.dhw-notice-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

/* Responsive */
@media (max-width: 768px) {
    .dhw-wizard-container {
        padding: 20px;
    }

    .dhw-progress {
        flex-wrap: wrap;
    }

    .dhw-step {
        margin-bottom: 20px;
    }

    .dhw-step-label {
        font-size: 12px;
    }

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

    .dhw-domain-result {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dhw-products-grid {
        grid-template-columns: 1fr;
    }

    .dhw-form-row {
        flex-direction: column;
    }

    .dhw-form-group.dhw-col-6 {
        flex: 1;
    }

    .dhw-navigation {
        flex-direction: column;
        gap: 10px;
    }

    .dhw-navigation .dhw-button {
        width: 100%;
    }
}

/* --- Style ใหม่สำหรับ Checkbox Own Domain --- */
.dhw-own-domain-container {
    margin-top: 0px;
    padding-top: 0px;
    border-top: 0px solid #eee; /* เส้นแบ่งบางๆ ด้านบน */
}

/* ตัว Label Checkbox */
.dhw-own-domain-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    user-select: none;
    justify-content: center;
}

.dhw-own-domain-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
}

.dhw-toggle-label {
    font-weight: 500;
}

/* กล่องฟอร์มกรอก */
#dhw-own-domain-form {
    background: #f0f8ff; /* สีฟ้าอ่อนๆ ให้รู้ว่าเป็นส่วน active */
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #cce5ff;
}

/* จัด Input กับปุ่มให้อยู่แถวเดียวกัน */
.dhw-input-group {
    display: flex;
    gap: 10px;
}

.dhw-input-group input {
    flex: 1; /* ขยายเต็มพื้นที่ */
}

.dhw-input-group button {
    white-space: nowrap; /* ไม่ให้ข้อความปุ่มขึ้นบรรทัดใหม่ */
}

.dhw-hint {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #666;
}

/* Responsive */
@media (max-width: 600px) {
    .dhw-input-group {
        flex-direction: column;
    }
    .dhw-input-group button {
        width: 100%;
    }
}
/* จัด Layout ของรายละเอียดสินค้า */
.dhw-product-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    min-height: 60px; /* ความสูงขั้นต่ำ */
    line-height: 1.5;
}

/* จัดกลุ่มปุ่มกดให้อยู่แนวนอน */
.dhw-card-actions {
    display: flex;
    gap: 10px; /* ระยะห่างระหว่างปุ่ม */
}

.dhw-card-actions .dhw-button {
    flex: 1; /* ให้ปุ่มกว้างเท่าๆ กัน */
    padding: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none; /* ลบขีดเส้นใต้ลิงก์ */
}

/* ปุ่มรายละเอียด (สีขาว ขอบเทา) */
.dhw-btn-details {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555;
}

.dhw-btn-details:hover {
    background-color: #f9f9f9;
    border-color: #999;
    color: #333;
}

/* ปุ่มเลือก (สีหลัก) */
.dhw-select-product {
    background-color: #0073aa;
    color: #fff;
    border: 1px solid #0073aa;
}

.dhw-select-product:hover {
    background-color: #005177;
}

/* ปรับ Layout ให้ฝั่งขวากว้างขึ้น (ถ้าจอใหญ่) */
.dhw-owner-right {
    flex: 1.5; /* ขยายสัดส่วนเพิ่มขึ้น */
    min-width: 350px;
    position: sticky;
    top: 20px;
    height: fit-content; /* ให้สูงเท่าเนื้อหา ไม่ยืดจนน่าเกลียด */
}

/* การ์ดพื้นหลัง */
.dhw-upload-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px; /* มุมมนมากขึ้น */
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Dropzone ดีไซน์ใหม่ (เหมือนภาพตัวอย่าง) */
.dhw-custom-dropzone {
    border: 2px dashed #0073aa !important; /* เส้นประสีฟ้า */
    background: #f9fbff !important; /* พื้นหลังฟ้าอ่อนๆ */
    border-radius: 12px !important;
    min-height: 200px !important; /* สูงขึ้น */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px !important;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.dhw-custom-dropzone:hover {
    background: #f0f7ff !important;
    border-color: #005b88 !important;
}

/* ข้อความข้างใน Dropzone */
.dhw-custom-dropzone .dz-message {
    margin: 0 !important;
    text-align: center;
}

/* คำแนะนำด้านล่าง */
.dhw-doc-tips-full {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    font-size: 13px;
    color: #555;
    border-left: 4px solid #0073aa;
}

.dhw-doc-tips-full ul {
    margin: 10px 0 0 20px;
    padding: 0;
    list-style: disc;
}

.dhw-doc-tips-full li {
    margin-bottom: 5px;
}

/* คอนเทนเนอร์หลัก */
.dhw-owner-layout {
    display: flex;
    gap: 30px;
    width: 100%; /* มั่นใจว่าแผ่เต็ม */
    justify-content: space-between;
}

/* ฝั่งซ้าย: ฟอร์มกรอก (ปรับลดลงมาเหลือประมาณ 55-60%) */
.dhw-owner-left {
    flex: 0 0 60%; /* ฟิกซ์ความกว้างไว้ที่ 60% */
    max-width: 60%;
}

/* ฝั่งขวา: กล่องอัปโหลด (ให้ยืดจนสุดขอบที่เหลือ) */
.dhw-owner-right {
    flex: 1; /* ยืดกินพื้นที่ที่เหลือทั้งหมด (40%) */
    width: 100%; /* ขยายเต็มกรอบของตัวเอง */
    min-width: 0;
}

/* การ์ดข้างในต้องเต็มด้วย */
.dhw-upload-card {
    width: 100%; 
    height: 100%; /* (Optional) ถ้าอยากให้กล่องสูงเท่าฟอร์มซ้าย */
    box-sizing: border-box;
}

/* Responsive มือถือ (เหมือนเดิม) */
@media (max-width: 900px) {
    .dhw-owner-layout {
        flex-direction: column;
    }
    .dhw-owner-left, 
    .dhw-owner-right {
        flex: auto;
        max-width: 100%;
        width: 100%;
    }
}

/* ส่วนภาษีและยอดรวมย่อย */
.dhw-summary-taxes {
    padding: 15px 25px;
    background: #fff;
    text-align: right;
    border-top: 1px solid #eee;
}

.dhw-summary-row {
    display: flex;
    justify-content: space-between; /* หรือใช้ flex-end ถ้าอยากให้ชิดขวาทั้งหมด */
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
}

/* ถ้าอยากให้ป้ายชื่อชิดขวาด้วย (เหมือนบิล) */
.dhw-summary-row span:first-child {
    flex: 1;
    text-align: right;
    padding-right: 20px;
}

.dhw-summary-row span:last-child {
    font-weight: bold;
    color: #333;
    min-width: 100px; /* ให้ตัวเลขตรงกัน */
}

/* จัด Style ตัวหนังสือ VAT ใต้ราคา */
.dhw-summary-vat-note {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
    font-weight: normal;
}
/* --- Fortune Section --- */
.dhw-fortune-section {
    /* SVG รูปดาวและประกายวิบวับ (สีทองจางๆ) */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFD700' fill-opacity='0.1' d='M100 0l25 75 75 25-75 25-25 75-25-75-75-25 75-25z'/%3E%3Ccircle cx='150' cy='50' r='10' fill='%23FFD700' fill-opacity='0.1'/%3E%3Ccircle cx='50' cy='150' r='15' fill='%23FFD700' fill-opacity='0.1'/%3E%3C/svg%3E"),
        linear-gradient(to bottom, #fcfdff, #f0f7ff);
    
    background-position: right -20px bottom -20px, center; /* ขยับรูปหลบมุมนิดหน่อย */
    background-repeat: no-repeat, no-repeat;
    background-size: 250px auto, cover; /* ขนาดรูป 250px */
    
    border: 1px solid #dae1e7;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px; /* เพิ่มระยะห่างด้านล่างหน่อยจะได้ไม่ชิด Step 1 */
}

.dhw-fortune-title {
    font-size: 24px;
    color: #0073aa;
    margin-top: 0;
}

/* Grid 40-40-20 */
.dhw-fortune-input-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.dhw-col-40 { flex: 0 0 calc(40% - 10px); max-width: 40%; }
.dhw-col-20 { flex: 0 0 calc(20% - 10px); max-width: 20%; }
.dhw-full-width { width: 100%; }

/* Result Boxes */
.dhw-fortune-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.dhw-fortune-box {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.dhw-fortune-header {
    padding: 15px;
    font-weight: bold;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dhw-fortune-good .dhw-fortune-header { background: linear-gradient(135deg, #1c7ed6 0%, #1864ab 100%); }
.dhw-fortune-bad .dhw-fortune-header { background: linear-gradient(135deg, #e03131 0%, #c92a2a 100%); }

.dhw-fortune-score {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.dhw-fortune-content { padding: 20px; font-size: 14px; line-height: 1.6; color: #444; }

/* Actions Buttons */
.dhw-fortune-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
}

/* Animation ปุ่มเด้งดึ๋ง */
@keyframes pulsate {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(0, 115, 170, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 115, 170, 0); }
}
.pulsate { animation: pulsate 2s infinite; }

/* Responsive */
@media (max-width: 768px) {
    .dhw-col-40, .dhw-col-20 { flex: 0 0 100%; max-width: 100%; }
    .dhw-fortune-results-grid { grid-template-columns: 1fr; }
}