@charset "utf-8";
/* CSS Document */

/* Reset กันพัง */
* {
  box-sizing: border-box;
}

/*BG+FONT */
body {
  margin: 0;
  background: #000; /* BG web */
  font-family: 'Prompt', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #222;
  line-height: 1.6;
  letter-spacing: 0.2px;
}

/* Header */
.header-box {position: relative; width: 920px; margin: 0 auto;}

.header-banner {width: 100%; display: block;}

/* ลิงก์โปร่งใส */
.link {
  position: absolute;
  display: block;
}

/* ตำแหน่งคลิกบนรูป */
.line { top: 35px; right: 18px; width: 215px; height: 26px; }
.fb   { top: 62px; right: 18px; width: 215px; height: 27px; }
.mail { top: 89px; right: 19px; width: 215px; height: 24px; }
.phone{ top: 114px; right: 20px; width: 215px; height: 30px; }

/* Menu TOP */
.menu-wrap {
  width: 920px;
  margin: 0 auto;
  background: #FFFFFF;
}

.menu-920 {
  display: flex;
  padding: 2px;
  margin: 0;
  list-style: none;
  background: #FFFFFF;
}

.menu-920 li {
  background: #CCCCCC;
  margin-right: 2px;
  text-align: center;
}

.menu-920 li:last-child {
  margin-right: 0;
}

/* ขนาดเท่า table เดิม */
.w28 { width: 28px; }
.w113 { width: 113px; }
.w102 { width: 102px; }
.w228 { width: 228px; }
.w143 { width: 143px; }
.w162 { width: 162px; }
.w98  { width: 98px; }

.menu-920 a {
  display: block;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

.menu-920 a:hover {
  background: #E41871;
  color: #fff;
}

/* text Header */
.menu-920 a {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3px;
}

/* text H1 */
h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}

h2 {
  font-size: 22px;
  font-weight: 600;
}

h3 {
  font-size: 18px;
  font-weight: 500;
}

/* text รายละเอียด */
.product-desc {
  font-size: 15px;
  font-weight: 400;
}

/* text ราคา */
.price {
  font-size: 20px;
  font-weight: 600;
  color: #E41871;
}

/* ===== Base ปุ่ม (ใช้ร่วมกัน) ===== */
.btn {
  display: inline-block;
  text-align: center;
  padding: 8px 30px;  /* เดิม 10px 16px → ยาวขึ้น */
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* ===== ปุ่ม LINE (สีเขียว) ===== */
.btn-line {
  background: #06C755;
  color: #fff;
  border: 2px solid #06C755;
}

.btn-line:hover {
  background: #05b84f;
  border-color: #05b84f;
  transform: translateY(-2px);
}

/* ===== ปุ่มทั่วไป (สีเทา) ===== */
.btn-gray {
  background: #f2f2f2;
  color: #333;
  border: 2px solid #ccc;
}

.btn-gray:hover {
  background: #e6e6e6;
  border-color: #bbb;
  transform: translateY(-2px);
}
/* ---------- */


/* -----body 2 คอลัมน์----- */
.page-wrap {
  width: 920px;
  margin: 0 auto;
  background: #fff;
}

.main-layout {
  display: flex;
  gap: 10px;
  padding: 10px;
}

/* ซ้าย */
.sidebar {
  width: 280px;
  background: #f5f5f5;
  padding: 10px;
}

/* เมนู */
.side-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu li {
  margin-bottom: 2px;
}

.side-menu a {
  display: block;
  padding: 2px;
  padding-left: 10px;              /* เพิ่มนิดนึง กดง่ายขึ้น */
  color: #000;
  text-decoration: none;
  font-weight: 500;
}

.side-menu a:hover {
  background: #E41871;
  color: #fff;
}

.menu-title {
  color: #E41871;
  font-weight: 600;
}

/* ขวา */
.main-content {
  flex: 1;
}

/* กล่องโปร */
.promo-box {
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 5px;
  background: #fff;
}

.promo-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* เพิ่มเอฟเฟกต์ให้ดูโปรขึ้น */
.promo-box:hover {
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transform: translateY(-1px);
  transition: 0.3s;
}
/* --------- */


/* ---บทความ--- */
.article-section {
  margin-top: 30px;
  padding: 15px;
}

.article-title {
  text-align: center;
  margin-bottom: 15px;
}

/* grid 2 คอลัม */
.article-grid {
  display: flex;
  gap: 15px;
  align-items: stretch;
}

/* แต่ละฝั่ง */
.article-col {
  width: 50%;
}

/* กล่องบทความ */
.article-box {
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  transition: 0.3s;
}

.article-box:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.article-box h3 {
  margin-bottom: 8px;
  font-size: 16px;
}

.article-box p {
  font-size: 14px;
  color: #555;
}

.article-box a {
  display: inline-block;
  margin-top: 10px;
  color: #E41871;
  text-decoration: none;
  font-weight: bold;
}

.article-col {
  width: 50%;
  box-sizing: border-box;
}


/* --------footer----------- */
.site-footer {
  background: #111;
  color: #fff;
  margin-top: 10px;
  font-size: 14px;
}

/* ตัวนี้สำคัญ 🔥 */
.footer-inner {
  width: 920px;
  margin: 0 auto;
}

/* layout 3 คอลัม */
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 0;
}

.footer-col {
  width: 30%;
}

.footer-col h3,
.footer-col h4 {
  margin-bottom: 10px;
  color: #E41871;
}

.footer-col a {
  color: #ccc;
  text-decoration: none;
}

.footer-col a:hover {
  color: #fff;
}

/* ล่างสุด */
.footer-bottom {
  background: #000;
  border-top: 1px solid #222;
  font-size: 13px;
  text-align: center;
  padding: 15px 0;
}
/* ----------------------------------- */

/* ---icon footer ช่องทางติดต่อ---- */
.social-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  text-decoration: none;
  margin-bottom: 8px;
  transition: 0.3s;
}

.social-item:hover {
  color: #fff;
  transform: translateX(3px);
}

.icon {
  width: 20px;
  height: 20px;
}

/*----- QR LINE ------*/
.line-box {
  margin-top: 15px;
  text-align: center;
}

/* QR */
.line-qr {
  width: 100%;
  max-width: 220px;   /* ไม่ใหญ่เกิน */
  height: auto;
  border-radius: 6px;
  margin-bottom: 8px;
}


/* -----ดูสินค้าอื่นเพิ่มเติม----- */
.more-links {
  font-size: 14px;
  color: #555; /* ตัวหนังสือหลัก */
}

.more-links a {
  display: block;
  margin-top: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #f5f5f5;
  color: #555;            /* 👈 สีเทา */
  text-decoration: none;
}

.more-links a:hover {
  background: #efefef;   /* เทาเข้มขึ้นตอน hover */
  color: #000;           /* ดำเล็กน้อยให้เด่นขึ้น */
}

/* -----สินค้า รายละเอียด ราคา----- */
/* ----- รายละเอียดสินค้า ----- */
.promo-info {
  padding: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.promo-info strong {
  font-weight: 500;
  display: block;
  margin-bottom: 3px;
}

.promo-info .price {
  color: #e60023;
  font-weight: 500;
  display: block;
  margin: 5px 0;
}

.promo-info a {
  color: #E41871;
  text-decoration: none;
  font-size: 13px;
}

/* ----- list spec ----- */
.spec-list {
  list-style: none;
  padding-left: 0;
}

.spec-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  padding-left: 14px;
}

.spec-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #E41871; /* สีชมพู */
  font-size: 14px;
}

.spec-list li strong {
  white-space: nowrap;
  min-width: 90px;
  font-weight: 500;
}


/* -----ตารางราคา----- */
/* ครอบตารางให้เลื่อนในมือถือ */
.promo-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
}

/* ตาราง */
.promo-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* ช่อง */
.promo-table-wrap th,
.promo-table-wrap td {
  padding: 3px;
  text-align: center;
  border: 1px solid #eee;
}

/* หัวตาราง */
.promo-table-wrap th {
  background: #f5f5f5;
  font-weight: 400;
}

/* hover ขนาดและสี */
.promo-table-wrap tr:hover td {
  background: #fafafa;
}

.promo-table-wrap td .price {
  font-size: 12px;
  color: #000 !important;
  font-weight: 400;
}

/* ----list รายละเอียดวัสดุ---- */
.spec-list {
  margin: 6px 0;
  padding-left: 18px;
  font-size: 13px;
}

.spec-list li {
  margin-bottom: 3px;
}

/* bullet ให้ดูพรีเมียมขึ้น */
.spec-list li::marker {
  color: #e60023;
}

/* หัวสินค้าเป็นสีชมพู */
.promo-info strong {
  color: #E41871; /* ชมพูโทนพรีเมียม */
}
/* พื้นเทาอ่อนเฉพาะส่วนข้อมูล */
.promo-info {
  background: #f7f7f7; /* เทาอ่อน */
  padding: 10px;
  margin-top: 5px;
  border-radius: 6px;
}
.promo-info:last-child {
  background: transparent;
  border: none;
  padding-top: 5px;
}


/* ---หมายเหตุ--- */
.note-list {
  margin: 8px 0;
  padding-left: 18px;
  font-size: 12px;
}

.note-list li {
  margin-bottom: 3px;
  color: #555;
}


/* ---banner box--- */
.banner-box {
  margin: 5px 0;
}

.banner-box img {
  width: 100%;
  display: block;
  border: 0px solid #ddd;
}

/* hover ให้ดูน่ากด */
.banner-box a:hover img {
  opacity: 0.9;
  transform: scale(1.01);
  transition: 0.3s;
}

/* ---รูปตัวอย่างหน้าset 2 รูปต่อแถว--- */
.img-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.img-grid img {
  width: 100%;
  border-radius: 0px; /* ขอบรูป */
  display: block;
}