/* ใช้ box-sizing แบบเดียวกันกับส่วนประกอบ Instagram ทุกชิ้น */
.ig-profile,
.ig-profile *,
.ig-feed,
.ig-feed * {
  /* รวมเส้นขอบและระยะห่างไว้ในขนาดที่กำหนด */
  box-sizing: border-box;
}

/* ซ่อนส่วนฟีด เหลือเฉพาะหน้าโปรไฟล์และตารางรูป */
.ig-feed {
  display: none;
}

/* ปรับกล่องโปรไฟล์ให้ชิดขอบพื้นที่แอป */
.ig-profile {
  /* ขยายความกว้างชดเชย padding ของพื้นที่แอป */
  width: calc(100% + 34px);
  /* ดึงกล่องกลับไปชิดขอบซ้ายของหน้าจอ */
  margin: -20px -17px 0;
  /* กำหนดพื้นหลังสีขาวแบบ Instagram */
  background: #fff;
}

/* จัดแถวรูปโปรไฟล์และสถิติให้อยู่แนวนอน */
.ig-profile-top {
  /* ใช้ Flexbox สำหรับวางรูปและตัวเลขคู่กัน */
  display: flex;
  /* จัดองค์ประกอบให้อยู่กึ่งกลางแนวตั้ง */
  align-items: center;
  /* เว้นช่องว่างระหว่างรูปกับสถิติ */
  gap: 22px;
  /* กำหนดระยะขอบภายในส่วนโปรไฟล์ */
  padding: 18px 16px 10px;
}

/* กำหนดรูปโปรไฟล์ให้เป็นวงกลม */
.ig-avatar {
  /* กำหนดความกว้างของรูปโปรไฟล์ */
  width: 82px;
  /* กำหนดความสูงให้เท่าความกว้าง */
  height: 82px;
  /* ไม่ให้รูปหดเมื่อพื้นที่แนวนอนจำกัด */
  flex: 0 0 82px;
  /* ครอบภาพให้เต็มวงกลมโดยไม่บิดสัดส่วน */
  object-fit: cover;
  /* ตัดมุมภาพให้เป็นวงกลม */
  border-radius: 50%;
}

/* กระจายตัวเลขสถิติทั้งสามช่องให้เต็มพื้นที่ */
.ig-stats {
  /* แสดงสถิติเป็นสามคอลัมน์ */
  display: grid;
  /* ให้คอลัมน์มีความกว้างเท่ากัน */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* ใช้พื้นที่ที่เหลือจากรูปโปรไฟล์ */
  flex: 1;
  /* จัดตัวเลขกึ่งกลางแต่ละช่อง */
  text-align: center;
}

/* จัดจำนวนและชื่อสถิติให้อยู่คนละบรรทัด */
.ig-stats div {
  /* เรียงตัวเลขกับข้อความในแนวตั้ง */
  display: flex;
  /* วางรายการจากบนลงล่าง */
  flex-direction: column;
  /* เพิ่มระยะห่างเล็กน้อยระหว่างรายการ */
  gap: 3px;
}

/* แสดงตัวเลขสถิติให้เด่นกว่าคำอธิบาย */
.ig-stats strong {
  /* กำหนดขนาดตัวเลข */
  font-size: 16px;
  /* ทำให้ตัวเลขเข้ม */
  font-weight: 700;
}

/* แสดงคำอธิบายสถิติด้วยตัวอักษรขนาดเล็ก */
.ig-stats span {
  /* กำหนดขนาดข้อความใต้ตัวเลข */
  font-size: 11px;
}

/* จัดข้อความแนะนำตัวให้อยู่ใต้รูปโปรไฟล์ */
.ig-bio {
  /* เว้นระยะขอบซ้ายขวาให้ตรงกับเนื้อหา */
  padding: 2px 16px 10px;
  /* กำหนดขนาดข้อความแนะนำตัว */
  font-size: 12px;
}

/* จัดระยะห่างข้อความในคำแนะนำตัว */
.ig-bio p {
  /* กำหนดระยะบรรทัดให้อ่านง่าย */
  margin: 4px 0 0;
  /* กำหนดความสูงของบรรทัด */
  line-height: 1.45;
}

/* วางปุ่ม Follow และ Message ในแถวเดียวกัน */
.ig-profile-actions {
  /* ใช้ Flexbox สำหรับจัดปุ่มในแนวนอน */
  display: flex;
  /* เว้นช่องว่างระหว่างปุ่ม */
  gap: 7px;
  /* เว้นขอบด้านข้างและด้านล่าง */
  padding: 0 16px 14px;
}

/* ปรับปุ่ม Follow ให้เหมาะกับแถวปุ่มโปรไฟล์ */
.ig-profile-actions .primary-button {
  /* ให้ปุ่มกินพื้นที่ส่วนใหญ่ */
  flex: 1;
  /* ล้างความกว้างเต็มจากรูปแบบปุ่มทั่วไป */
  width: auto;
  /* ลดระยะขอบในปุ่มให้พอดีกับพื้นที่ */
  padding: 7px 10px;
  /* กำหนดความสูงขั้นต่ำที่กดได้สะดวก */
  min-height: 32px;
  /* ลดความโค้งให้ใกล้เคียงปุ่ม Instagram */
  border-radius: 7px;
  /* กำหนดขนาดตัวอักษร */
  font-size: 12px;
}

/* ตกแต่งปุ่ม Message ให้เข้าคู่กับปุ่ม Follow */
.ig-message-button {
  /* ให้ปุ่มมีความกว้างพอ ๆ กับปุ่มติดตาม */
  flex: 1;
  /* วาดเส้นขอบบางสีเทา */
  border: 0;
  /* ทำมุมปุ่มให้โค้งเล็กน้อย */
  border-radius: 7px;
  /* ใช้พื้นหลังสีเทาอ่อน */
  background: #efeff2;
  /* ใช้สีตัวอักษรเข้ม */
  color: #17171a;
  /* กำหนดน้ำหนักตัวอักษร */
  font-weight: 600;
  /* ให้ขนาดตัวอักษรเท่ากับปุ่ม Follow */
  font-size: 12px;
}

/* จัดวงกลม Story highlights ให้วางเรียงกัน */
.ig-highlights {
  /* วางไฮไลต์แนวนอน */
  display: flex;
  /* เว้นระยะเท่ากันระหว่างวงกลม */
  gap: 18px;
  /* เปิดการเลื่อนแนวนอนเมื่อพื้นที่ไม่พอ */
  overflow-x: auto;
  /* เว้นขอบและระยะด้านล่าง */
  padding: 2px 16px 14px;
  /* ซ่อนแถบเลื่อนใน WebKit */
  scrollbar-width: none;
}

/* ซ่อนแถบเลื่อนของไฮไลต์ในเบราว์เซอร์ WebKit */
.ig-highlights::-webkit-scrollbar {
  /* ไม่แสดงแถบเลื่อน */
  display: none;
}

/* จัดรูปและชื่อไฮไลต์ให้อยู่ตรงกลาง */
.ig-highlight {
  /* เรียงรูปและข้อความในแนวตั้ง */
  display: flex;
  /* จัดองค์ประกอบให้อยู่กึ่งกลางแนวนอน */
  align-items: center;
  /* กำหนดทิศทางจากบนลงล่าง */
  flex-direction: column;
  /* กำหนดความกว้างคงที่ต่อหนึ่งไฮไลต์ */
  flex: 0 0 56px;
  /* เว้นช่องว่างระหว่างรูปกับชื่อ */
  gap: 5px;
  padding: 0;
  border: 0;
  color: #17171a;
  background: transparent;
  cursor: pointer;
}

/* ทำรูปไฮไลต์ให้เป็นวงกลมพร้อมขอบ */
.ig-highlight img {
  /* กำหนดขนาดรูปไฮไลต์ */
  width: 56px;
  /* กำหนดความสูงเท่ากับความกว้าง */
  height: 56px;
  /* ครอบรูปให้เต็มพื้นที่โดยไม่บิดสัดส่วน */
  object-fit: cover;
  /* ทำรูปให้เป็นวงกลม */
  border-radius: 50%;
  /* สร้างวงแหวนรอบรูป */
  border: 2px solid #e7e7e9;
  /* เว้นระยะระหว่างภาพกับขอบ */
  padding: 2px;
}

/* กำหนดรูปแบบตัวอักษรชื่อไฮไลต์ */
.ig-highlight span {
  /* จำกัดความกว้างของชื่อหมวด */
  max-width: 64px;
  /* ซ่อนข้อความที่ยาวเกินพื้นที่ */
  overflow: hidden;
  /* แสดงชื่อเป็นบรรทัดเดียว */
  white-space: nowrap;
  /* แสดงจุดไข่ปลาเมื่อข้อความยาวเกิน */
  text-overflow: ellipsis;
  /* กำหนดขนาดตัวอักษร */
  font-size: 10px;
}

/* จัดแท็บโปรไฟล์ให้มีสองคอลัมน์ */
.ig-tabs {
  /* แบ่งพื้นที่แท็บออกเป็นสองส่วนเท่ากัน */
  display: grid;
  /* กำหนดจำนวนและขนาดคอลัมน์ */
  grid-template-columns: repeat(2, 1fr);
  /* กำหนดความสูงของแถบแท็บ */
  height: 42px;
  /* วาดเส้นคั่นด้านบน */
  border-top: 1px solid #efeff1;
}

/* จัดสัญลักษณ์แต่ละแท็บให้อยู่กึ่งกลาง */
.ig-tabs span {
  /* ใช้ Flexbox จัดสัญลักษณ์ */
  display: flex;
  /* จัดกึ่งกลางแนวนอน */
  justify-content: center;
  /* จัดกึ่งกลางแนวตั้ง */
  align-items: center;
  /* ใช้สีเทาสำหรับแท็บที่ไม่ได้เลือก */
  color: #9a9aa0;
  /* กำหนดขนาดสัญลักษณ์ */
  font-size: 21px;
}

/* เน้นแท็บที่เลือกด้วยเส้นขอบด้านบน */
.ig-tabs .selected {
  /* ใช้สีเข้มกับแท็บที่กำลังเลือก */
  color: #17171a;
  /* วาดเส้นแสดงแท็บที่เลือก */
  border-top: 1px solid #17171a;
  /* ยกเส้นขึ้นทับเส้นคั่นเดิม */
  margin-top: -1px;
}

/* จัดภาพโปรไฟล์เป็นตารางสามคอลัมน์ */
.ig-photo-grid {
  /* สร้างตารางภาพ */
  display: grid;
  /* แบ่งพื้นที่ออกเป็นสามคอลัมน์ */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* เว้นช่องว่างบาง ๆ ระหว่างภาพ */
  gap: 2px;
}

/* กำหนดสัดส่วนภาพและการครอบภาพในตาราง */
.ig-photo-grid img {
  /* ให้ภาพเต็มความกว้างของคอลัมน์ */
  width: 100%;
  /* กำหนดสัดส่วนภาพเป็นสี่เหลี่ยมจัตุรัส */
  aspect-ratio: 1;
  /* ครอบภาพให้เต็มช่องโดยไม่ยืด */
  object-fit: cover;
}

/* จัดส่วนฟีดและขยายให้ชิดขอบหน้าจอ */
.ig-feed {
  /* ขยายความกว้างชดเชย padding ของพื้นที่แอป */
  width: calc(100% + 34px);
  /* ดึงส่วนฟีดให้ชิดขอบซ้ายขวา */
  margin: 0 -17px;
  /* กำหนดพื้นหลังสีขาว */
  background: #fff;
}

/* จัดหัวข้อ Feed */
.ig-feed h3 {
  /* ล้างระยะขอบเดิมของหัวข้อ */
  margin: 0;
  /* เพิ่มระยะห่างภายในหัวข้อ */
  padding: 14px 16px 8px;
  /* กำหนดขนาดหัวข้อ */
  font-size: 17px;
}

/* วาดเส้นคั่นระหว่างโพสต์ */
.ig-post {
  /* วาดเส้นคั่นด้านบนของแต่ละโพสต์ */
  border-top: 1px solid #efeff1;
  /* เพิ่มระยะห่างด้านล่าง */
  padding-bottom: 12px;
}

/* จัดรูปโปรไฟล์ ชื่อบัญชี และเมนูโพสต์ */
.ig-post-header {
  /* วางรายการส่วนหัวในแนวนอน */
  display: flex;
  /* จัดองค์ประกอบให้อยู่กึ่งกลางแนวตั้ง */
  align-items: center;
  /* เว้นช่องว่างระหว่างรูปกับชื่อบัญชี */
  gap: 9px;
  /* กำหนดความสูงส่วนหัว */
  height: 45px;
  /* กำหนดระยะขอบด้านข้าง */
  padding: 0 12px;
  /* กำหนดขนาดตัวอักษรชื่อบัญชี */
  font-size: 12px;
}

/* กำหนดขนาดรูปเล็กในส่วนหัวโพสต์ */
.ig-post-header img {
  /* กำหนดความกว้างรูปบัญชี */
  width: 28px;
  /* กำหนดความสูงรูปบัญชี */
  height: 28px;
  /* ครอบรูปให้เต็มพื้นที่ */
  object-fit: cover;
  /* ทำรูปเป็นวงกลม */
  border-radius: 50%;
}

/* ดันเมนูสามจุดไปชิดขอบขวา */
.ig-post-header span {
  /* ใช้พื้นที่ว่างดันเมนูไปทางขวา */
  margin-left: auto;
  /* เพิ่มระยะกดรอบเมนู */
  padding: 5px;
  /* กำหนดขนาดสัญลักษณ์เมนู */
  font-size: 16px;
}

/* แสดงภาพโพสต์เต็มความกว้างของหน้าจอ */
.ig-post-photo {
  /* กำหนดความกว้างภาพเต็มโพสต์ */
  width: 100%;
  /* จำกัดความสูงเพื่อไม่ให้ภาพสูงเกินหน้าจอ */
  max-height: 440px;
  /* รักษาสัดส่วนภาพขณะครอบพื้นที่ */
  aspect-ratio: 1;
  /* ครอบภาพให้เต็มกรอบโดยไม่บิดสัดส่วน */
  object-fit: cover;
  /* แสดงภาพเป็นบล็อกเพื่อตัดช่องว่างด้านล่าง */
  display: block;
}

/* จัดแถวปุ่มโต้ตอบใต้รูปโพสต์ */
.ig-post-actions {
  /* วางปุ่มในแนวนอน */
  display: flex;
  /* จัดปุ่มให้อยู่กึ่งกลางแนวตั้ง */
  align-items: center;
  /* กำหนดระยะห่างปุ่ม */
  gap: 13px;
  /* เพิ่มระยะขอบรอบปุ่ม */
  padding: 7px 12px 0;
}

/* ล้างรูปแบบปุ่มมาตรฐานให้ปุ่มโต้ตอบ */
.ig-post-actions button {
  /* ล้างเส้นขอบปุ่ม */
  border: 0;
  /* ล้างพื้นหลังปุ่ม */
  background: transparent;
  /* กำหนดสีไอคอน */
  color: #17171a;
  /* เพิ่มพื้นที่กดรอบไอคอน */
  padding: 0;
  /* เปลี่ยนเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
  cursor: pointer;
  /* กำหนดขนาดไอคอน */
  font-size: 25px;
  /* กำหนดความสูงบรรทัดของไอคอน */
  line-height: 1;
}

/* ทำเครื่องหมายบันทึกโพสต์ให้ชิดขวา */
.ig-post-actions span {
  /* ใช้พื้นที่ว่างดันไอคอนไปทางขวา */
  margin-left: auto;
  /* กำหนดขนาดไอคอนบันทึก */
  font-size: 24px;
}

/* แสดงหัวใจสีแดงเมื่อถูกใจโพสต์ */
.ig-post-actions .liked {
  /* ใช้สีแดงสำหรับสถานะถูกใจ */
  color: #ff3040;
}

/* จัดระยะข้อความจำนวนไลก์ */
.ig-likes {
  /* ล้างระยะขอบบนและจัดระยะด้านล่าง */
  margin: 6px 12px 3px;
  /* กำหนดขนาดข้อความจำนวนไลก์ */
  font-size: 12px;
}

/* จัดคำบรรยายโพสต์ */
.ig-caption {
  /* ล้างระยะขอบและเว้นด้านล่างเล็กน้อย */
  margin: 0 12px 4px;
  /* กำหนดขนาดคำบรรยาย */
  font-size: 12px;
  /* กำหนดความสูงบรรทัด */
  line-height: 1.45;
}

/* แสดงเวลาและจำนวนความคิดเห็นด้วยสีเทา */
.ig-post-time {
  /* เว้นระยะด้านซ้ายขวา */
  margin: 0 12px;
  /* ใช้สีเทาอ่อน */
  color: #8e8e93;
  /* กำหนดขนาดตัวอักษร */
  font-size: 10px;
}

.ig-story-viewer {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #171717;
}

.ig-story-viewer[hidden] {
  display: none;
}

.ig-story-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-story-progress {
  position: absolute;
  z-index: 2;
  top: 36px;
  right: 12px;
  left: 12px;
  display: flex;
  gap: 4px;
}

.ig-story-progress span {
  flex: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
}

.ig-story-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: #fff;
}

.ig-story-progress i.complete {
  transform: scaleX(1);
}

.ig-story-progress i.active {
  animation: ig-story-progress 5s linear forwards;
}

@keyframes ig-story-progress {
  to {
    transform: scaleX(1);
  }
}

.ig-story-header {
  position: absolute;
  z-index: 2;
  top: 48px;
  right: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.ig-story-viewer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.ig-story-close {
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.ig-story-hit {
  position: absolute;
  z-index: 1;
  top: 90px;
  bottom: 72px;
  width: 38%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ig-story-previous {
  left: 0;
}

.ig-story-next {
  right: 0;
  width: 62%;
}

.ig-story-footer {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 24px;
  left: 14px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  font-size: 12px;
}