.elementor-28 .elementor-element.elementor-element-7dc73986{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:60px;--padding-left:120px;--padding-right:120px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-28 .elementor-element.elementor-element-7dc73986{--padding-top:30px;--padding-bottom:30px;--padding-left:60px;--padding-right:60px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-28 .elementor-element.elementor-element-7dc73986{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS for container, class: .elementor-element-7dc73986 *//* ============================================
   MD Product — WooCommerce My Account Styles
   Color Palette: Medical Beauty / Cosmeceutical
   Icons: SVG Data URI via ::before (no font needed)
   ============================================ */
 
:root {
  --md-primary:     #26476F;
  --md-primary-70:  #3A6499;
  --md-primary-120: #1A2F4A;
  --md-sky:         #A0D4FB;
  --md-sky-light:   #D0EAFD;
  --md-sky-pale:    #EAF6FF;
  --md-pink:        #E5BFCC;
  --md-pink-light:  #F2DCE6;
  --md-pear:        #C6D290;
  --md-green-light: #DDE8B4;
  --md-neutral-400: #9CA3AF;
  --md-neutral-200: #DEE0E3;
}
 
/* ── Page Background ── */
.woocommerce-account .site-main,
.woocommerce-account .content-area {
  background-color: #F7F9FC;
}
 
/* ════════════════════════════════
   NAVIGATION SIDEBAR (Desktop)
   ════════════════════════════════ */
 
.woocommerce-MyAccount-navigation {
  background: #ffffff;
  border-radius: 14px;
  border: 0.5px solid var(--md-neutral-200);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(38, 71, 111, 0.06);
}
 
/* Accent stripe */
.woocommerce-MyAccount-navigation::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--md-primary) 0%, var(--md-primary-70) 60%, var(--md-sky) 100%);
}
 
/* Nav List */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
 
/* ── Nav Link Base ── */
.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center; 
  gap: 12px;           
  padding: 12px 18px 12px 16px; 
  font-size: 14px;
  font-weight: 400;
  color: #556070;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  line-height: 1;      
}
 
/* Icon pseudo-element base */
.woocommerce-MyAccount-navigation ul li a::before {
  content: '';
  flex-shrink: 0;      
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
  transition: opacity 0.15s ease;
  position: static;
  transform: translateY(6.5px); /* ขยับไอคอนลงมาเล็กน้อยให้สมดุลกับสระฟอนต์ไทย */
}
 
/* Hover */
.woocommerce-MyAccount-navigation ul li a:hover {
  background-color: var(--md-sky-pale);
  color: var(--md-primary);
  border-left-color: var(--md-sky);
}
 
.woocommerce-MyAccount-navigation ul li a:hover::before {
  opacity: 1;
}
 
/* Active */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a[aria-current="page"] {
  background-color: var(--md-sky-pale);
  color: var(--md-primary);
  font-weight: 600;
  border-left-color: var(--md-primary);
}
 
.woocommerce-MyAccount-navigation ul li.is-active a::before,
.woocommerce-MyAccount-navigation ul li a[aria-current="page"]::before {
  opacity: 1;
}
 
/* ════════════════════════════════
   ICONS — SVG Data URI
   ════════════════════════════════ */
 
/* แผงควบคุม */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='6' height='6' rx='1.5'/%3E%3Crect x='10' y='2' width='6' height='6' rx='1.5'/%3E%3Crect x='2' y='10' width='6' height='6' rx='1.5'/%3E%3Crect x='10' y='10' width='6' height='6' rx='1.5'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--dashboard a:hover::before,
.woocommerce-MyAccount-navigation-link--dashboard.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%2326476F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='6' height='6' rx='1.5'/%3E%3Crect x='10' y='2' width='6' height='6' rx='1.5'/%3E%3Crect x='2' y='10' width='6' height='6' rx='1.5'/%3E%3Crect x='10' y='10' width='6' height='6' rx='1.5'/%3E%3C/svg%3E");
}
 
/* คำสั่งซื้อ */
.woocommerce-MyAccount-navigation-link--orders a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='14' height='13' rx='2'/%3E%3Cpath d='M5 3V1M13 3V1'/%3E%3Cpath d='M2 7h14'/%3E%3Cpath d='M6 11h2M10 11h2'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders a:hover::before,
.woocommerce-MyAccount-navigation-link--orders.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%2326476F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='14' height='13' rx='2'/%3E%3Cpath d='M5 3V1M13 3V1'/%3E%3Cpath d='M2 7h14'/%3E%3Cpath d='M6 11h2M10 11h2'/%3E%3C/svg%3E");
}
 
/* ดาวน์โหลด */
.woocommerce-MyAccount-navigation-link--downloads a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v9'/%3E%3Cpath d='M6 8l3 3 3-3'/%3E%3Crect x='2' y='13' width='14' height='3' rx='1'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--downloads a:hover::before,
.woocommerce-MyAccount-navigation-link--downloads.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%2326476F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v9'/%3E%3Cpath d='M6 8l3 3 3-3'/%3E%3Crect x='2' y='13' width='14' height='3' rx='1'/%3E%3C/svg%3E");
}
 
/* ที่อยู่ */
.woocommerce-MyAccount-navigation-link--edit-address a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 1C6.239 1 4 3.239 4 6c0 4.5 5 11 5 11s5-6.5 5-11c0-2.761-2.239-5-5-5z'/%3E%3Ccircle cx='9' cy='6' r='1.8'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address a:hover::before,
.woocommerce-MyAccount-navigation-link--edit-address.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%2326476F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 1C6.239 1 4 3.239 4 6c0 4.5 5 11 5 11s5-6.5 5-11c0-2.761-2.239-5-5-5z'/%3E%3Ccircle cx='9' cy='6' r='1.8'/%3E%3C/svg%3E");
}
 
/* ข้อมูลบัญชี */
.woocommerce-MyAccount-navigation-link--edit-account a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='6' r='3'/%3E%3Cpath d='M3 16c0-3.314 2.686-6 6-6s6 2.686 6 6'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account a:hover::before,
.woocommerce-MyAccount-navigation-link--edit-account.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%2326476F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='6' r='3'/%3E%3Cpath d='M3 16c0-3.314 2.686-6 6-6s6 2.686 6 6'/%3E%3C/svg%3E");
}
 
/* ออกจากระบบ */
.woocommerce-MyAccount-navigation-link--customer-logout {
  border-top: 0.5px solid var(--md-neutral-200);
  margin-top: 6px;
  padding-top: 6px;
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #b85570;
  font-size: 13px;
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background-color: var(--md-pink-light);
  color: #8a2a45;
  border-left-color: var(--md-pink);
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23b85570' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4H4a1 1 0 00-1 1v8a1 1 0 001 1h3'/%3E%3Cpath d='M12 13l4-4-4-4'/%3E%3Cline x1='7' y1='9' x2='16' y2='9'/%3E%3C/svg%3E");
  opacity: 1;
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%238a2a45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4H4a1 1 0 00-1 1v8a1 1 0 001 1h3'/%3E%3Cpath d='M12 13l4-4-4-4'/%3E%3Cline x1='7' y1='9' x2='16' y2='9'/%3E%3C/svg%3E");
}
 
/* ════════════════════════════════
   CONTENT AREA (Desktop)
   ════════════════════════════════ */
 
.woocommerce-MyAccount-content {
  background: #ffffff;
  border-radius: 14px;
  border: 0.5px solid var(--md-neutral-200);
  padding: 28px 32px;
  box-shadow: 0 2px 12px rgba(38, 71, 111, 0.06);
  font-family: 'Sarabun', 'Prompt', sans-serif;
}
 
.woocommerce-MyAccount-content > p:first-of-type {
  background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-70) 100%);
  border-radius: 12px;
  padding: 20px 24px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
 
.woocommerce-MyAccount-content > p:first-of-type::after {
  content: '';
  position: absolute;
  right: -16px; top: -16px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(160,212,251,0.12);
  pointer-events: none;
}
 
.woocommerce-MyAccount-content > p:first-of-type strong { color: #fff; font-weight: 600; }
.woocommerce-MyAccount-content > p:first-of-type a {
  color: var(--md-sky);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(160,212,251,0.5);
}
 
.woocommerce-MyAccount-content > p:nth-of-type(2) {
  font-size: 14px;
  color: #6b7a8d;
  line-height: 1.8;
  padding: 14px 16px;
  background: var(--md-sky-pale);
  border-radius: 10px;
  border-left: 3px solid var(--md-sky);
}
 
.woocommerce-MyAccount-content > p:nth-of-type(2) a {
  color: var(--md-primary-70);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--md-sky-light);
}
 
.woocommerce-MyAccount-content > p:nth-of-type(2) a:hover { color: var(--md-primary); }
 
/* Notices */
.woocommerce-notices-wrapper .woocommerce-message {
  border-top-color: var(--md-pear);
  background-color: var(--md-green-light);
  color: #3d4a1a;
}
.woocommerce-notices-wrapper .woocommerce-error {
  border-top-color: #c0556a;
  background-color: var(--md-pink-light);
  color: #6b2035;
}
 
/* Tables */
.woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 0.5px solid var(--md-neutral-200);
}
 
.woocommerce-MyAccount-content table thead th {
  background: var(--md-primary);
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border: none;
}
 
.woocommerce-MyAccount-content table tbody tr td {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--md-neutral-200);
  color: #3d4a5c;
}
 
.woocommerce-MyAccount-content table tbody tr:last-child td { border-bottom: none; }
.woocommerce-MyAccount-content table tbody tr:hover td { background-color: var(--md-sky-pale); }
 
/* Buttons */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button,
.woocommerce-MyAccount-content input[type="submit"] {
  display: inline-block;
  padding: 10px 22px;
  font-family: 'Sarabun', 'Prompt', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--md-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
  text-decoration: none;
}
 
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  background-color: var(--md-primary-70);
  transform: translateY(-1px);
}
 
.woocommerce-MyAccount-content .button.alt,
.woocommerce-MyAccount-content a.button {
  background-color: transparent;
  color: var(--md-primary);
  border: 1.5px solid var(--md-primary);
}
 
.woocommerce-MyAccount-content .button.alt:hover,
.woocommerce-MyAccount-content a.button:hover { background-color: var(--md-sky-pale); }
 
/* Form Fields */
.woocommerce-MyAccount-content .form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-primary);
  margin-bottom: 5px;
  display: block;
}
 
.woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: 'Sarabun', 'Prompt', sans-serif;
  color: #2e3a4a;
  background: #ffffff;
  border: 1px solid var(--md-neutral-200);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
 
.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-MyAccount-content .form-row textarea:focus {
  border-color: var(--md-sky);
  box-shadow: 0 0 0 3px rgba(160,212,251,0.3);
}
 
/* Order Status Badges */
mark.order-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: none;
}
mark.order-status.processing { background: var(--md-sky-light); color: var(--md-primary); }
mark.order-status.completed  { background: var(--md-green-light); color: #3d4a1a; }
mark.order-status.on-hold    { background: #FFF3CD; color: #856404; }
mark.order-status.cancelled,
mark.order-status.failed     { background: var(--md-pink-light); color: #8a2a45; }
 
/* Pagination */
.woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--md-primary); background: #fff;
  border: 0.5px solid var(--md-neutral-200);
  text-decoration: none; transition: all 0.15s;
}
.woocommerce-pagination ul li a:hover { background: var(--md-sky-pale); border-color: var(--md-sky); }
.woocommerce-pagination ul li span.current { background: var(--md-primary); color: #fff; border-color: var(--md-primary); }
 
 
/* ════════════════════════════════
   RESPONSIVE DESIGN (สำหรับหน้าจอมือถือ)
   ════════════════════════════════ */
@media screen and (max-width: 768px) {
 
  /* จัดเลย์เอาต์หลักของหน้า Account ให้เรียงเป็นแนวตั้งบน-ล่าง */
  .woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 10px !important;
  }

  /* ── 1. ปรับคอนเทนเนอร์หลักของเมนูให้เป็นแนวนอน ── */
  .woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    border-radius: 12px !important; /* เปลี่ยนเป็นมนโค้งเล็กน้อยให้เข้ากับดีไซน์กล่อง */
    border: 0.5px solid var(--md-neutral-200) !important;
    box-shadow: 0 2px 8px rgba(38, 71, 111, 0.04) !important;
  }
 
  /* ── 2. บังคับให้รายการเมนูวิ่งเป็นเส้นตรงแนวนอนและสไลด์ได้ ── */
  .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: row !important; 
    overflow-x: auto !important;    
    white-space: nowrap !important; 
    padding: 0 !important;
    margin: 0 !important;
    
    /* ซ่อนแถบ Scrollbar สำหรับ Firefox และ IE */
    -ms-overflow-style: none;  
    scrollbar-width: none;  
  }
  
  /* ซ่อน Scrollbar สำหรับ Chrome, Safari และ Opera */
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none !important;
  }
 
  /* ── 3. ปรับแต่งแต่ละเมนูย่อยในแนวนอน ── */
  .woocommerce-MyAccount-navigation ul li {
    flex: 0 0 auto !important; 
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
 
  .woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    flex-direction: column !important; /* จัดไอคอนไว้ด้านบน ข้อความด้านล่าง */
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;               
    padding: 12px 18px !important; 
    font-size: 13px !important;        
    border-left: none !important; 
    border-bottom: 3px solid transparent !important; /* ย้ายเส้นไฮไลต์มาไว้ด้านล่าง */
    line-height: 1.2 !important;
  }
 
  /* ── 4. รีเซ็ตตำแหน่งไอคอนในโหมดแนวนอน ── */
  .woocommerce-MyAccount-navigation ul li a::before {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }
 
  /* ── 5. สถานะ Active เมื่อไฮไลต์เมนูปัจจุบัน ── */
  .woocommerce-MyAccount-navigation ul li.is-active a,
  .woocommerce-MyAccount-navigation ul li a[aria-current="page"] {
    background-color: var(--md-sky-pale) !important;
    color: var(--md-primary) !important;
    border-bottom-color: var(--md-primary) !important; 
  }
 
  /* ── 6. ปรับแต่งเฉพาะปุ่ม "ออกจากระบบ" ── */
  .woocommerce-MyAccount-navigation-link--customer-logout {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .woocommerce-MyAccount-navigation-link--customer-logout a {
    border-bottom-color: transparent !important;
  }
  .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    border-bottom-color: var(--md-pink) !important;
  }
 
  /* ── 7. ปรับแต่ง Content Area บนมือถือ ── */
  .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    padding: 20px 16px !important; 
  }
 
  /* ปรับแต่งกล่องทักทายสีน้ำเงินด้านบน */
  .woocommerce-MyAccount-content > p:first-of-type {
    padding: 16px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
 
  /* บังคับให้ตารางคำสั่งซื้อสามารถปัดซ้าย-ขวาได้ ไม่ดันหน้าจอเบี้ยว */
  .woocommerce-MyAccount-content table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; 
    white-space: nowrap !important; 
  }
 
  .woocommerce-MyAccount-content table thead th {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
 
  .woocommerce-MyAccount-content table tbody tr td {
    padding: 12px !important;
    font-size: 13px !important;
  }
 
  /* ปรับแต่งขนาดปุ่มบนมือถือ */
  .woocommerce-MyAccount-content .button,
  .woocommerce-MyAccount-content button,
  .woocommerce-MyAccount-content input[type="submit"] {
    padding: 8px 14px !important;
    font-size: 12px !important;
    width: auto !important;
    text-align: center !important;
  }
  
  .woocommerce-MyAccount-content td .button {
    margin: 2px 0 !important;
    display: inline-block !important;
  }
 
  /* บังคับฟอร์มกรอกข้อมูลให้ยืดเต็มแผ่นแบบแถวเดี่ยว */
  .woocommerce-MyAccount-content .form-row {
    width: 100% !important; 
    float: none !important;
    margin-bottom: 12px !important;
  }

} /* <── ปิดปีกกา @media ตรงนี้อย่างถูกต้อง เพื่อไม่ให้กระทบจอ Desktop */


/* ============================================
   WOOCOMMERCE ORDERS TABLE STYLES (UI/UX Refined)
   ============================================ */

/* ── 1. เคลียร์โครงสร้างส่วนเกินของ WooCommerce ── */
.woocommerce-MyAccount-content table.shop_table_responsive tbody tr td p,
.woocommerce-MyAccount-content table.shop_table_responsive tbody tr th p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}

.woocommerce-MyAccount-content table.shop_table_responsive tbody tr th p br {
  display: none;
}

/* ── 2. โครงสร้างตารางหลัก (System Font) ── */
.woocommerce-MyAccount-content table.my_account_orders {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--md-neutral-200);
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(38, 71, 111, 0.03);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.woocommerce-MyAccount-content table.my_account_orders thead th {
  background-color: var(--md-primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 16px;
  text-align: left;
  border: none;
}

.woocommerce-MyAccount-content table.my_account_orders tbody tr td,
.woocommerce-MyAccount-content table.my_account_orders tbody tr th {
  padding: 18px 16px; 
  vertical-align: middle;
  border-bottom: 1px solid var(--md-neutral-200);
  color: #4A5568;
  font-size: 14px;
  background-color: #ffffff;
}

.woocommerce-MyAccount-content table.my_account_orders tbody tr:last-child td,
.woocommerce-MyAccount-content table.my_account_orders tbody tr:last-child th {
  border-bottom: none;
}

.woocommerce-MyAccount-content table.my_account_orders tbody tr:hover td,
.woocommerce-MyAccount-content table.my_account_orders tbody tr:hover th {
  background-color: var(--md-sky-pale) !important;
}

/* ลิงก์เลขคำสั่งซื้อ */
.woocommerce-orders-table__cell-order-number a {
  color: var(--md-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--md-sky);
  transition: color 0.15s;
}
.woocommerce-orders-table__cell-order-number a:hover {
  color: var(--md-primary-70);
}

.woocommerce-orders-table__cell-total .woocommerce-Price-amount {
  color: var(--md-primary);
  font-weight: 600;
}


/* ── 3. 🛠️ สถานะแบบไม่มีกรอบ (เน้นเฉพาะสีตัวอักษรให้ชัดเจน) ── */
.woocommerce-orders-table__cell-order-status {
  vertical-align: middle;
}

.woocommerce-orders-table__cell-order-status p {
  display: inline-block !important;
  padding: 0 !important;
  background: transparent !important; /* ถอดพื้นหลังออก */
  box-shadow: none !important;
  font-size: 14px !important; /* ปรับขนาดฟอนต์ให้สมดุลกับช่องอื่น */
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* สีสถานะ: กำลังดำเนินการ (Processing) -> สีน้ำเงินเข้ม/ฟ้าของธีมหลัก */
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status p {
  color: var(--md-primary-120) !important;
}

/* สีสถานะ: ไม่สำเร็จ / ยกเลิก (Failed / Cancelled) -> สีแดงเข้มสด */
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status p,
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status p {
  color: #c0392b !important; 
}

/* สีสถานะ: สำเร็จแล้ว (Completed) -> สีเขียวเข้มสุขภาพ */
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status p {
  color: #27ae60 !important;
}


/* ── 4. ปุ่มเลือกคำสั่งซื้อ จัดแถวแนวราบ + ใส่ไอคอนใหม่ ── */
.woocommerce-orders-table__cell-order-actions p {
  display: flex !important;
  flex-direction: row !important; 
  gap: 8px !important;
  flex-wrap: wrap;
}

/* โครงสร้างพื้นฐานของทุกปุ่ม */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important; 
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* แทรกโครงสร้างไอคอนผ่าน ::before */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 🟢 ปุ่มดูรายละเอียด (เปลี่ยนเป็นไอคอนเอกสาร/ใบเสร็จสีกรมท่า) */
.woocommerce-orders-table__cell-order-actions .button.view {
  background-color: transparent !important;
  color: var(--md-primary) !important;
  border: 1px solid var(--md-neutral-200) !important; 
}
.woocommerce-orders-table__cell-order-actions .button.view::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2326476F' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'/%3E%3C/svg%3E");
}
.woocommerce-orders-table__cell-order-actions .button.view:hover {
  background-color: var(--md-sky-pale) !important;
  border-color: var(--md-primary) !important;
}

/* 🔵 ปุ่มชำระเงิน (สีแบรนด์ทึบกระตุ้นความสนใจ) */
.woocommerce-orders-table__cell-order-actions .button.pay {
  background-color: var(--md-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--md-primary) !important;
}
.woocommerce-orders-table__cell-order-actions .button.pay::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath stroke-linecap='round' d='M3 10h18M7 15h2'/%3E%3C/svg%3E");
}
.woocommerce-orders-table__cell-order-actions .button.pay:hover {
  background-color: var(--md-primary-70) !important;
  border-color: var(--md-primary-70) !important;
}

/* 🔴 ปุ่มยกเลิก (Outline) */
.woocommerce-orders-table__cell-order-actions .button.cancel {
  background-color: transparent !important; 
  color: #b85570 !important;               
  border: 1px solid #e5bfcc !important;     
}
.woocommerce-orders-table__cell-order-actions .button.cancel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b85570' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
}
.woocommerce-orders-table__cell-order-actions .button.cancel:hover {
  background-color: var(--md-pink-light) !important; 
  border-color: #b85570 !important;
  color: #8a2a45 !important;
}


/* ════════════════════════════════
   RESPONSIVE TABLE (มือถือ)
   ============================================ */
@media screen and (max-width: 768px) {
  .woocommerce-MyAccount-content table.my_account_orders {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .woocommerce-MyAccount-content table.my_account_orders thead th,
  .woocommerce-MyAccount-content table.my_account_orders tbody tr td,
  .woocommerce-MyAccount-content table.my_account_orders tbody tr th {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  .woocommerce-orders-table__cell-order-actions p {
    flex-wrap: nowrap !important; 
  }
}

/* ============================================
   MD PRODUCT THAILAND - WOOCOMMERCE MY ACCOUNT
   ============================================ */

/* ── 1. โครงสร้างฐาน (Base & System Font) ── */
:root {
  --md-primary: #26476F;       /* สีกรมท่าแบรนด์หลัก */
  --md-primary-70: #3A6499;    /* สีกรมท่าไฮไลต์ (Hover) */
  --md-primary-120: #1A2F4A;   /* สีกรมท่าเข้มพิเศษ */
  --md-sky: #A0D4FB;           /* สีฟ้าสด */
  --md-sky-pale: #EAF6FF;      /* สีฟ้าพาสเทลจาง */
  --md-pink-dark: #b85570;     /* สีแดง/ชมพูของปุ่มยกเลิก */
  --md-pink-light: #FDF2F5;    /* สีชมพูพาสเทลจาง */
  --md-neutral-200: #DEE0E3;   /* สีเส้นขอบเทาอ่อน */
  
  /* สีสถานะสว่างชัดเจนพิเศษสำหรับพื้นหลังเข้ม */
  --md-status-red-bright: #ff4d4d; 
  --md-status-orange-bright: #ffb830;
}

.woocommerce-MyAccount-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #4A5568;
}

/* ล้างโครงสร้าง p เดิมของ WooCommerce ที่ชอบดันระยะ */
.woocommerce-MyAccount-content table.shop_table_responsive tbody tr td p,
.woocommerce-MyAccount-content table.shop_table_responsive tbody tr th p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}


/* ── 2. ตารางหลัก (ตารางหน้ารายการสั่งซื้อ & หน้าดูรายละเอียด) ── */
.woocommerce-MyAccount-content table.my_account_orders,
.woocommerce-MyAccount-content table.order_details {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--md-neutral-200);
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(38, 71, 111, 0.03);
}

.woocommerce-MyAccount-content table.my_account_orders thead th,
.woocommerce-MyAccount-content table.order_details thead th {
  background-color: var(--md-primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 16px;
  text-align: left;
  border: none;
}

.woocommerce-MyAccount-content table.my_account_orders tbody tr td,
.woocommerce-MyAccount-content table.my_account_orders tbody tr th,
.woocommerce-MyAccount-content table.order_details tbody tr td,
.woocommerce-MyAccount-content table.order_details tfoot tr th,
.woocommerce-MyAccount-content table.order_details tfoot tr td {
  padding: 16px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--md-neutral-200);
  color: #4A5568;
  font-size: 14px;
}

.woocommerce-MyAccount-content table.my_account_orders tbody tr:hover td {
  background-color: var(--md-sky-pale) !important;
}

/* ลบเส้นขอบแถวสุดท้าย */
.woocommerce-MyAccount-content table.my_account_orders tbody tr:last-child td,
.woocommerce-MyAccount-content table.order_details tfoot tr:last-child th,
.woocommerce-MyAccount-content table.order_details tfoot tr:last-child td {
  border-bottom: none;
}


/* ── 3. สีสถานะในตารางรายการ (มินิมอล เน้นเฉพาะสีตัวอักษร) ── */
.woocommerce-orders-table__cell-order-status p {
  display: inline-block !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* สีตัวอักษรสถานะต่างๆ */
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status p {
  color: var(--md-primary) !important;
}
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status p,
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status p {
  color: #c0392b !important;
}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status p {
  color: #27ae60 !important;
}


/* ── 4. 🛠️ แก้ไขแถบสรุปยอดหัวบิล (ไม่ให้ตัวเลขและสถานะจม) ── */
.woocommerce-MyAccount-content > p:first-of-type {
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--md-primary-120) !important; /* พื้นหลังน้ำเงินเข้มตามภาพ */
  color: #ffffff !important;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.woocommerce-MyAccount-content > p:first-of-type mark {
  background: transparent !important;
  font-weight: 700;
  display: inline-block;
}

/* เจาะจงแก้เลขคำสั่งซื้อให้สว่างชัด */
.woocommerce-MyAccount-content > p:first-of-type mark.order-number {
  color: var(--md-status-orange-bright) !important; /* สีทอง/ส้มสว่าง สดใสชัดเจน */
  font-size: 16px;
  padding: 0 4px;
}

/* เจาะจงแก้คำว่า "ไม่สำเร็จ" ให้แดงเด่น */
.woocommerce-MyAccount-content > p:first-of-type mark.order-status {
  color: var(--md-status-red-bright) !important; /* สีแดงนีออนสว่างทะลุพื้นหลัง */
  font-size: 16px;
  padding: 0 4px;
}


/* ── 5. 🛠️ ปรับแต่งปุ่มคำสั่งซื้อทั้งหมด + แก้ไขไอคอนให้สมบูรณ์ ── */
.woocommerce-orders-table__cell-order-actions p,
table.order_details tfoot tr td:has(.order-actions-button) {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap;
}

/* สไตล์ปุ่มหลัก */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .order-actions-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
  height: 38px !important; /* ล็อกความสูงให้เท่ากันทุกปุ่ม */
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.woocommerce-MyAccount-content .button::before,
.woocommerce-MyAccount-content .order-actions-button::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 🔵 ปุ่มชำระเงิน (ปรับสัดส่วนไอคอนการ์ดให้สมบูรณ์ ไม่เบี้ยว) */
.woocommerce-MyAccount-content .button.pay,
.woocommerce-MyAccount-content .order-actions-button.pay {
  background-color: var(--md-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--md-primary) !important;
}
.woocommerce-MyAccount-content .button.pay::before,
.woocommerce-MyAccount-content .order-actions-button.pay::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'%3E%3C/rect%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3Cline x1='7' y1='15' x2='11' y2='15'%3E%3C/line%3E%3C/svg%3E");
}
.woocommerce-MyAccount-content .button.pay:hover,
.woocommerce-MyAccount-content .order-actions-button.pay:hover {
  background-color: var(--md-primary-70) !important;
  border-color: var(--md-primary-70) !important;
}

/* ⚪ ปุ่มดูรายละเอียด (ไอคอนเอกสารบิล) */
.woocommerce-MyAccount-content .button.view {
  background-color: transparent !important;
  color: var(--md-primary) !important;
  border: 1px solid var(--md-neutral-200) !important;
}
.woocommerce-MyAccount-content .button.view::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2326476F' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'%3E%3C/path%3E%3C/svg%3E");
}
.woocommerce-MyAccount-content .button.view:hover {
  background-color: var(--md-sky-pale) !important;
  border-color: var(--md-primary) !important;
}

/* 🔴 ปุ่มยกเลิก (สไตล์ Outline เส้นบางพาสเทล) */
.woocommerce-MyAccount-content .button.cancel,
.woocommerce-MyAccount-content .order-actions-button.cancel {
  background-color: transparent !important;
  color: var(--md-pink-dark) !important;
  border: 1px solid var(--md-pink) !important;
}
.woocommerce-MyAccount-content .button.cancel::before,
.woocommerce-MyAccount-content .order-actions-button.cancel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b85570' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-content .button.cancel:hover,
.woocommerce-MyAccount-content .order-actions-button.cancel:hover {
  background-color: var(--md-pink-light) !important;
  border-color: var(--md-pink-dark) !important;
}


/* ── 6. 🛠️ ดีไซน์กล่องข้อมูลที่อยู่ใหม่ (ลบกล่องซ้อน + เพิ่มความคลีน) ── */
.woocommerce-columns--addresses {
  display: flex;
  gap: 24px;
  margin-top: 30px;
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid var(--md-neutral-200);
  border-radius: 16px;
  padding: 24px !important;
  box-shadow: 0 4px 14px rgba(38, 71, 111, 0.04);
}

/* ลบกล่องซ้อนด้านในของเดิมออกอย่างหมดจด */
.woocommerce-column--billing-address address,
.woocommerce-column--shipping-address address {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  margin-top: 15px;
}

/* หัวข้อที่อยู่ */
.woocommerce-column__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--md-primary);
  margin: 0 !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--md-neutral-200);
}

/* ไอคอนหัวข้อใบเสร็จ */
.woocommerce-column--billing-address .woocommerce-column__title::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2326476F' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ไอคอนหัวข้อจัดส่ง (ปรับเป็นรูปรถบรรทุกขนส่งสินค้าชัดเจน) */
.woocommerce-column--shipping-address .woocommerce-column__title::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2326476F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7zM5.5 18.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM18.5 18.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ข้อความรายละเอียดที่อยู่ */
address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
  color: #4A5568;
}

address p {
  margin: 6px 0 0 0 !important;
}

/* 🛠️ แก้ไขจัดระเบียบแถวเบอร์โทรและอีเมล */
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}


/* ── 7. Responsive (มือถือ) ── */
@media screen and (max-width: 768px) {
  .woocommerce-MyAccount-content table.my_account_orders {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  
  .woocommerce-columns--addresses {
    flex-direction: column;
    gap: 16px;
  }
}

/*  ดีไซน์กล่องข้อมูลที่อยู่ใหม่ (ปรับตามโครงสร้าง HTML จริง) ── */
.woocommerce-Addresses.col2-set.addresses {
  display: flex;
  gap: 24px;
  margin-top: 30px;
}

.woocommerce-Address {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid var(--md-neutral-200);
  border-radius: 16px;
  padding: 24px !important;
  box-shadow: 0 4px 14px rgba(38, 71, 111, 0.04);
  display: flex;
  flex-direction: column;
}

/* จัดระเบียบ Header ให้หัวข้อกับปุ่มแก้ไขอยู่ระนาบเดียวกัน */
.woocommerce-Address-title.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--md-neutral-200);
  margin-bottom: 15px;
}

/* ลบ margin/padding และระยะตกลงมาที่ติดมาจากระบบเดิม */
.woocommerce-Address-title.title h2,
.woocommerce-Address-title.title p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.woocommerce-Address-title.title br {
  display: none !important; /* ลบแท็ก br ที่ทำให้ระยะห่างเพี้ยน */
}

/* หัวข้อที่อยู่ */
.woocommerce-Address-title.title h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--md-primary);
}

/* 🔵 ไอคอนหน้าหัวข้อ: ที่อยู่ในใบเสร็จ */
.u-column1 .woocommerce-Address-title.title h2::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2326476F' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* 🚚 ไอคอนหน้าหัวข้อ: ที่อยู่จัดส่งสินค้า (รูปรถบรรทุกชัดเจน) */
.u-column2 .woocommerce-Address-title.title h2::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2326476F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7zM5.5 18.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM18.5 18.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ปรับแต่งปุ่มลิงก์ "แก้ไข" ให้เป็นปุ่ม Outline คลีนๆ */
.woocommerce-Address-title.title a.edit {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--md-primary) !important;
  border: 1px solid var(--md-neutral-200) !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.woocommerce-Address-title.title a.edit:hover {
  background-color: var(--md-sky-pale) !important;
  border-color: var(--md-primary) !important;
}

/* ข้อความรายละเอียดที่อยู่ */
address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
  color: #4A5568;
  margin: 0 !important;
}

/* เคลียร์กล่อง p ว่างๆ ที่ WooCommerce ชอบใส่มาอุดท้ายตาราง */
.woocommerce-Address > p {
  margin: 0 !important;
  padding: 0 !important;
}

/* 🛠️ เปลี่ยนปุ่มลิงก์ "แก้ไข" ให้เหลือเฉพาะไอคอนดินสอ */
.woocommerce-Address-title.title a.edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;    /* กำหนดความกว้างเท่าความสูงให้เป็นสี่เหลี่ยมจัตุรัส */
  height: 32px !important;
  padding: 0 !important;
  font-size: 0 !important;   /* ซ่อนตัวหนังสือภาษาไทย/อังกฤษเดิมออกไป */
  color: transparent !important;
  border: 1px solid var(--md-neutral-200) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease;
  text-decoration: none !important;
}

/* ใส่ไอคอนดินสอ (Edit Pencil) สีกรมท่า */
.woocommerce-Address-title.title a.edit::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2326476F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* เอฟเฟกต์ตอน Hover เมาส์ชี้ */
.woocommerce-Address-title.title a.edit:hover {
  background-color: var(--md-sky-pale) !important;
  border-color: var(--md-primary) !important;
}

/* ── 8. 🛠️ ดีไซน์หน้าแก้ไขข้อมูลบัญชี (Edit Account Form - รวมร่างฉบับสมบูรณ์) ── */

/* กล่องการ์ดหลักของฟอร์ม */
.woocommerce-EditAccountForm.edit-account {
  background-color: #ffffff;
  border: 1px solid var(--md-neutral-200);
  border-radius: 16px;
  padding: 32px !important; /* เพิ่มพื้นที่ภายในให้ดูโปร่งและมีมิติระดับพรีเมียม */
  box-shadow: 0 4px 14px rgba(38, 71, 111, 0.04);
  margin-top: 24px;
  box-sizing: border-box;
}

/* ── การจัด Layout ช่องกรอก (Grid & Spacing) ── */

/* เคลียร์ฟลอต (Float) ของโครงสร้างเดิมเพื่อป้องกันบล็อกซ้อนเกยกัน */
.woocommerce-EditAccountForm::after {
  content: "";
  display: table;
  clear: both;
}

/* บล็อกแถวทั่วไป */
.woocommerce-EditAccountForm .form-row {
  margin-bottom: 20px !important; /* จัดระยะห่างระหว่างแถวให้เท่ากันอย่างเป็นระเบียบ */
  width: 100%;
}

/* จัดเรียงช่อง "ชื่อจริง" และ "นามสกุล" ให้อยู่ระนาบเดียวกันในจอคอม */
@media screen and (min-width: 769px) {
  .woocommerce-EditAccountForm .form-row-first {
    float: left;
    width: 48% !important;
    margin-right: 4% !important;
    margin-bottom: 20px !important;
  }
  .woocommerce-EditAccountForm .form-row-last {
    float: left;
    width: 48% !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }
}

/* หัวข้อประจำช่องกรอก (Labels) */
.woocommerce-EditAccountForm label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #2D3748;
  margin-bottom: 8px !important;
}

/* เครื่องหมายดอกจัน (*) สีแดงแสดงช่องที่จำเป็นต้องกรอก */
.woocommerce-EditAccountForm label .required {
  color: #e53e3e !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* คำอธิบายใต้ช่อง "ชื่อที่แสดง" */
#account_display_name_description {
  display: block;
  font-size: 12.5px;
  color: #718096;
  margin-top: 6px;
  line-height: 1.4;
}

/* ── ปรับแต่งสไตล์ช่องอินพุต (Inputs & Focus State) ── */
.woocommerce-EditAccountForm input.input-text {
  width: 100% !important;
  height: 44px !important;
  padding: 10px 14px !important;
  font-size: 14.5px !important;
  color: #4A5568 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--md-neutral-200) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01) !important;
}

/* เอฟเฟกต์นุ่มๆ ตอนคลิกพิมพ์ข้อมูล (Focus Ring) */
.woocommerce-EditAccountForm input.input-text:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px var(--md-sky-pale) !important;
  outline: none !important;
}

/* ── กล่องโซน "เปลี่ยนรหัสผ่าน" (Fieldset) ── */
.woocommerce-EditAccountForm fieldset {
  border: 1px dashed var(--md-neutral-200) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin: 28px 0 12px 0 !important;
  background-color: #F8FAFC !important;
  clear: both !important;
}

/* หัวข้อกรอบเปลี่ยนรหัสผ่าน */
.woocommerce-EditAccountForm fieldset legend {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--md-primary) !important;
  padding: 4px 12px !important;
  background-color: #ffffff !important;
  border-radius: 6px !important;
  border: 1px solid var(--md-neutral-200) !important;
}

/* จัดการปุ่มลูกตา เปิด/ปิดรหัสผ่าน ให้ลงล็อกตรงกึ่งกลางช่องพอดี */
.woocommerce-EditAccountForm .password-input {
  display: block;
  position: relative;
  width: 100%;
}

.woocommerce-EditAccountForm .show-password-input {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.woocommerce-EditAccountForm .show-password-input:hover {
  opacity: 0.9;
}

/* ── 🛠️ ปรับพื้นที่บริเวณปุ่มกดด้านล่าง (ล้างช่องว่างแปลกๆ ออกทั้งหมด) ── */

/* ปรับแต่ง p ตัวสุดท้ายที่เป็นตัวอุ้มปุ่มกด */
.woocommerce-EditAccountForm > p:last-of-type {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  clear: both !important;
  width: 100% !important;
}

/* ปุ่ม "บันทึกการเปลี่ยนแปลง" เวอร์ชันเสถียร สัดส่วนสวยงาม */
.woocommerce-EditAccountForm button[name="save_account_details"] {
  background-color: var(--md-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--md-primary) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 0 32px !important; /* เพิ่มความกว้างของปุ่มให้ดูหนักแน่นขึ้น */
  height: 46px !important; 
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(38, 71, 111, 0.1) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
}

.woocommerce-EditAccountForm button[name="save_account_details"]:hover {
  background-color: var(--md-primary-70) !important;
  border-color: var(--md-primary-70) !important;
  box-shadow: 0 4px 12px rgba(38, 71, 111, 0.16) !important;
}

/* ── ล้างโค้ดส่วนเกินและแท็กขยะที่มักติดมากับระบบ WooCommerce ── */
.woocommerce-EditAccountForm br,
.woocommerce-EditAccountForm p:empty,
.woocommerce-EditAccountForm .clear {
  display: none !important;
}/* End custom CSS */