/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* Add css mobile */

@media (max-width: 768px) {
  /* Css contact form */
    .krc-master-form {
        grid-template-columns: 1fr; /* Chuyển về 1 cột duy nhất */
        gap: 15px;
    }
    
    .krc-field.half, 
    .krc-field.full {
        grid-column: span 1; /* Tất cả các ô đều chiếm 1 cột */
    }

    .krc-subscribe-form {
        flex-direction: column; /* Xếp chồng lên nhau */
    }
    
    .krc-subscribe-form input[type="submit"] {
        width: 100%; /* Nút full chiều rộng */
    }
}

/* ------End css mobile------ */

/* ===== Accordion danh mục Woo ===== */

/* Ẩn/hiện danh mục con */
.sidebar .widget_product_categories .children,
.widget-area .widget_product_categories .children,
.widget_product_categories .children { 
  display: none !important; 
}
.sidebar .widget_product_categories li.kc-open > .children,
.widget-area .widget_product_categories li.kc-open > .children,
.widget_product_categories li.kc-open > .children {
  display: block !important;
}

/* Hàng danh mục cha có chỗ cho nút */
.sidebar .widget_product_categories li.cat-parent,
.widget-area .widget_product_categories li.cat-parent,
.widget_product_categories li.cat-parent {
  position: relative !important;
  padding-right: 30px !important;
}

/* Nút mũi tên toggle */
.sidebar .widget_product_categories .kc-toggle,
.widget-area .widget_product_categories .kc-toggle,
.widget_product_categories .kc-toggle {
  position: absolute !important;
  right: 2px !important;
  top: 0 !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #e9e9e9 !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  line-height: 22px !important;
  text-align: center !important;
  padding: 0 !important;
}
.sidebar .widget_product_categories .kc-toggle::after,
.widget-area .widget_product_categories .kc-toggle::after,
.widget_product_categories .kc-toggle::after {
  content: "▾" !important;
}
.sidebar .widget_product_categories li.kc-open > .kc-toggle::after,
.widget-area .widget_product_categories li.kc-open > .kc-toggle::after,
.widget_product_categories li.kc-open > .kc-toggle::after {
  content: "▴" !important;
}

/* Nhánh con có đường kẻ dọc (tùy chọn) */
.sidebar .widget_product_categories .children,
.widget-area .widget_product_categories .children,
.widget_product_categories .children {
  margin-left: 10px !important;
  padding-left: 10px !important;
  border-left: 1px dashed #ececec !important;
}

/* Nhấn mạnh danh mục đang xem (tùy chọn) */
.sidebar .widget_product_categories li.current-cat > a,
.sidebar .widget_product_categories li.current-cat-parent > a,
.widget-area .widget_product_categories li.current-cat > a,
.widget-area .widget_product_categories li.current-cat-parent > a,
.widget_product_categories li.current-cat > a,
.widget_product_categories li.current-cat-parent > a {
  font-weight: 600 !important;
}

/* === START: KRC CAMERA FORM STYLE (FIXED) === */

/* 1. Thiết lập lưới (Grid System) - Chìa khóa để đều tăm tắp */
.krc-master-form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột bằng nhau */
    gap: 20px; /* Khoảng cách giữa các ô là 20px */
    width: 100%;
}

/* 2. Quy định độ rộng các ô */
.krc-field.half {
    grid-column: span 1; /* Ô ngắn chiếm 1 cột */
}

.krc-field.full {
    grid-column: span 2; /* Ô dài chiếm trọn 2 cột */
}

/* 3. Style cho các ô nhập liệu (Input/Select/Textarea) */
.krc-master-form input:not([type="submit"]),
.krc-master-form select,
.krc-master-form textarea {
    width: 100%;
    height: 50px; /* Chiều cao cố định để không bị lệch */
    padding: 0 15px;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    font-size: 15px;
    color: #333;
    outline: none;
    box-sizing: border-box; /* Quan trọng: Giữ kích thước không bị phình to */
    transition: 0.3s;
}

/* Riêng ô nhắn tin thì cao hơn và padding dọc */
.krc-master-form textarea {
    height: 150px;
    padding-top: 15px;
    padding-bottom: 15px;
    resize: vertical; /* Cho phép kéo giãn dọc */
}

/* Hiệu ứng khi bấm vào nhập */
.krc-master-form input:focus,
.krc-master-form select:focus,
.krc-master-form textarea:focus {
    border-color: #000;
}

/* 4. Xử lý lỗi khoảng trắng của Contact Form 7 */
.krc-master-form p {
    margin: 0;
    padding: 0;
    display: contents; /* Triệt tiêu thẻ p thừa */
}
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* 5. Style Nút Gửi (Button) */
.krc-master-form .submit-area {
    text-align: left; /* Căn trái nút gửi */
}

.krc-master-form input[type="submit"] {
    background-color: #f7f7f7;
    color: #000;
    font-weight: 600;
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    transition: 0.3s;
    width: auto; /* Nút tự co theo chữ, không full màn hình */
}

.krc-master-form input[type="submit"]:hover {
    background-color: #000;
    color: #fff;
}

/* --- STYLE FORM ĐĂNG KÝ (SUBSCRIBE) --- */

/* 1. Dàn hàng ngang (Flexbox) */
.krc-subscribe-form {
    display: flex;
    gap: 10px; /* Khoảng cách giữa ô email và nút */
    max-width: 600px; /* Giới hạn chiều rộng cho đẹp */
    margin: 0 auto; /* Căn giữa form */
    align-items: stretch; /* Giữ chiều cao bằng nhau */
}

/* 2. Style ô nhập Email (Nền đen, chữ trắng) */
.krc-subscribe-form .krc-sub-input {
    flex-grow: 1; /* Cho ô email dài ra chiếm hết chỗ trống */
}

.krc-subscribe-form input[type="email"] {
    background-color: #000 !important; /* Nền đen tuyền */
    color: #fff !important; /* Chữ trắng */
    border: 1px solid #333; /* Viền xám tối */
    border-radius: 5px;
    height: 50px;
    width: 100%;
    padding: 0 20px;
}

/* Đổi màu chữ placeholder (chữ mờ) sang màu xám sáng */
.krc-subscribe-form input[type="email"]::placeholder {
    color: #aaa;
}

/* 3. Style nút Subscribe (Màu tím) */
.krc-subscribe-form input[type="submit"] {
    background-color: #6d5dfc; /* Màu tím giống ảnh */
    color: #fff;
    border: none;
    border-radius: 5px;
    height: 50px;
    padding: 0 30px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.krc-subscribe-form input[type="submit"]:hover {
    background-color: #5b4ecc; /* Tím đậm hơn khi di chuột */
}


/* === END: KRC CAMERA FORM STYLE === */