#mau_phongthuy {
	margin-bottom: 0 !important;
}
.sw_mau_phongthuy{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:8px 0;
}
.sw_mau_phongthuy p{
  margin-bottom: 0.5em;
}
.mau_phongthuy_left {
	background: #f6f6f6;
}
.phongthuy_title {
	text-transform: uppercase;
	display: none;
} 
.swboxpt {
  padding:10px;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.mau_phongthuy_inner{
  /*
  padding:16px;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
  */
}
.phongthuy_col{
  margin-bottom:12px;
}
.phongthuy_col label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
}
.phongthuy_col select{
  width:100%;
  padding:8px;
  border:1px solid #ddd;
  border-radius:8px;
}
.btn{
  background:#111;
  color:#fff;
  border:0;
  border-radius:8px;
  padding:5px 10px;
  cursor:pointer;
}
.color-box {
	display: flex;
}
/* Ẩn mặc định */
#tua-loading {
  display: none;
  width: 32px;
  height: 32px;
  border: 4px solid #ddd;
  border-top: 4px solid #3498db; /* màu xanh */
  border-radius: 50%;
  animation: swpt-spin 1s linear infinite;
  margin: 12px auto;
}

@keyframes swpt-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#mau_phongthuy .btn {
    background-color: #f18522;
	width: 100%;
	text-transform: uppercase;
	transition: coloe 0.5s ease;
	height: 40px;
	line-height: 40px;
	/* padding: 10px; */
	margin-bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
#mau_phongthuy .btn:hover {
	color: #fff;
}
.table_info_menh,
.color-info-table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
  border: 1px solid #c9c9c9;
}
.mau_phongthuy_right h2 {
	font-size: 1.2em !important;
}
table.table_info_menh tr:nth-child(even) {
    background: #f6f6f6;
}
table.table_info_menh th:nth-child(1), table.table_info_menh td:nth-child(1) {
    width: 230px;
    font-weight: 700;
}
.table_info_menh td,
.color-info-table td{
  border:1px solid #eee;
  padding:8px !important;
  vertical-align:top;
  color: #333;
}
.color-info-table tr {
	border: 1px solid #ddd;
}
.color-info-table .color-box{
   display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
    width: auto;
    height: auto;
  
}
.color-box {
    width: 300px;
    max-width: 100%;
    height: 40px;
    display: table;
    margin-bottom: 12px;
}
.color-info-table .color-item{
  width:28px;
  height:28px;
  border-radius:6px;
  border:1px solid #ddd;
}
.color-box .color-item {
    box-shadow: 1px 2px 2px #000;
    display: table-cell;
}
.swpt-custom-picks{
  display:flex;
  gap:12px;
  margin:10px 0;
  flex-wrap:wrap;
}

.swpt-card{
  border:1px solid #eee;
  border-radius:10px;
  padding:12px;
  min-width:200px;
}
/* Hover */
#mau_phongthuy .btn:hover{
  filter:brightness(0.95);
  color:#fff;
}

/* Focus & Active: giữ màu, bỏ border/outline mặc định */
#mau_phongthuy .btn:focus,
#mau_phongthuy .btn:active{
  outline:none !important;
  border:0 !important;
  color:#fff !important;
  background:#e97a14 !important; /* nhấn đậm hơn 1 chút */
  box-shadow:0 0 0 3px rgba(245,134,31,.25); /* ring mềm cho accessibility */
}

/* Form trong trang sản phẩm WooCommerce: ép 1 cột */
.single-product .sw_mau_phongthuy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.single-product .mau_phongthuy_left,
.single-product .mau_phongthuy_right {
  grid-column: 1 / -1; /* chiếm hết hàng */
}
/* Mobile dưới 767px: về 1 cột */

/* Khi khung nhỏ hơn 767px (tablet/mobile) chuyển về 1 cột */
@media (max-width: 767px) {
  .sw_mau_phongthuy {
    grid-template-columns: 1fr;
  }
  .mau_phongthuy_left,
  .mau_phongthuy_right {
    grid-column: 1 / -1; /* full width */
  }
}

/* Khi khung nhỏ hơn 500px thì chỉ 1 column, dạng row */
@media (max-width: 500px) {
  .sw_mau_phongthuy {
    grid-template-columns: 1fr; /* ép chỉ 1 cột */
  }
  .mau_phongthuy_left,
  .mau_phongthuy_right {
    grid-column: 1 / -1; /* chiếm hết 1 hàng */
  }
}